Project Overview
HyundaiUSA.com
Design System
As Director, User Experience, I identified a critical gap in how the HyundaiUSA.com team was operating and made the case for a wholesale tooling migration and design system investment. I secured alignment from design, engineering, and internal stakeholders who had significant reservations about changing an established workflow, then led the end to end execution of the migration from Sketch and InVision to Figma.
The system I built was not a redesign of the product. It was an exact match to what was already in production, giving the team a foundation they could trust and build on immediately.
Problem Statement
A toolchain that could not scale
The HyundaiUSA.com design team was operating on a Sketch and InVision workflow that had grown brittle as the product surface area expanded. There was no shared component library, no single source of truth, and no reliable path from design to engineering handoff. Designers were independently solving the same problems in separate files, while inconsistencies quietly accumulated in production.
The deeper challenge was organizational. Internal stakeholders across design, engineering, and product had different priorities and varying levels of appetite for change. Making the case required more than identifying the problem. It required building a clear business argument, addressing each team's specific concerns, and earning trust before asking anyone to change how they worked.
Foundations
Color, type, and tokens
Before any component could be built, the foundational language had to be defined and validated against production. I directed the creation of a complete token set: a full color palette covering primary, neutral, and semantic values; a typographic scale spanning 11px to 54px with documented line heights, weights, and usage guidelines; and type contrast pairs verified for accessibility across light, mid, and dark backgrounds. Every decision was verified against what engineering was already shipping on HyundaiUSA.com.
The Solution
Built to match production exactly
I structured the initiative in two parallel tracks: stakeholder alignment and system execution. On the alignment side, I facilitated working sessions with engineering leads and product managers to establish shared goals, negotiated scope and timeline, and created visibility into progress that kept internal partners confident throughout the migration.
On the execution side, I directed a full audit of HyundaiUSA.com in production before writing a single Figma component. Every color, type style, component, and interaction state was cataloged and verified. The resulting library matched what was live exactly, with full variant coverage, auto layout, and accessibility documentation. Designers could open Figma and immediately work with files that reflected the real product.
Outcomes
A foundation the team built on
The migration delivered what I had negotiated for: a unified, production matched design system on Figma that the full team adopted. Every component was documented, versioned, and immediately usable. The shared library eliminated the duplicated effort that had been quietly slowing the team down, and the handoff process between design and engineering became significantly more consistent and reliable.
Beyond the tooling, the project established a new working model for how design and engineering collaborated on HyundaiUSA.com. The system became the foundation for all subsequent feature work and set the standard for how the team approached design quality and consistency going forward.