I joined Airbnb as an experience design contractor in June 2021. Airbnb realized the need for an improved agent tooling system after COVID-19, when the old agent tools fell short in ticket resolve speed.
As part of The Community Support Platform Team, I worked alongside three other designers to redesign Agent Tools, the platform that agents use to handle the millions of support cases that come in from guests and hosts around the world.
Jessica Chang (Designer) / Beth Soucy (Agent Tools Lead) / Anastasia Fuller (Copywriter) / Maggie (Taxonomist) / Chloe Moon, Steven Hobson-Campbell (Engineers)
2 months
Overwhelming taxonomy
Irrelevant search results
Agents had to select the correct contact reason out of 600 possible contact reasons. Navigating four levels in the nested dropdown made selecting the right contact reason frustrating, and sometimes unnecessarily repetitive. Search results were impossible to navigate and very irrelevant.
Simplify navigation, re-surface repeated actions, and present more relevant search results
I worked very closely with the taxonomist, Maggie, to display the complete, three-level hierarchy of contact reasons that could represent the case. Below are a couple designs I explored to represent the full taxonomy.
In the new taxonomy, contact reasons are broken down into four user types: Guest, Host, Admin, Trust. I saw this as an opportunity to use them as filters.
Sliding panel
Multi-panel
After taking my explorations to a few critiques, I got feedback that the multi-panel dropdown approach did not improve the navigation problem. There are several parent nodes that have 10+ child nodes which would cause the dropdown to overflow off small screens.
There was a lot of positive feedback on the sliding panel approach, as it's scalable in case the taxonomy gets more complex in the future.
I decided to design a new panel takeover component to house the contact reason selection flow. This would use the sliding panel approach, while taking advantage of the full height of the left hand panel. This solution is a lot more scalable to other use cases that might require content to be elevated above the left or right hand panels.
Browsing the taxonomy tree
I was expecting the menu of the options from the beginning, but if it's already suggesting something depending on what the conversation is about, that is great! -Participant 8
So much cleaner, faster, and more efficient
I'm surprised that the tree could be organized in such as simple way! -Katarzyna, 7 years at Airbnb
Finally, I worked on creating a final spec to handoff to the engineers, Chloe and Steven. Agent tools would be the first to use a completely new design system called Tools Design Language System. I designed a component called "Panel Takeover" which takes over either the left or right hand panel, and can be re-used for other use cases and content that need to rest above either the case information, or activity panel.
I brought my final designs to Product Design Review, which was reviewed and approved by the VP of Design.
The final product design spec for engineers