Building Momentum through Atomic Design

Project Summary

  • Rebuilt the Momentum Design System replacing static assets with a flexible, scalable framework.

  • Audited our existing design system to ensure it supported the complex functional workflows of 17+ Webex Admin product teams.

  • Leveraged Atomic Design principles to create reusable, modular components for the entire Webex Admin ecosystem.

  • Navigate legacy technical constraints.

Impact

  • Unified the design toolkit for 150+ designers across 17+ Webex Admin product teams.

  • Applied Atomic Design principles to create a modular design system that increased designer autonomy while simplifying core maintenance.

  • Reduced manual component overrides by 60% using dynamic boolean toggles and interactive properties.

Role
Product Designer working with 3 product designers

Tools
Figma, Jira, Confluence, Webex

Timeline
Jan 2022 - Feb 2023

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.