Full Case Study
TeamUSA
Building a Design System for the TeamUSA and USA Olympic & Paralympic Committee websites, replacing a fragmented visual language with a scalable, accessible, and collaborative framework used across every digital product.
01, Research
Understanding the Problem from Every Angle
The original design process relied on outdated methods, scattered style guides and weekly design reviews. It worked, but it was costly. I framed the goal as redirecting designer and developer time toward problem-solving rather than pixel-level refinement they were repeating on every project.
I interviewed stakeholders across front-end development, product management, engineering, and marketing to surface the full scope of the fragmentation problem before any design decisions were made, deliberately starting with the people who would have to live with the system.
Primary Goal
“Empower Design and Engineering teams to develop efficiently and consistently on a larger scale.”
Post-Interview Objectives
Audit Current Assets
Run a comprehensive audit on all current design assets across TeamUSA and USOPC digital surfaces, typography, buttons, icons, forms, dropdowns and more.
Identify Design Issues
Identify and document all design inconsistencies and issues across the product suite, surfacing the full scope of the fragmentation problem.
Establish Shared Standards
Acquire knowledge about shared standards and principles for successful design systems, drawing on industry best practices and stakeholder needs.
Design Process
Research
Design
Deliver
Iterate
02, Current State Audit
Mapping Every Inconsistency
I split the audit into three working groups, each assigned a component set to inventory across the site. I set up a shared Google Doc template so everyone captured divergent instances the same way, then ran a readout where each group shared findings, giving us, for the first time, the full scope of the fragmentation in one place.
Previous Website Snapshot: The Look Before the Upgrade.
Group A, Typography & Colour
Screenshotted unique instances of typography scales, colour usage, and visual identity tokens across all major surfaces and documented findings in a shared Google Doc template.
Group B, Components & Patterns
Inventoried all button variants, form elements, dropdowns, and input states, capturing every divergent usage and flagging candidates for consolidation.
Group C, Icons & Imagery
Catalogued icon libraries, illustration styles, and image treatment standards, identifying conflicting visual languages that needed unifying under one system.
03, Design System
Building from Atoms Up
I chose Brad Frost's atomic design methodology and built the library from the ground up, atoms into molecules into organisms. I picked it deliberately over a flat component dump: starting at the token and atom level meant a single change to a colour or spacing value cascaded everywhere, which was the whole point of fixing the consistency problem at its root rather than patching it surface by surface.
5 Core Goals, Click to Expand
04, Documentation
A Living Source of Truth
Components and patterns are not very useful by themselves, they need guidelines to be truly valuable. I structured the usage guidelines as the source of truth for USOPC brand standards, mapping every component back to its underlying design tokens so a change at the token level propagated predictably across the whole system.
Driving Adoption
A system only delivers value once teams actually use it. To move people off their old habits I treated documentation as a product: I ran walkthroughs with each team, published the guidelines and Storybook where engineers already worked, and made the system the path of least resistance, easier to grab a vetted component than to build one from scratch. That, more than any single component, is what turned three siloed teams into one shared workflow.
Accessibility First
The design system prioritised inclusivity through WCAG compliance, colour contrast standards, keyboard navigation support, and user testing across diverse groups, so accessibility was never an afterthought.
Storybook Integration
Implemented Storybook as an interactive pattern library tool for isolated code documentation. Compatible with major frontend frameworks, it enables documentation of use cases as stories and streamlines synchronisation between design and development.
05, Deliver
Efficiency at Scale
The Core Design System changed how teams at USOPC worked. Design workflows became measurably faster, component reuse increased, and project estimates dropped, in some cases by more than half, freeing up time and budget to build more features for the MVP launch. The bigger win was cultural: design and engineering finally shared one source of truth instead of negotiating it in weekly review meetings.
Results & Impact
47%
Speed
Reduction in design estimate time for new features
0%
Coverage
Component coverage across TeamUSA & USOPC digital surfaces
0
Alignment
Product teams aligned under one shared design framework
Time-saving measured against the team's prior design-estimate baseline for comparable features; coverage tracked as the share of shipped UI mapped to system components. Beyond the numbers, weekly design-review cycles dropped sharply and the system became the default starting point for every new feature.
What I'd Do Differently
Adoption, not creation, is where design systems live or die. If I ran this again I'd invest earlier in onboarding and contribution rituals, office hours, a clear request process, a changelog, so teams pulled the system in rather than being asked to. We earned adoption, but slower than we needed to.
I'd also define governance and versioning from day one. We documented components well, but decisions about who owns a change and how it ships were settled case by case at first. Codifying that upfront would have prevented drift as more teams started contributing.
“The design system gave every team a shared language, and the freedom to focus on what actually matters: building great experiences for athletes and fans.”