← Back to home

Quick Notes

Using ML to accelerate note composition

I redesigned how agents record admin notes, a seemingly small but impactful feature that is used in every support case. Admin notes help other agents on the case review activity that has happened so far. The final implementation has saved Airbnb ~$4MM.


In 2019 it was estimated that agents spent an average of 32 minutes on each ticket, where 12% of that time was spent on writing admin notes. The purpose of writing an admin note is to provide other agents involved in a case to quickly get context on the case activity and history.

Since cases are escalated 45% of the time, it is quite likely that a new agent will take over a case and need to review admin notes.

$9 million USD was the cost inccured by the company in 2019, with much higher numbers in 2020 (due to COVID-19).


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


2 weeks


Agents spent 12% of their time writing admin notes, contributing to the ~$9M USD incurred due to ticket resolution time.


I kicked off the project by shadowing an agent's workflow in the old agent tools and finding opportunities to speed up the note-taking workflow.

From the kickoff, I saw that the agent would format his notes by adding a '+' sign before every note. Notes were also sometimes very long, which we wanted to discourage.

Additionally, a note composer would need to be directly visible, as agents complained about having to scroll down the left hand panel. This is especially important for a feature that would be used frequently.

Understanding the problem

Agents often spent more time than needed on admin notes, because they lacked instruction on what to write vs omit.


How might we speed up the writing process?

Additionally, how might we educate agents on what can be ommitted in an admin note? How might we leverage the new Design Language System and microinteractions to design a nimble composer experience in limited real estate?

Composer entrance explorations

Previously I had explored having a fixed height composer appear from the bottom of the screen. There were some concerns about the admin note composer being too small. I explored having the composer slide in to the right of the timeline.

However, I learned that this approach was not straightforward from an engineering standpoint, and would require a complete re-structuring of the front-end.

Additionally, from my research, we learned that agents were spending more time writing notes since the admin note composer was expandable in the old agent tools. We wanted to discourage agents from spending too much time writing notes by minimizing composer screen real estate.

Panel slideover

Entry point explorations

I explored several entry points for where an agent would add an admin note. One, from the action footer. Two, from a button. Third, from the top controller. Through a research session, I found that the button worked the best. The action footer approach didn't work, because that link needed to be used for other actions (transferring a case). The add icon on the top controller felt too disjointed from where the admin note composer appears. The button was a happy medium, where the admin note at the bottom of the timeline would be replaced by its composer.


From action footer

From add admin note button

From top controller

ML applications

I saw some opportunities to address low-hanging fruit based on my research calls. First, we can surface common note suggestions, to avoid writing redundant notes. Second, we can auto-format notes to improve readability. Third, we can raise inline alerts when there are unnecessary notes.


Surfacing note suggestions

Auto-format notes

Warn about unnecessary notes


Testing Notes placement

At this point we took our designs to agents, and asked them for feedback.

Agents were concerned that notes weren't visible when first loading the page, since notes are the first thing agents look at when receiving a case.

To solve this, we removed Notes as its own tab and added it as a filter instead. That way, Notes would be accessible from the Timeline, while agents can still filter down to notes if a more tailored view is needed.

Final design

In the end, I used Principle to prototype the final microinteractions. We decided that ML applications (unnecessary note detection and suggested notes) would be built as P1 features so we can first get data on how agents are composing notes.