Project 02, Design System

TeamUSA

Building a unified design system for the USA Olympic & Paralympic Committee, replacing a fragmented visual language with a scalable, accessible, and collaborative framework.

Role
Product Designer
Company
USOPC
Responsibilities
Research · Design System · Documentation · Mentoring
TeamUSA overview

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 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

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.

TeamUSA problem overview

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

01

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.

02

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.

03

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.

TeamUSA atomic design
TeamUSA documentation

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?

01

Consistent Design Language

Established a unified visual language and principles, colour, typography, spacing, and iconography, for a coherent user experience across all platforms.

02

Streamlined Development

Optimised workflows and accelerated development with reusable, production-ready components, directly reducing time-to-market for new features.

03

Collaborative Workflow

Promoted efficient cross-team collaboration using Storybook as a shared pattern library, minimising handoff bottlenecks between design and engineering.

04

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.

TeamUSA final design

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.”

Engineering Manager · USOPC
Explore the full processView Full Case Study