Vance Mix Logo

Scalable Design System

A shared design system that reduced friction between design and engineering across teams.

Context

As product teams scaled, UI patterns, components, and interaction decisions began to diverge across features and teams. Design intent was often lost during handoff, and engineering teams were forced to interpret or recreate patterns independently.

This work focused on establishing a shared design system that aligned design and engineering around a common language, without slowing delivery or over-prescribing solutions.

The Problem

  • Inconsistent UI and interaction patterns across products
  • Design–engineering drift during handoff
  • Rework caused by unclear ownership of system decisions
  • Slow onboarding for new designers and engineers

The challenge was not visual consistency alone, but building a system teams would actually adopt and use in daily work.

My Role

I led the design system effort end-to-end, partnering closely with engineering to ensure the system was practical, flexible, and scalable.

  • Clearer alignment between design and engineering
  • Reduced rework and interpretation during handoff
  • Improved consistency across features and teams
  • Faster onboarding for new team members

System Approach

Rather than starting with a full component library, the system was built around a small set of foundational patterns and principles.

Components were designed to be composable and adaptable, allowing teams to move quickly while still operating within a shared framework.

Design System Overview

Menu and sort components showing variant states within the design system

Menu & Sorting Patterns

Designed to support flexible filtering and sorting while maintaining consistent interaction patterns across products.

  • Supports multiple option lengths without layout shifts
  • Clear selected and active states reduce ambiguity
  • Composable from shared atomic elements
Progress bar component demonstrating value-based variants

Progress Indicators

Progress indicators were designed to communicate status clearly in multi-step and long-running workflows.

  • Value-based variants support both linear and non-linear flows
  • Designed for visibility without interrupting task focus
  • Scales across dense enterprise layouts

Impact

  • Improved consistency across features and teams
  • Clearer alignment between design and engineering
  • Reduced rework and interpretation during handoff
  • Faster onboarding for new team members

Reflection

This project reinforced the importance of treating design systems as living products rather than static libraries. Adoption depended less on visual polish and more on how well the system supported real workflows.

Balancing consistency with flexibility required close collaboration with engineering and a willingness to evolve the system incrementally over time.