Webex Admin Design System Progress Bars
Overview
As part of updating the Webex Admin Design System, designers requested a more flexible and scalable progress bar component for the upcoming redesign of Webex Control Hub, Webex’s user management platform.
Using Atomic Design principles, I created the new variants, UX pattern, and usage guidelines for the progress bar component. This design was supported by competitive analysis, product audits, and several months of ideation/iteration with stakeholders.
Role: Product Designer
Tools: Figma, Jira, Webex
Process stages: Webex Admin design audit, competitive analysis, Initial Design Solution, Iteration, High-fidelity Mockups
When: May - August 2022
Stakeholders: Webex Admin designers
Challenges with the Current Progress Bar Component
One thing to note about this project: I didn’t go into it planning to redesign the component itself. The original objective was actually to add a thicker variant of the existing progress bar within our design system for the Webex Experience revamp project.
Ask: “We would like a thicker variant of the Progress Bar component for use in the Webex Experience (Control Hub as a Coach) project.” - Product Designer on Webex Analytics Team
In order to get a better idea of the expectations for the larger variant, I wanted to explore the root cause for its need so I conducted an internal audit of their project and early explorations of other admin applications as well.
Internal Audit
Revealed a large amount of variance in the progress bars being used in Webex revamp project with inconsistencies in the sizing, color patterns, and even component anatomy.
Audit showing the different progress bar designs being used in the Current Control Hub redesign files.Additional Explorations
To see if this was a common occurrence in our other projects, I conducted explorations of other admin applications. What I realized was that the underlying challenge went beyond a single variant, and spanned across multiple teams and screens with over 17+ variants not being covered by our existing component and sizes ranging from 4px to 20px.
Progress bar variants throughout the Webex Admin applications that are not covered by our current component.Goal Statement
After sharing my findings with the rest of the design system team, the goal for design became:
Goal Statement: Design a new progress bar that can adapt to multiple applications and user needs so that features are delivered faster and with a consistent experience.
Competitive Analysis
To ensure the new component could handle our current use cases, as well as potential future use cases, I conducted a competitive analysis of the component in other design systems.
What I learned is that to ensure their components were sustainable and manageable long-term, they had 3 features in common:
Responsive Sizing: Having multiple sizes allows more flexibility across devices and since we currently only have 1 size, we’re limiting designers in their work and potentially impacting users ability to quickly digest data.
Configurability: Configurable elements allows more consistency in how we customize the component. In addition to the 1 size, we only had 2 variants of the existing progress bar.
Structured guidelines: To provide designers a concise breakdown of the component and usage documentation.
Competitive Analysis of several progress bar components in competitor design systems.UX Goals for Redesigning the Progress Bars
Based on my research, I decided to focus my redesign strategy in 3 areas for how we might design the new component.
Customization vs. configurability : By striking the fine line between giving designers more control over the customization while standardizing common properties such as size and alignment.
Accessibility enhancements: Through the usage of accessible colors with sufficient color contrast for progress bar elements such as the track, fill, and text.
Comprehensive documentation: So designers are able to spend less time figuring out how to use the component, and more time building products and features with our design system.
Design Solutions for the New Progress Bars
With my redesign strategy as my direction, and my research and early explorations as my evidence and guide, I felt confident moving on to some design work.
Anatomy and Atomic Breakdown
When looking at the anatomy of the over 17+ variants currently found in our apps, and those of other design systems, I noticed a pattern in their structure, they all had a variation of the following 5 features:
Anatomy of the new progress bar features based on early research.Visually breaking down UI components makes it easier to manage the design system while keeping it flexible for designers to use. For our progress bars, we have the following atomic breakdown:
Atoms: As our building blocks, we have the track, fill, and text styles.
Molecules: Using those atoms, we create our base progress bar and data labels.
Organisms: Using our atoms and molecules, we create our main component variants.
Atomic breakdown of the progress bar component.Outline Accessible and Cohesive Colors
I identified that the 3 states a progress bar can be in are Active, Error, or Success. Based off the Momentum Core color token library, I documented which colors be used for each state as a way to align their usage and semantics.
Accessible Color breakdown for the updated progress bar component.Unify Sizing Breakdown
One of the most common reasons designers detached or created new progress bars in their work was the lack of size flexibility. To make each size more meaningful, I started with retaining the original 4px size to accommodate designs using the current component.
Additionally, the most commonly used sizes we didn’t cover were the 8px and 12px with a majority of designs. As a result, 60% of progress bar usage today comes from the Medium(8px) and Large(12px) variants.
Final Progress Bar design sizing breakdownComponent Customization and Configuration
When approaching the component structure, I wanted to give designers more control over the progress bar component when using it in their designs.
Utilizing component properties, we reduce the number of variants that need to be created and maintained, while providing designers with a more structured approach to customization and configuration options.
Standard Progress Bar properties breakdownInline Progress Bar properties breakdownDocumentation and Guidelines
To be proactive in assisting designers in case they run into trouble using the component, while also developing a shared language when working cross-functionally with stakeholders, I wrote out and updated the documentation and guidelines.
Outcomes
The progress bar component is now being used by over 17 teams in the Webex Admin space with over 3000 instances.
The scalable and flexible progress bar component for the Momentum Admin Design System provides a larger amount of customization and configuration, while making it easier to update and manage for the design system team.
Next Steps
Moving forward, the goal is to evangelize the new component and design system whether that be in office hours or meeting with specific teams and syncing with their work. In doing so, we can better ensure that progress usage across the board is consistent and cohesive.
Lessons Learned
It is not a designers 2nd job to learn how to use our work.
Designers are busy people so it’s important you make your work as simple and easy for them to adopt into their workflow so they can spend less time figuring out how to use it, and more time creating designs.
Get feedback early and often!
It’s critical to understand how each step in the design process ensures that you are staying on track, and that you’re keeping your users at the core of your work. Whether that be getting stakeholder feedback or design reviews with the team to get another perspective on your work.
The importance of thinking intentionally about design decisions.
Designing with intentionality and understand that working on design systems, your deliverables impact the work of the many teams that use your components so it’s important to make sure that the decisions you make, are made with intention and reason.
