Everest Design System: Badges for All Platforms

Design Systems - UI/UX - Web - iOS - Android

Due to the nature of this project, some details have been omitted or altered to maintain confidentiality.

The Problem

Charles Schwab did not have a component in the library for a badges that could be used across all platforms, including web, iOS, and Android applications. Product teams were using custom badges, leading to a fragmented user experience and increased development time. To address these issues, a new component was needed that would provide a consistent, accessible, and responsive design for badges across all platforms.

Outline of Process

The design and development of the new badge component for the Everest Design System followed a structured process to ensure that it met the needs of product teams and users. The process included several key stages, from research and analysis to design exploration and implementation. Here is an outline of the process:

StageTools UsedDescription
Ticket AssignmentJIRAThis project was assigned to the design systems team through JIRA, with a clear scope and timeline for completion.
Architectural DirectionThe architectural direction was set for the new badge component, including its purpose, functionality, and integration with other components.
Requirements GatheringConfluenceRequirements were gathered from product teams to understand their needs and constraints for the new badge component.
Research & AnalysisResearch was conducted to identify common issues with badges and explore potential solutions. This included a review of existing design systems, user feedback, and best practices.
Feasibility ConversationsMicrosoft TeamsConversations were held with developers to discuss the feasibility of the new badge component and address any technical challenges or constraints.
Component AnatomyFigma, SketchThe anatomy of the badge component was defined, including required and optional elements, to ensure consistency and flexibility.
Design ExplorationFigma, SketchSeveral design explorations were conducted to refine the new badge component, focusing on visual appeal, usability, and integration.
Feedback & IterationFigma, SketchFeedback was gathered from product teams and peers to refine the new badge component and address any issues or concerns.
ImplementationFigma, Sketch, GitHubThe new badge component was implemented in the Everest Design System, following best practices and guidelines to ensure consistency and quality.
DocumentationConfluence, GitHub, Everest DocsiteDocumentation was created for the new badge component, including guidelines, best practices, and examples, to help product teams implement it correctly.
Launch & AdoptionConfluence, Everest DocsiteThe new badge component was launched in the Everest Design System, with guidelines and support provided to product teams for adoption.
Feedback & MonitoringConfluence, Everest DocsiteFeedback and monitoring tools were put in place to track the usage and performance of the new badge component, with regular updates and improvements made as needed.
Maintenance & SupportConfluence, Everest Docsite, FigmaOngoing maintenance and support were provided for the new badge component, with updates and enhancements made to ensure its continued effectiveness and relevance.

My Role

As a member of the design systems team, my role was to lead the design and development of the new badge component for the Everest Design System. This involved conducting research, gathering requirements, creating design explorations, and collaborating with product teams to ensure the component met their needs. I worked closely with developers to implement the component and provide guidance on best practices for its use. My goal was to create a design that was visually appealing, intuitive, and consistent with the Everest Design System, while addressing common issues with badges and improving the overall user experience.

Optimal User Experience Considerations

The design and development of the new badge component for the Everest Design System were guided by several key considerations to ensure an optimal user experience. These considerations helped shape the design and functionality of the component, making it more accessible, usable, and engaging for users. Here are some of the key considerations:

Common Issues Observed

Badges are a common UI element used in various applications to convey information, status, or actions to users. However, there are several common issues observed with badges that can impact usability and user experience. Here are some of the most common issues:

  1. Inconsistent Design: Badges are often designed inconsistently across applications, leading to confusion and a lack of visual hierarchy.
  2. Overuse of Badges: Some applications use badges excessively, leading to visual clutter and a poor user experience.
  3. Lack of Accessibility: Badges are often not designed with accessibility in mind, making them difficult to read for users with visual impairments.
  4. Ineffective Use of Color: Some badges use color as the sole differentiator, which can be problematic for color-blind users.
  5. Inadequate Information: Badges sometimes lack context or meaningful information, leaving users unsure of their purpose.
  6. Inconsistent Placement: Badges are often placed inconsistently within applications, making it difficult for users to locate them.
  7. Limited Interaction: Badges are often static elements with limited interactivity, missing opportunities for user engagement.
  8. Poor Responsiveness: Badges may not adapt well to different screen sizes or orientations, leading to layout issues on mobile devices.
  9. Lack of Customization: Some applications do not allow users to customize or personalize badges, limiting their utility and appeal.
  10. Ineffective Feedback: Badges may not provide clear feedback or guidance to users, leading to confusion or frustration.
  11. Limited Integration: Badges may not integrate well with other UI elements or components, reducing their overall effectiveness.
  12. Inadequate Documentation: Badges may lack clear documentation or guidelines for use, making it challenging for designers and developers to implement them correctly.

