This is the process that I went through to redesign the notifications system for BlueJeans’s desktop and web applications.

Audit

Before beginning to redesign the notification system, the first step was to do an audit of existing notifications. I created a spreadsheet with all the verbiage that is used currently, and worked with the product manager to brainstorm notifications we will need in the future based on the product road map. This helped identify the three main types of notifications that need to be designed for. The guiding questions for this phase were the following:

• Which types of notifications exist in the product today? 

• Which types do we want to add in the future? 

• What are the gaps? inconsistencies? redundancies?

User Interviews

The next step was to talk to customers and understand the problems they have with the product’s notifications. Reaching out to the customer support team was also valuable in understanding the issues that customers have when they call in for support. The guiding questions for this phase were the following:

• What is frustrating about using BlueJeans?

• What is delightful about using BlueJeans?

• Which notifications are the most important? least important?

• When are you most likely to call in for support? 

Interviews were conducted over BlueJeans calls.

Comparative & Competitive Analysis

Understanding the patterns and solutions — particularly notification systems and first time user experiences (FTUE) — that exist in products today is important to inspire ideas for product and feature innovation. The guiding questions for this phase were the following:

• How does other video conferencing software handle notifications? What works? What doesn’t work?

• Which software do the best job with notifications? What makes them successful?

• What are examples of successful first time user experiences? How is additional guidance accessible throughout the experience?

• People find it challenging to understand and remember how to complete primary tasks. 

• People often call support to ask questions that are already addressed on the support website.

Opportunity #1

Design a first-time user experience that helps people orient themselves in the product. Make continuous guidance accessible as they continue to use the product.

• There is no distinction between notifications which makes it overwhelming and easy to miss those that are most important.

Opportunity #2

Outline a hierarchy that prioritizes notifications that are most important to users.

• Each notification consumes a large percentage of the screen and covers the video or screen share which is disruptive during meetings.

Opportunity #3

Design an elegant visual system that remains legible on a diverse set of backgrounds.

• When a notification suggests a course of action, people struggle to locate and carry out that action

Opportunity #4

Make suggested actions more accessible through the notifications.

• Every new notification requires additional design and engineering effort.

• There are inconsistencies between different notifications.

Opportunity #5

Establish a framework that will solve for existing notifications and make it easy to add new notifications with little to no design effort.

The information architecture is different for notifications, tooltips, and helptips. Starting with notifications (the most complex and established) and moving to tooltips, and then helptips (the least established).

Notifications:

• Establish logic for how to separate the notifications between the 3 column grid in the new application design

• Design a hierarchy of notifications in each column from most to least important to the user to ensure the best meeting experience.

• Brainstorm applications for icons, images, and action buttons.

Tooltips:

• Make a list of elements that require tooltips.

• Ensure that the verbiage for all tooltips and text elements are consistent.

Helptips

• Better understand the needs and function of helptips.

• Brainstorm additional contexts in which helptips could be utilized.

The biggest visual challenge was designing a solution that would fit the existing visual language while remaining legible regardless of the color of the user’s video. A variety of solutions were explored, with varying background and text colors, borders, and drop shadows. Each was tested on a variety of photographs with different levels of contrast, color variation, and brightness.

Notifications:

The first step to creating an adaptable framework was to redesign a few of the existing notifications with the new visual style. This informed the additional elements that were needed in the new system. The audit I conducted during my research helped me quickly solve for the variety of needs.

I sketched out a rough matrix with the proposed logic and examples for each. Working closely with the developers was especially important during this phase to make sure the matrix was clear and thorough. One of the goals was to design a framework that would allow the developers to implement future notifications with minimal design effort, so I had to make sure they were comfortable with the system.

Helptips:

Helptips require a simpler framework. The three key variables are title/no title, button/no button and location. A location map was spec-ed out to solve for edge cases, including notifications that are too close to the top or bottom of the screen.