Design System Component: Alert Banner
To create a cohesive design system, I designed a new alert banner component from the ground up. The previous component lacked documentation and standardization. My goal was to design and document a scalable alert banner that effectively communicates essential information to the user and offers actionable options in response.
Role
UI/UX Designer
Industry
Networking SaaS
Duration
3 months, 2022
Solution Preview
Alert Banner
A banner that delivers essential information to users and provides options to help resolve issues effectively.
Global Alert
Alerts that impact the functionality or experience across the entire application.
Alert in Side Panel
Alerts that affect the elements inside a side panel.
Alert in Modal
Alerts that impact the elements inside a modal.
A New Design System
What Existed?
Research + Analysis
Key Points
To create the component and visual spec, I researched design systems from successful brands like Salesforce, IBM, and GitHub. I observed that their alert banners shared several common elements
Icon: Indicates the type of alert (e.g., error, warning, info, success).
Description Text: Briefly explains the alert's purpose.
Stylized Container: Uses colors and visual cues, like borders, to signify alert type and adapts in size for different use cases.
Dismiss Button: Allows users to close the alert.
Action Buttons: Provides users with options to respond to the alert, with varying types and quantities of buttons depending on context.
For the design docs, I did some informal research by asking my colleagues what they wanted most out of design documentation. They found the V2 documentation severely lacking in terms of clearly communicating how to use the banner in their designs. They wanted to include clear definitions of the different aspects of a component, general Do’s and Don’ts, and visuals on usage.
Goals
Design an alert banner component that effectively communicates essential information to the user and offers actionable options in response.
Requirements
Content Presentation - Consider various scenarios and determine the messaging needed to convey information clearly. Users should always understand what is happening and why.
User Response - Provide users with buttons and links so they can take action based on the information. They should have clear options for how to respond to the issue.
Cohesively Aligned - The new banner design should incorporate elements from the V3 design system and visually align with other design components.
Documentation - In addition to designing the component itself, visual specifications and usage guidelines must also be defined
Creating a Component
After reviewing numerous examples of alert banners, I began sketching my own design concepts.
I then explored various design directions to determine what resonated best.
The Top Choice
After multiple rounds of feedback and refinement, this was the final design selected.
Alongside the error banner, I also designed warning, informational, and success banners, each with variations tailored for different use cases.
I also defined the banner's anatomy and established visual specifications.
Finally, I defined the usage guidelines for the alert banner.
Alerts in Action
The following screens showcase the alert banner in various contexts.
Global Alert
Alerts that impact the functionality or experience across the entire application.
Alert in Side Panel
Alerts that affect the elements inside a side panel.
Alert in Modal
Alerts that impact the elements inside a modal.
Alert within Page
Alerts that affect the elements beneath them on the page.
Before and After
The final V3 design was chosen because of:
Simplicity - Compared to the previous V2 design, the V3 design is much more streamlined and easier to scan.
Quietness - This version is much more subtle than the previous version, but it still draws attention without being distracting.
Versatility - The V3 banner was much easier to integrate into various page layouts compared to V2, a key advantage since the banner is designed for use across multiple page types.
Results + Reflection
After completing the banner component, it was published to our team's design documentation, making it accessible to everyone. Our developers created design tokens to streamline the coding process for production. The usage guidelines became a valuable resource for both designers and developers, which enhanced their workflow.
Through this project, I gained invaluable insights into design systems and the work involved in creating a successful component. I’m thrilled to see my banner being integrated across my teammates' designs.
If I could go back and work on this project again, I would design it with a greater consideration for accessibility. While I did consider accessibility in terms of color blindness in the design of the component itself, not much was done in terms of accessible interactions. If given the chance, I would like to specify in the design documentation interactions such as keyboard dismissal or optional animations for the motion sensitive.
Overall, this project was a fantastic learning experience that sparked my ongoing interest in designing for design systems! I would love to do more similar work.