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 admins tools like Contact Center and Partner Hub.

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 Modular 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.

Context

Momentum is the design system utilized across Webex’s product teams to create a cohesive brand, look, and feel across their product ecosystem.

Problem

As Webex scaled, UI fragmentation and engineering silos stalled product velocity.

Challenge

Rebuilding Momentum components for flexibility, parity, and scale.

Discovery

With over 17+ product teams using this design system, Webex is able to maintain a unified brand experience from Admin (Control Hub) to App, Messaging, Calling, Contact Center, and Devices.

  • Fragmented Figma Libraries: Outdated, unstandardized assets across teams led to mounting design debt that throttled release cycles and delayed feature rollouts.

  • Rigid Legacy Components: Static, non-flexible assets forced designers to repeatedly detach components to meet complex feature specifications.

  • Design-Engineering Friction: A lack of centralized component logic created misalignment between Figma variants and production code, slowing down handoffs.

To restore product velocity, we needed to transition the system from rigid, static files into a dynamic framework that empowered 150+ designers without sacrificing global consistency.

  • Eradicating Design Debt: Replace static, legacy UI assets with dynamic, interactive components powered by modern Figma features (Auto Layout, variants, and component properties).

  • Unifying Enterprise Workflows: Balance the diverse feature requirements of 17+ distinct product teams within Webex Admin under one cohesive, accessible design language.

  • Bridging Design and Engineering: Establish strict parity between Figma component properties and production code specs to eliminate hand-off friction and implementation bugs.

Within Webex Admin’s Control Hub dashboard, we found 6 different custom variations of the progress bar component

I conducted contextual inquiries and competitive analysis to audit internal friction and target the root causes of system drift.

  • Quantifying Systemic Drift: Audited Webex Admin products alongside industry-leading design systems to uncover friction points. In Webex Admin alone, we discovered 12 custom variations of the pagination component—a direct result of rigid legacy assets forcing teams to build one-offs.

  • Validating Enterprise Use Cases: Facilitated structured design reviews with lead admin designers to test proposed component logic against complex, multi-product requirements across Webex App, Control Hub, Partner Hub, and Contact Center.

    Co-Designing with Engineering: Partnered with front-end developers early to define interactive states, props, and edge cases (e.g., loading, error, hover, disabled) before building in Figma—ensuring every variant mirrored production code properties 1:1.

I audited Webex Admin tools and found 10+ custom Pagination component styles not covered by Momentum.

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.

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.