Project 03, TeamUSA
Olympic Design System
Building a unified design system for the USA Olympic & Paralympic Committee, replacing a fragmented visual language with a scalable, accessible, and collaborative framework.
01, Overview
A Fragmented System Holding Teams Back
The design process at USOPC relied on outdated methods, style guides and recurring design reviews every week. While it worked, it came at a significant cost in both time and consistency. The goal was to give designers and developers more space to solve real problems, not manage pixel discrepancies.
As Product Designer, I built the USOPC Design System from scratch: I led the research, created the component library, wrote the usage guidelines, and mentored other designers throughout the process.
02, The Problem
Design Without a Common Language
Before the update, USOPC lacked a cohesive design system to harmonise the brand. Product, brand, and engineering teams operated in silos, without shared processes, design language, guidelines, or UI pattern libraries, creating inefficiencies at every level.
3
separate teams operating without a shared design framework or common visual language
Weekly
design review cycles spent on pixel-level decisions instead of solving real problems
0
unified component library or documented usage guidelines existed before this project
Fragmented Visual Language
The existing design system lacked uniformity and was outdated, no shared colour palette, type scale, or component library existed across the TeamUSA and USOPC digital products.
Vague Documentation
Previous documentation left too much open to interpretation, causing each team to make independent decisions that drifted from the brand and from each other.
Siloed Teams & Wasted Effort
Design, engineering, and brand teams operated without a shared framework, leading to duplicated work, recurring design reviews, and inconsistencies across every product surface.
03, The Solution
Building from Atoms Up
I anchored the system in Brad Frost's atomic design methodology, building modular, reusable components from the ground up so a change at the token level cascaded everywhere. The process began with a full audit of existing assets, moved through collaborative research with cross-functional stakeholders, and culminated in a living pattern library documented in Storybook.
Decisions I Made
Atomic design, starting at tokens and atoms
Why
A single change to a colour or spacing value cascaded everywhere, which fixed the consistency problem at its root instead of patching it surface by surface.
What I rejected
A flat component dump. Faster to assemble, but every inconsistency would have to be fixed one component at a time.
Interview the people who would live with the system first
Why
I talked to front-end development, product management, engineering, and marketing before any design decisions were made, to surface the full scope of the fragmentation.
Treat documentation as a product
Why
A system only delivers value once teams use it. I ran walkthroughs with each team and published the guidelines and Storybook where engineers already worked, so a vetted component was easier to grab than building one from scratch.
How Might We
“Empower designers and engineers to build consistently and efficiently, without reinventing the wheel on every project?”
How Might We
“Create documentation so clear and accessible that every team member can contribute to, and benefit from, a shared design language?”
Consistent Design Language
Established a unified visual language and principles, colour, typography, spacing, and iconography, for a coherent user experience across all platforms.
Streamlined Development
Optimised workflows and accelerated development with reusable, production-ready components, directly reducing time-to-market for new features.
Collaborative Workflow
Promoted efficient cross-team collaboration using Storybook as a shared pattern library, minimising handoff bottlenecks between design and engineering.
Accessible by Default
Embedded WCAG compliance into every component, colour contrast, keyboard navigation, and screen reader support, so accessibility was never an afterthought.
04, The Outcome
Efficiency at Scale
The Core Design System transformed how teams at USOPC worked. Design workflows became measurably faster, component reuse increased dramatically, and project estimates dropped, in some cases by more than half, freeing up time and budget to build more features for the MVP launch.
47%
Speed
Reduction in design estimate time for new features
100%
Coverage
Component coverage across TeamUSA & USOPC digital surfaces
3
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.
“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.”