Two Design System Components
Design Systems - UX Design - UI Components
Due to the nature of these pieces of work, some details have been omitted or altered to maintain confidentiality.
Overview
As a member of the Everest design systems team, part of my role was to lead the design and development of new components. I was tasked with creating several components that could be used across multiple products. These components needed to be flexible, accessible, and easy to use. Two of the components I worked on were:
- Badges across all supported platforms
- Native Stepped Progress Indicator for iOS and Android
Approach
My typical process for creating a new component in a design system involves the following steps:
| Stage | Tools Used | Description |
|---|---|---|
| Experience Fit | JIRA | Effecting change in the design system requires a clear understanding of the user experience needs and how the new component will address them. |
| Ticket Assignment | JIRA | These components were created in response to tickets raised by product teams. |
| Architectural Direction | The initial direction for new designs was typically reaffirmed by our system architect, who identified the needs and gaps to think through during our discovery phase. | |
| Due Diligence | Research was conducted to identify common issues, and best practices. | |
| Feasibility Conversations | Microsoft Teams | Technical conversations were held with developers to understand the feasibility of the objective. |
| Product Team Collaboration | Microsoft Teams | New designs were developed in collaboration with product teams, ensuring alignment with their specific requirements. |
| Design Exploration | Sketch, Figma | Often several design explorations were conducted to refine new components for brand fit, flexibility between platforms, and ease of integration. |
| Product and Design Collaboration | Sketch, Figma | New designs were developed in collaboration with product management, partners, stakeholders, and our design systems team to ensure alignment with business goals, user needs, and system strategy. |
| Design System Integration | Sketch, Figma | New designs were to be integrated into the existing design system, ensuring consistency and alignment with the brand and feasibility for implementation. |
| Implementation and Testing | New designs were implemented and tested in web and native applications to ensure that they met the requirements of product teams and provided an optimal user experience. | |
| Feedback and Iteration | Feedback was collected from product teams and users to identify areas for improvement, leading to further iterations and refinements of the designs. | |
| Documentation and Training | Figma, Markdown | Documentation and training materials were created to help product teams integrate new designs into their applications and ensure that it was used effectively. |
Badges
Things to Consider
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 experienc.
- Inconsistent Design: Badges are often designed inconsistently across applications, leading to confusion and a lack of visual hierarchy.
- Overuse of Badges: Some applications use badges excessively, leading to visual clutter and a poor user experience.
- Lack of Accessibility: Badges are often not designed with accessibility in mind, making them difficult to read for users with visual impairments.
- Ineffective Use of Color: Some badges use color as the sole differentiator, which can be problematic for color-blind users.
- Inadequate Information: Badges sometimes lack context or meaningful information, leaving users unsure of their purpose.
- Inconsistent Placement: Badges are often placed inconsistently within applications, making it difficult for users to locate them.
- Limited Interaction: Badges are often static elements with limited interactivity, missing opportunities for user engagement.
- Poor Responsiveness: Badges may not adapt well to different screen sizes or orientations, leading to layout issues on mobile devices.
- Lack of Customization: Some applications do not allow users to customize or personalize badges, limiting their utility and appeal.
- Ineffective Feedback: Badges may not provide clear feedback or guidance to users, leading to confusion or frustration.
- Limited Integration: Badges may not integrate well with other UI elements or components, reducing their overall effectiveness.
- 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
| Name | Web Reference |
|---|---|
| Nielson Norman Group | https://www.nngroup.com/articles/indicators-validations-notifications/ |
| Human Interface Guidelines | https://developer.apple.com/design/human-interface-guidelines/notifications |
| Material Design | https://material.io/components/badges |
| Medium Post by Lukas Vilkus | https://medium.com/emplifi-design/badges-small-but-essential-ui-element-16699337948b |
| Post by Roman Kamushken | https://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:
| Type | Determinate or Indeterminate | Inline or Overlay | Description |
|---|---|---|---|
| Notification | Both | Both | Display a small dot or number to indicate a new notification, update, or message for the user. |
| Counter | Determinate | Inline | Display a number to indicate a count or total, such as the number of items in a list or the progress of a task. |
| Status | Determinate | Both | Display a status indicator, such as success, warning, or error, to provide feedback to the user. |
| Custom | Both | Inline | Provide additional context or information about an item, such as a promotion, category, or tag. |
Badge 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:
| Element | Required? | Description |
|---|---|---|
| Container | Yes | The container that holds the badge, providing a visual frame for the badge element. |
| Label | Yes, for determinate badge types | The label that displays the text or number associated with the badge, providing context and information to users. |
| Border | Yes | The border that surrounds the badge, providing a visual distinction from other UI elements. |
| Dot | Yes, for indeterminate notification overlays and inline dot types | A small dot that indicates a new notification, update, or status color for the user. |
| Icon | No | A 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:
Stepped Progress Indicator
Things to Consider
Product teams often encounter several common issues when using stepped progress indicators in their applications:
- Complexity in Navigation: Stepped indicators can become confusing if users are allowed to navigate back and forth between steps. This can lead to issues in data consistency and user experience, especially if earlier choices affect options in later steps.
- Overwhelming Users with Too Many Steps: Too many steps can overwhelm users, leading to a drop in engagement. It's crucial to balance the need for detailed process stages with the user's ability to easily comprehend and follow the steps.
- Responsive Design Challenges: Ensuring that stepped progress indicators are equally effective and visually appealing across various devices and screen sizes can be challenging. This requires careful design and testing, particularly for complex indicators.
- Unclear Progress Indication: If the progress indicators are not clear or intuitive, users might not understand how much of the process they have completed and how much is left. This can lead to frustration and a poor user experience.
- Integration with Data and Backend: Syncing the progress indicators with real-time data and backend processes can be complex. Ensuring that the indicator accurately reflects the current state of the process requires efficient data handling and UI updates.
- Accessibility Issues: Stepped progress indicators need to be designed with accessibility in mind. This includes considering color contrast, screen reader compatibility, and ease of use for users with disabilities.
A Few Research Citations
| Name | Web Reference |
|---|---|
| Nielson Norman Group | https://www.nngroup.com/articles/progress-indicators/ |
| Human Interface Guidelines | https://developer.apple.com/design/human-interface-guidelines/progress-indicators |
| Material Design | https://m3.material.io/components/progress-indicators/overview |
| U.S. Web Design System (USWDS) | https://designsystem.digital.gov/components/step-indicator/ |
Top Explorations
Several design explorations were conducted to refine the new stepped progress indicator. These explorations focused on compactness, flexibility, and ease of integration. The goal was to create a design that was visually appealing, intuitive, and consistent with the Everest Design System. Here are a few of the top explorations:
Chosen Component Anatomy
The anatomy of the stepped progress indicator is a simple and flexible structure that includes the following elements:
| Element | Required? | Description |
|---|---|---|
| Container | Yes | The main container that holds the entire stepped progress indicator. |
| Counter | Yes | Explicit step counter, providing context for where in a process the user is. |
| Descriptive Title | Yes | The title of the stepped progress indicator, providing context for the user. |
| Divider | Yes | A visual divider to separate this component from the primary view pane. |
| Track & Progression Indicator | No | An optional track that visually connects the steps and provides a relative progression indicator. |
| Decorative Accessory | No | A decorative piece to coincide with the step title and description. |
| Right Accessory | No | A handler to open up drawers, providing hierarchal context for the user. |
This basic structure can be adapted and expanded based on the specific requirements of the application. The implementation was to be iterated upon by the design systems team in a manner that could quite well combine vertical and horizontal features into a more robust and interactive component.
The decision for a traversing mechanism was omitted in the initial design, as it was to be iterated upon in future versions. Product teams were provided with traversing guidelines to ensure that the component was used effectively.
Wired Up
Here's a wireframe of the new stepped progress indicator in an E-commerce setting. The wireframe provides a clear visual representation of the component's structure and functionality.
Sample Mock
Here's a realistic mockup of the new stepped progress indicator in a transactional setting.
Conclusion
If you made it this far, I salute you. The design and development of these components were a significant undertaking, requiring collaboration across multiple teams and careful consideration of user needs and system requirements. The new badge component and stepped progress indicator are now available for use in various applications across Charles Schwab, providing a consistent and intuitive user experience. These components were well-received by product teams and users.