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 was outdated, inconsistently styled, and not part of a formal system. My goal was to design a modern, scalable alert banner that aligns with current design principles, ensuring consistency, usability, and a strong visual identity across the product.
Role
UI/UX Designer
Industry
Networking SaaS
Duration
3 months, 2022
Solution Preview
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
Research + Analysis
Key Points
To design a new alert banner component, 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.
Combining these research insights with the project requirements, I defined a clear goal to guide the direction of my work.
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.
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 spacing guidelines.
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 - Designers were hesitant to use the V2 version because it looked too loud and distracting. User feedback also mentioned that the bright colors of the previous version made the alert message harder to read.
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.
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.
Usage Guidelines
In addition to designing the banner, I also established its usage guidelines.
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 change one thing, I’d push the visual design further by incorporating some subtle, distinctive elements to make it stand out from other page content. Although I think the final design was a strong start, adding those details could have drawn more attention to it, especially if it contained crucial information.
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.