Everest Design System: Stepped Progress Indicators for Native Platforms

Design Systems - UI/UX - iOS - Android

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

The Problem

The Everest Design System by Charles Schwab initially featured web-only stepped progress indicators. However, teams working on native-based products identified a need for a more compact and flexible stepped progress indicator with more capabilities to better suit their specific requirements. I was tasked with designing a new variant of the stepped progress indicator that could be easily integrated into native applications while maintaining consistency with the existing design system.

Outline of Process

Here's a typical outline of the process behind taking on creating a new design system component. This is a high-level overview of the steps involved:

StageTools UsedDescription
Experience FitJIRAEffecting change in the design system requires a clear understanding of the user experience needs and how the new component will address them.
Ticket AssignmentJIRAThis component was developed in response to a ticket raised by product teams working on native-based applications.
Architectural DirectionThe initial direction for the new design was outlined by our design system's Architect, who identified the need for a more compact and adaptable version of the stepped progress indicator.
Due DiligenceResearch was conducted to identify common issues and best practices related to stepped progress indicators, ensuring that the new design would address key user experience concerns.
Feasibility ConversationsMicrosoft TeamsConversations were held with developers to understand the technical feasibility of the objective and ensure that it could be easily integrated into native applications.
Product Team CollaborationMicrosoft TeamsThe new design was developed in collaboration with product teams working on native-based applications, ensuring alignment with their specific requirements.
Design ExplorationSketch, FigmaSeveral design explorations were conducted to refine the new stepped progress indicator, focusing on compactness, flexibility, and ease of integration.
Product and Design CollaborationSketch, FigmaThe new design was 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 IntegrationSketch, FigmaThe new design was to be integrated into the existing design system, ensuring consistency and alignment with the brand and feasibility for implementation.
Implementation and TestingThe new design was implemented and tested in native applications to ensure that it met the requirements of product teams and provided an optimal user experience.
Feedback and IterationFeedback was collected from product teams and users to identify areas for improvement, leading to further iterations and refinements of the design.
Documentation and TrainingFigma, MarkdownDocumentation and training materials were created to help product teams integrate the new design into their applications and ensure that it was used effectively.

My Role

As a UX Designer, I collaborated with various teams to design a new stepped progress indicator for Charles Schwab's iOS and Android apps. This involved research, design explorations, and stakeholder collaboration. I ensured the design met product requirements and optimized user experience. I also aided in integrating the design into the existing system and supported implementation and testing. The goal was a compact, flexible design consistent with the Everest Design System.

Optimal User Experience Considerations

When designing the new stepped progress indicator, several key user experience considerations were taken into account to ensure optimal usability and engagement:

Common Issues Observed

Product teams often encounter several common issues when using stepped progress indicators in their applications:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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

NameWeb Reference
Nielson Norman Grouphttps://www.nngroup.com/articles/progress-indicators/
Human Interface Guidelineshttps://developer.apple.com/design/human-interface-guidelines/progress-indicators
Material Designhttps://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:

ElementRequired?Description
ContainerYesThe main container that holds the entire stepped progress indicator.
CounterYesExplicit step counter, providing context for where in a process the user is.
Descriptive TitleYesThe title of the stepped progress indicator, providing context for the user.
DividerYesA visual divider to separate this component from the primary view pane.
Track & Progression IndicatorNoAn optional track that visually connects the steps and provides a relative progression indicator.
Decorative AccessoryNoA decorative piece to coincide with the step title and description.
Right AccessoryNoA 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.

Example Developer Usage

Of course this is a design system component, so here's a quick example of how it might be used in a web application:

<sch-step-indicator
  title="Review your wire transfer details"
  total-steps="5"
  current-step="4"
  show-track="true"
  decoration="src-of-image"
  expandable="true"
  aria-label="Review your wire transfer details">
</sch-step-indicator>

In Summary

This new stepped progress indicator for Schwab's native applications is a more compact, flexible, and feature-rich design that addresses common issues faced by product teams. It provides a clear and intuitive way for users to navigate through multi-step processes, with improved responsiveness, accessibility, and mindful features. The design is aligned with the Everest Design System and can be easily integrated into existing applications. Feedback from product teams and users will be used to further refine and optimize the design, ensuring that it meets the needs of both users and business stakeholders. The next step is to roll out a similar design for web applications, ensuring consistency across all platforms.