A Few Research Citations

NameWeb Reference
Nielson Norman Grouphttps://www.nngroup.com/articles/indicators-validations-notifications/
Human Interface Guidelineshttps://developer.apple.com/design/human-interface-guidelines/notifications
Material Designhttps://material.io/components/badges
Medium Post by Lukas Vilkushttps://medium.com/emplifi-design/badges-small-but-essential-ui-element-16699337948b
Post by Roman Kamushkenhttps://www.setproduct.com/blog/badge-ui-design

Types of Badges

Badges are a versatile UI element that can be used in various ways to convey information, status, or actions to users. Here are some common types of badges:

TypeDeterminate or IndeterminateInline or OverlayDescription
NotificationBothBothDisplay a small dot or number to indicate a new notification, update, or message for the user.
CounterDeterminateInlineDisplay a number to indicate a count or total, such as the number of items in a list or the progress of a task.
StatusDeterminateBothDisplay a status indicator, such as success, warning, or error, to provide feedback to the user.
CustomBothInlineProvide additional context or information about an item, such as a promotion, category, or tag.

Iconography can be used with badge labels to provide additional context or information about an item. Icons can be used to represent a status indicator, condition, or action, enhancing the visual appeal and usability of the badge.

Here are some examples of the different types of badges:

Basic Anatomy

The anatomy of the new badge component for the Everest Design System was carefully defined to ensure consistency and flexibility across all platforms. The component includes several key elements that can be customized to suit the needs of product teams. Here is the anatomy of the badge component:

ElementRequired?Description
ContainerYesThe container that holds the badge, providing a visual frame for the badge element.
LabelYes, for determinate badge typesThe label that displays the text or number associated with the badge, providing context and information to users.
BorderYesThe border that surrounds the badge, providing a visual distinction from other UI elements.
DotYes, for indeterminate notification overlays and inline dot typesA small dot that indicates a new notification, update, or status color for the user.
IconNoA decorative piece to coincide with the context of the label.

Usage Context

The new badge component for the Everest Design System can be used in a variety of ways to enhance the user experience and provide valuable information to users. Here are some examples of usage:

Example Developer Usage

The new badge component for the Everest Design System is designed to be easy to implement and customize for product teams. After working closely with developers, we created smart, resuable, and flexible badges with built-in properties. Here are some examples of how the new badge component can be used in code:

// Numeric Notification Badge Example
<sch-badge
  type="notification"
  count="2"
  overlay="true"
  aria-label="You have 2 new messages in your Message Center.">
</sch-badge>
// Counter Badge Example
<sch-badge
  type="counter"
  total-count="5"
  aria-label="There are five courses in this learning track.">
</sch-badge>
// Status Badge Example
<sch-badge
  type="status"
  severity="medium"
  label="Medium risk"
  aria-label="This item is marked as medium risk.">
</sch-badge>
// Custom Badge Example
<sch-badge
  type="custom"
  label="For Sale"
  category="promotion"
  icon="icon-src"
  aria-label="This item is for sale!">
</sch-badge>

In Summary

The new badge component for the Everest Design System provides a consistent, accessible, and responsive design for badges across all platforms. By addressing common issues with badges and improving the overall user experience, the new component will help product teams create more cohesive and engaging applications. The design and development process followed a structured approach to ensure that the component met the needs of users and product teams, while maintaining consistency with the Everest Design System. The new badge component is a valuable addition to the design system, providing a versatile and customizable element that can be used in a variety of ways to enhance the user experience.