Enterprise Design System

The Spark Enterprise Design System supports 40+ products across Sabre’s global travel technology ecosystem. As Principal II UX Designer, I led system strategy, interaction design, and component architecture, driving 90% adoption across a 5,000+ employee organization.

Spark enabled teams to move faster with greater consistency, including implementing product-wide visual updates in as little as 15 minutes once adopted.

AT A GLANCE

  • 40+ products supported

  • 200+ responsive, accessible components

  • 90% adoption across enterprise

  • Tokenized foundations (color, spacing, type)

  • Modular-scale & baseline grid systems

  • Framework agnostic (Figma + HTML/CSS/JS)

My Role

  • Lead Interaction Designer across the system lifecycle

  • Led design reviews and sprint planning across product teams (5+ years)

  • Co-defined system strategy with engineering (last 3 years)

  • Guided adoption and mentored designers across a 60-person UX organization

  • Owned system-level component design in Figma, maintaining the source of truth for UI patterns

  • Partnered closely with engineering and used AI-assisted prototyping to accelerate pattern development and ensure design–code alignment

Challenge

  • Influencing a distributed UX organization (60 designers) with a small central Design System team (7)

  • Driving adoption across 40+ products with varying priorities and technical constraints

  • Supporting legacy systems while modernizing UI and interaction patterns

  • Balancing accessibility compliance with visual flexibility

  • Designing for responsive use while maintaining data density for complex workflows

Key Decisions & Tradeoffs

Accessibility vs Visual Flexibility

  • Established form field contrast at 3:1 (WCAG-compliant) instead of 4.5:1 to preserve visual flexibility

  • Advocated for accurate interpretation of accessibility standards, including:

    • Disabled states not requiring minimum contrast

    • Avoiding unnecessary constraints that limited usable design

Standardization vs Team Autonomy

  • Drove adoption through influence rather than enforcement, despite top-down expectations

  • Enabled incremental adoption with a flexible baseline (Spark-like visual updates)

  • Led ongoing design reviews to guide consistency without blocking product progress

Brand Alignment vs Product Flexibility

  • Partnered closely with Brand to translate a new visual identity into product UI across 40+ products

  • Defined when product should adhere to brand standards vs deviate for usability and system consistency

  • Balanced brand expression with the functional needs of complex enterprise interfaces

Usability vs Perception (Floating Labels)

  • Resolved concerns around increased field size by demonstrating equivalent total space vs traditional labels

  • Identified resistance as change aversion rather than usability issues

  • Grounded decisions in usability principles and user needs

Touch Optimization vs Data Density

  • Designed components to support touch across responsive contexts, increasing baseline sizing

  • Iterated based on product feedback:

    • Navigation height reduced by 20%

    • Message components reduced by 20%

    • Table row height reduced by 25%

  • Balanced usability with efficiency for dense enterprise workflows

Driving Adoption

  • Partnered with design technologists to deliver reusable React components, reducing implementation friction

  • Provided hands-on consultation across teams to support adoption within legacy systems

  • Embedded design reviews and sprint rituals to reinforce system usage and consistency

  • Worked closely with product teams to prioritize system improvements based on real-world needs

Impact

  • Achieved 90% adoption across 40+ products

  • Enabled product-wide visual updates in as little as 15 minutes for fully adopted teams

  • Scaled consistency across a 60-designer organization with a small central team

  • Reduced design drift and improved long-term efficiency across products

  • Accelerated alignment between Product, Engineering, and Brand through a shared system

Spark’s color system using the HSLuv color space for orthogonal lightness and simpler accessibility.

Column and baseline grids, providing foundations for page structure and vertical rhythm.

Example Navigation & Panel Menu component design (Figma), with states, interactions, and responsive behaviors.

Exploratory Navigation component (HTML/CSS/JS) with multi-level dropdowns and integrated search. I used Claude Code to generate prototypes and refine interaction behaviors.

Example AI Chatbot component design (Figma), including conversation elements, buttons, feedback controls, and interaction states.

Spark components applied within a dashboard layout, demonstrating consistency in interaction, hierarchy, and visual language.

Revenue Optimizer redesigned with Spark components, reinforcing consistent hierarchy and standardized data visualization patterns.

Pre-Spark product interfaces illustrating fragmented UI patterns and siloed design decisions across Sabre’s product ecosystem.

Next
Next

Design System Platform