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.