Swap Design System

Work smarter, work faster.

Work smarter, work faster.

Work smarter, work faster.

TL;DR

Swap raised $40M and scaled rapidly, but design couldn't keep pace. Inconsistent buttons, drifting colors, and siloed team workflows created mounting chaos. I led the build of a unified design system that aligned design and engineering while maintaining product velocity. In under a year, we consolidated five "Swap Blues" into one cohesive system. The impact: faster shipping, stronger accessibility, real adoption, and infrastructure built to scale with the business.

Discipline

Product Design

Contribution

Design System Strategy

Interface & Component Design

Interaction Design

Cross-Functional Collaboration (Design ↔ Engineering)

Token & Theming Architecture

Documentation & Adoption Enablement

01 — Context / Introduction

After its $40M raise, Swap grew fast: new teams, new features, and an accelerated roadmap. But without a design system, the product began to fragment. Patterns drifted, colors varied, and components diverged across squads.

By early 2025, there was no unified design language or token structure. The gap between design and engineering widened, slowing velocity and hurting quality.

We needed a foundation that could bring consistency to the present and support theming, accessibility, and future product surfaces, a system built to scale with Swap.

02 — Problem Statement

As Swap scaled as an engineer-first company, the lack of a shared design system led to duplicated work, inconsistent components, and error-prone theming. The solution: a centralized, documented design system serving as a single source of truth to ensure quality, accessibility, and cohesion as the product grows.

Core problems to solve:

  1. Create a design system designers and engineers would actually adopt.

  2. Establish a single source of truth to close the design–code gap.

  3. Define governance to sustain and evolve the system.

03 — Pathway

a.

Audit & Research

I mapped the dashboards end-to-end, identifying all foundations, atoms, molecules, and organisms, while systematically logging UI inconsistencies and duplicated components, and partnering closely with engineering to assess feasibility and alignment before moving forward.

b.

Strategy & Planning

I defined system primitives grounded in real product constraints, established a clear inventory of core components, and shaped the early semantic token architecture to ensure the system could scale consistently across teams and use cases.

c.

Collaboration with Engineering

I led joint architecture sessions with design and engineering, aligned on multi-brand and theming constraints, and planned the supporting tooling: from Token Studio and automation scripts to internal workflows that would keep the system scalable and maintainable.

d.

Implementation

I refactored components to rely on shared primitives, reducing overrides and visual drift, standardized typography, spacing, and color usage across the product, and built reusable patterns for common UI elements to accelerate design and development.

e.

Governance

I introduced clear review processes to maintain consistency and quality in new components, defined adoption and onboarding workflows for cross-team usage, and established structures for versioning and evolution so the system could scale alongside the product.

f.

Multi-Theme Support

I introduced semantic tokens to support light, dark, and accessibility modes, enabling consistent theming across all product surfaces while significantly simplifying future theme expansion and long-term maintenance.

g.

Governance Evolution

I refined the system’s architecture, naming conventions, and workflows for scale, strengthened adoption and review processes, and laid the foundation for the design system’s long-term evolution.

h.

Adoption & Expansion

I rolled out theming across multiple product surfaces, trained teams on new workflows and best practices, and prepared the system to support more complex features and future integrations.

04 — Constraints & Goals

With Swap expanding internationally, merchants began facing blind spots in how their business performed across regions and channels. Our existing Business Intelligence tool wasn’t built for this complexity, offering only static, one-dimensional views. We set out to create a new analytics layer that was dynamic, scalable, and AI-driven, something that could guide decisions, not just display data.

a.

Evolve Theming Gradually

When we began, light mode was the only viable option. Dark mode was on the roadmap, but resources were limited. Over 10 months, we consolidated dozens of ungoverned hex values into a stable set of primitives. Now, with new engineering capacity, we’re introducing semantic tokens to unlock system-level theming: light, dark, and accessibility modes from a single architecture.

b.

Bridge Design & Engineering

As the sole product designer embedded with engineering, the system needed to serve both worlds: intuitive structure for designers and predictable tokens and code mapping for engineers.

c.

Scale Across the Platform

Swap spans merchant dashboards, compliance flows, and internal operations tools. The DS needed to unify these experiences while remaining flexible enough for future products.

d.

Ensure Real Adoption

A design system only works if people use it. We prioritized naming clarity, documentation, onboarding guidance, and practical standards that made the system easier than reinventing components.

05 — Challenges & Tradeoffs

a.

Defining the Right Level of Maturity

We had to decide: ship a minimal system fast, or aim for full maturity? We chose pragmatic scope: solid foundations in V1, deeper sophistication in V2.

b.

Driving Adoption Through Education

The system only works if people use it. I invested heavily in onboarding, documentation, demos, and office hours to build trust and confidence across teams.

c.

Minimize Disruption

Shipping couldn’t stop. We built clear migration paths, avoided breaking changes, and ensured every update respected the pace of the business.

d.

Establishing Semantic Token Strategy

Balancing clarity, consistency, and flexibility required multiple iterations. The goal: a structure that designers understand instantly and engineers can implement reliably.

e.

Balancing Velocity with Quality

We adopted a “progress over perfection” approach, shipping iteratively with clear versioning and a long-term evolution plan.

f.

Navigating Dark Mode Constraints

Legacy surfaces weren’t built for theming. We had to solve for contrast, hierarchy, and accessibility, without disrupting production.

06 — Outcomes & Impact

a.

Shared Design Language

Designers and engineers work from one source of truth; product teams speak a common language.

b.

Faster, Cleaner Implementation

Fewer overrides, shorter QA, and easy rollout of future themes.

c.

Reduced Friction

Clear naming, consistent logic, and better documentation streamline handoffs and reviews.

d.

Higher Accessibility

Color harmonization and semantic tokens automate accessibility across features.

e.

Effective Governance

Versioning, proposals, and adoption workflows balance speed with stability.

f.

Momentum for Multi-Theme Expansion

Foundation in place for light, dark, and contrast modes.

g.

Real Adoption

Teams actively use the system; leadership sees clear impact on quality and velocity.

h.

Stronger Foundation

A scalable, flexible, and accessible design system ready to grow with Swap.

07 — Reflection

What began as a straightforward effort to unify UI quickly became a career-defining experience. Building the Swap Design System pushed me to grow not just as a designer, but as a systems thinker, collaborator, and partner to engineering. Working closely with design system engineers, I learned how real adoption is earned through trust, clarity, and pragmatism, not imposed. Seeing teams move away from fragmented, improvised UI toward a shared, cohesive language was deeply rewarding, especially hearing designers and engineers describe how the system made their work easier. Perhaps most meaningful was watching the long-term ROI of design systems, often hard to justify in fast-moving startups, become tangible and recognized by leadership. The system didn’t just unify the product; it unified teams, elevated quality, and proved that thoughtful infrastructure can meaningfully shape both a business and a career.

Other projects

Product Design

Swap Analytics

Product Design

Swap Analytics

Product Design

Swap Analytics

Web Design

Film at Lincoln Center

Web Design

Film at Lincoln Center

Web Design

Film at Lincoln Center