Building reusable components for Webex’s Design System, cutting handoff time between designers and developers by 50%.
Problem Scalability Struggles
Fragmented Figma files and static, unstandardized assets created mounting design debt for Momentum, forcing feature teams to build custom components and delaying engineering delivery.
Product Momentum Design System
Momentum is the design system powering Webex’s collaboration products from App, Meetings. and Messaging to Contact Center.
Details
Role/Team: Product Designer working with 3 product designers
Contributions: User Research, UX Design, Rapid Prototyping, User testing
Scope: Enterprise SaaS, Design Systems, Internal Tools, Atomic Design, UI/UX Design
Timeline: 2022-2023
Tools: Figma, Jira, Confluence, Webex
Leveraging Atomic Design Principles, I helped redesign core Momentum components into a flexible, modular system, streamlining maintenance for the design system team and empowering product teams to ship consistent, accessible features faster
Result Scalable design system
Unified 150+ designers across 17+ Webex product teams by building a scalable, modular components that reduced component overrides by 60%.
Solution Atomized components
Impact
150+
designers supported
Across 17+ Webex product teams and offerings
+60%
system conformance
Modularity
Less custom components, more cohesion
built into system
Atomic architecture simplifies system maintenance with scalable component architecture.
The Problem
As Webex Admin scaled, UI fragmentation and engineering silos stalled product velocity.
Fragmented Figma files and mounting design debt were throttling the shipping cycle and stalling feature implementation.
Static legacy assets forced designers to detach components to accommodate new feature requirements.
A lack of centralized standards caused friction between design and engineering.
The Challenge
Rebuilding the Momentum Design System Figma library for flexibility and scalability.
Replacing legacy, static assets to a dynamic, scalable system and reduce design debt.
Balancing the unique needs of 17+ product teams within Webex Admin under a single, cohesive design language.
Ensuring parity between Figma components and production code to reduce hand-off friction.
Discovery Process
Auditing internal friction and competitive analysis to solve the right problems at scale.
Audited our current products and industry competitors to identify where our existing system was breaking and where we could improve.
Facilitated design reviews with admin leads to validate component logic against diverse enterprise needs.
Collaborated with engineers to define component states and logic (e.g., loading, error, hover) before building, ensuring Figma variants mirrored real-world code properties.
I conducted a competitive analysis of components in competitor design systems (e.g., progress bars).Design Process
Applied Atomic Design principles to ensure modularity, maintainable logic, and structural consistency across the library.
Atoms: Established the foundational design tokens— typography, spacing, color.
Molecules: Assembled atoms into functional primitives like buttons, inputs, and tooltips for consistent interaction patterns.
Organisms: Combined atoms and molecules to architect complex, reusable UI patterns such as navigation bars and data tables.
Utilized auto layout, boolean properties, and variants to automate designer workflows and eliminate manual pixel-pushing.
The Results
A unified design system built for scale
Momentum powers the Webex Admin ecosystem, supporting over 150 designers across 17 product teams with a library of 40 robust, scalable components.
Increased customization for feature designers while simplifying system maintenance through a modular, atomized architecture.
Synchronized Figma properties with production code to streamline handoffs, eliminating implementation bugs and ensuring more predictable release cycles.
Reduced use of local components by 60% by replacing static layers with flexible, interactive properties.
Takeaways
Lessons, growth, and change
Lesson
Intentionality with every design decision ensures every component serves as a reliable building block for the entire ecosystem. In a system of this scale, small errors cascade into systemic debt — precision at the atomic level is non-negotiable.
Growth
Aligning component naming conventions with designers and engineers early on is critical to avoid "lost in translation" moments during handoff.
Change
Large-scale system changes require consistent, proactive effort to maintain alignment. I prioritized continuous syncs with stakeholders to ensure our component logic remained functional across every product vertical.
Atomic breakdown of the progress bar component.Documentation to align 150+ designers and engineers on a single source of truth for component behavior.