Project 02, 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
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 contributed to building the USOPC Design System from scratch, leading research, creating the component library, writing usage guidelines, and mentoring other designers throughout the process.
02, The Problem
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
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.
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
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.”