Contact reason

Raising the accuracy rate for case contact reason selection

As part of the Nova Case Tools redesign, I redesigned how agents select the contact reason for the case, a $10M feature that agents must use on every case in order to unlock the workflows they must follow, and help Airbnb gather data.

Background

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.

Team

Jessica Chang (Designer) / Beth Soucy (Agent Tools Lead) / Anastasia Fuller (Copywriter) / Maggie (Taxonomist) / Chloe Moon, Steven Hobson-Campbell (Engineers)

Timeline

2 months

Problem

Agents spent ~$10M time determining the contact reason of a support case in 2020, contributing to a low contact reason selection accuracy rate (38.7%).

Overwhelming taxonomy

Irrelevant search results

Understanding the problem

Agents found contact reason selection frustrating and overwhelming.

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.

Opportunity

How might we help agents select contact reasons accurately?

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

Iterations

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

Testing

We studied how 14 participants navigated our prototype of the improved contact reason selection experience.

Agents recognized that the different tabs would load contact reasons for that selection.

Several agents explained that they would use the search features to find contact reasons by key words.

Agents appreicated that they wouldn't need to navigate to contact reasons from the top level of the taxonomy.

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

Final Designs

Selecting a contact reason via navigating a sliding taxonomy, with intelligent filters and an improved search experience

Spec-ing out new components

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