Project Brief
Within our live production internal tools at Vericast, we had some problems with our System Feedback and Alerting, which were identified and documented with an audit by one of our User Researchers Pat Lawson in 2019. Pat's audit revealed that we had highly inconsistent patterns and styling applied to our Notifications, Alerts, and other types of System Feedback. Following this, the Notifications and Alerts system needed a comprehensive overhaul. As a result of product priorities, the project underwent incremental work in 2019 and 2020 until I could focus my time and efforts on the project in 2021.
Core Stakeholders
● Users
○ Account Managers
○ Campaign Managers
● IX Designers (Prototyping)
● ICON (Front-end Dev Engineer team)
● Product Management
● Researchers (Testing)
● Design Leadership
User/Stakeholder Pain Points
● The inconsistent visual impact of Alerts and Notifications
● Inconsistent/confusing level of caution attached to Alerts and Notifications
● Inconsistent/incorrect placement of Notifications on screens
● Confusing Warning/Error/Alert patterns
● The gap in components included for use
○ In-Line Notifications
○ Distinct Banner and Modal components
○ Custom Toast Notification (third-party component did exist)
Defining the Scope
Due to a lack of bandwidth, I was the single contributor to this project starting in 2021. Other designers participated in a feedback capacity. Defining this project's scope was reasonably straightforward, as designing these types of patterns is a well-trodden path in the Product Design field. I looked to resources such as Neilson Norman and Group (NN/g) for best practices on what patterns to include and user expectations of their behavior/micro-interactions. Ultimately, we decided on these System Feedback and Alerts groupings: In-Line Notifications / Indicators and Overlapping Notifications. I've added an outline of the components, shown below:
Above are different sheets from our UX Researchers' work collecting examples of notifications, errors, and alerts.
In-Line Notifications/Indicators
Overlapping Notifications
● In-Line Notification
● Indicator
● Validation States
● Toast Notification
● Banner
● Error/Warning Modal
Note: After initial research, we decided to avoid using the term “Notifications” when referring to the project as a whole, as the project’s scope included patterns that might not match the user’s mental model of a “Notification.”
A visual design audit of all system feedback & alerts present within internal Vericast applications.
A screen capture of wireframes mapping out use cases for the various system feedback & alert patterns.
Goals
● Provide all components identified during the scoping of the project as part of our Horizon Design System (HDS) design and code components
● Bring consistency to the visual impact of Alerts and Notifications
● Give Alerts and Notifications consistency and clarity around the level of caution users should practice with relevant controls in the UI
● Provide guidance on industry best practices for the placement, patterns, and micro-interactions of Notifications on screen
● Document the above in our HDS documentation on the web
What I Did
After the team identified the patterns needed in the design system, I began developing a cohesive Visual Design approach to the components. At first, I assumed that our existing Modals would support the patterns needed. But later, I realized that the current treatment would not bring the visual consistency that our UI needed for our intended outcomes. Therefore, after beginning Visual Design iterations on the other patterns, I began to iterate on unique Error and Warning Modals with a new Visual Design treatment. For this treatment, I drew inspiration from Notifications and Alerts that I was already familiar with in Design Systems from our contemporaries. In addition, at this point in my career, I had done a great deal of precedent research on industry-best Design Systems.
I presented a handful of visual design options, but the team instantly loved one visual design I had done. So we decided to apply that treatment to all of our Notifications.
I had several conversations with the group concerning the content of the Notifications and various properties that the implemented React components should include according to our user's needs. The Visual Designers discussed different properties, including body text content, an expandable/collapsible section, various button types, content orientation, alignment, etc. Eventually, we decided on a minimal design for the Toast Notifications as they were a transient feature in the UI, meaning that the user would only have a little time to absorb the content and thus should only include crucial information. Our In-Line Notifications and Error/Warning Modals would have more content and features. After multiple rounds of Visual Design presentations and feedback from the team, we were ready to document. There was a pause here as priorities shifted. Late in 2021, I worked through a strategy to implement the System Feedback and Alerts project by attaching the component work to existing initiatives outlined by Product Management leadership. This strategy heightened the urgency for documentation of the components in our HDS web documentation.
Documentation
By documenting the HDS, we came to the system's Organisms level, one priority that has spawned the work described. Returning to our work on the documentation, I quickly outlined the approach mentioned in this Case Study. First, we documented our Design System using a third-party tool called ZeroHeight. We've had modest success with our Front-End UI Dev team using this tool. Next, through a long process of documenting the system, we developed a template outlining components, which I reused here. Core elements of the documentation include default variations of the component, the live React code component preview (if already existing), component states, layout, and Dos and Don'ts. Readers can find further writing on our documentation approach in the Horizon Design System case study. Unfortunately, product management leadership tabled this project for all-at-once development. The front-end dev team hired an intern during the summer of 2022 who was able to get two of the components added to our live React code component repository. The devs and I completed the rest of the components in November 2022.
Outcomes
● Provided visual designs and documentation of all components identified during the scoping of the System Feedback and Alerts project
○ Included new consistent visual impact of Alerts and Notifications
○ Had consistent and clear direction concerning the level of caution the visual designs should indicate that users should practice with relevant controls in the UI
● Provided documentation of guidance on industry best practices for the placement, patterns, and micro-interactions of Notifications on screen
