Developing a Notifications Framework

Problem

"Noise" during the user experience can distract users from their current task, degrade trust and retention, and cause "banner blindness," which hurts engagement and conversion.

Solution

Create a set of design system guidelines to facilitate a better, more empathetic notifications experience across the desktop product. This framework directs designers to the most appropriate component depending on the purpose of a user-facing message, ensuring that communication is more relevant, less intrusive, and drives engagement and conversion more successfully.

Process

First, we needed to define what methods and components in our design system count as a "notification," or means of grabbing a user's attention. We included:

• Alerts and banners
• Badges
• Input messages
• Modals and carousels
• Notification center messages
• Popouts and coachmarks
• Recommendations
• Toasts

Next, my design partner and I researched best practices around using notifications and led a workshop with other designers. We asked them to share examples of notifications they've created and choose a category that best described the message purpose. They left stickies explaining how difficult or easy it was to decide between the categories we provided.

Finally, we gave them a worst case scenario: a screenshot of a page littered with notifications. We asked the designers to rate the most important notifications from 1 to 5 from both a user and business perspective and share their rationale.

We took feedback and iterated on the purpose categories, this time adding subcategories for more nuance. Then we pressure-tested the changes by asking designers to match specific scenarios to the different categories and subcategories. Afterward, my design partner and I did an affinity mapping to find common themes and divergence across the card sorts.

Results

By identifying common problem areas, we were able to solve for the remaining points of overlap and confusion. We then presented our learnings and a new proposal to the notifications team at an on-site.

After getting alignment, we created a "living" document that we shared with Product, Engineering, and Design teams so they could pressure-test the framework in their experiments, identify edge cases, and share feedback to help us refine.