Toast notifications were temporarily released in early 2022 but rolled back due to complaints that they were annoying and appeared in cumbersome areas of the product (top right). There were also some instances of complaints about them being too visually dominant.

The Current State of Toasts and Banners

At present, our informational banners and success banners have identical appearances, even though they are distinct components. On the average screen size for our user (1440 px), our current success messages cover up links on standard pages, such as the client page, when they appear.

Success messages should be non-intrusive and discrete while still drawing attention to communicate to the users that their action succeeded or failed.

Introducing a More Efficient Method of Auditing Components for the Design Systems Team

I was expected to manually search through every page to locate all the instances of success and error banners. However, I realized that this method was very time-consuming and inefficient.

As a solution, I utilized my background in engineering and requested access to the code base. Using Github, I was able to search through the code and locate every instance of any component, making the process of auditing much more efficient.

To organize the information, I created three separate Notion databases for each of the three types of banners: success, error, and alert banners. In these databases, I recorded details such as the type of banner, the action that triggers the banner, the current copy, the new copy, and a link to the instance of the component in the Github repository.

Design Decision: Getting Visual Design Feedback from the Design Team

I leveraged Slack to efficiently collect asynchronous feedback on a series of 12 toast notification prototypes.

These prototypes varied in style and placement and included both success and error messages.

The key focus of the feedback was to decide between two design options: a white toast with accent colors or a solid-colored version, and to determine the most effective placement for these notifications.

The team's responses were insightful, showing a general preference for the less intrusive white/green toast design. There was also a healthy discussion about the ideal placement of these toasts, with opinions varying between left, middle, and bottom right positions. This experience underscored the effectiveness of using Slack for asynchronous communication, enabling my team to provide well-considered feedback at their own pace, which was invaluable for the decision-making process in the design of the toast notifications.

Validating the Design and Placement Through Usability Testing

To prevent repeating past errors, we conducted user testing with a small group of six individuals. Our goal was to assess the effectiveness of the newly developed toast component in terms of its visibility and impact on user workflow. The toast was designed to be informative without disrupting the user's activities.

Our primary measure of success was whether users noticed the toast. Although the toast is meant to convey important notifications, it should not interfere with the user's workflow.

Design Decision: Top-Center, Bottom-Center, or Bottom-Left? 🤔

Towards the end of this project, the top-center, bottom-center, and bottom-left were the top three candidates for placement. Top-center was eliminated because the SimplePractice community would experience the same problems as before.

Placing toasts at the top-center of the screen would also block and compete with future banners.

That left the bottom-left and bottom-center as the final two candidates. I was really torn between the two, but I decided that the bottom center would be best considering that the new navigation was left aligned and certain interactions would result in fly-outs from the left.

Design Decision: Burning the Error Toasts

We made the deliberate choice not to proceed with the transformation of error banners into toasts. This decision aimed to maintain the effectiveness of error messaging and uphold the principle of user-centric design, where clarity and assistance in error scenarios take precedence.

By retaining error banners, we ensured that users would receive comprehensive error feedback, including a clear explanation of the problem and specific calls to action (CTAs) to guide them in addressing the issue. This approach prioritized user experience and problem resolution, aligning with our commitment to providing users with the support they need when encountering errors.

Working with Content Design to Write Toasts Documentation

I worked with the content design team to create guidelines for toasts. In terms of zeroheight documentation, most of the visuals were my responsibilities, as well as timing and placement since I focused on these subjects during various design critiques.