Context

The Whoop app was built by an agency in 2014. Seven years of rapid feature development later, every screen was a snowflake. Feature delivery had slowed. Engineering spent as much time reverse-engineering existing patterns as building new ones. The product couldn't scale because the foundation wasn't actually a foundation.

I was hired to build the system that would change how Whoop designed and built everything — and to do it without slowing down active development.

The Impact

3.5

Hours saved per designer, per month.

1000's

↳ Estimated dev hours saved per quarter.

1800+

↳ Component varients built out by 2022.

5 ctrys

↳ Planned international launch in 5 countries simultaneously

The Design System continues to make an immediate impact on all timelines for Whoop and it has changed the way Whoop designs and develops features. The Equation to calculate savings due to design system is as follows:

Hrs/wk x 52wks x Hourly $ Rate x Team Number = Annual $ Savings

Key Decision 1: Subatomic over Atomic (architectural bet)

Brad Frost's Atomic Design is the industry standard for design systems. Atoms, molecules, organisms. It works. But it leaves room for interpretation — when two designers define "atom" differently, the system diverges on day one.

I pushed for going deeper. Subatomic particles: the mathematical and stylistic primitives that atoms are constructed from. Border radii. Shadow depths. Spacing units. Color relationships defined as ratios, not hex values. This isn't a common approach. It's not widely discussed. But it's the difference between a system that holds and one that drifts.

By defining these at a component level from the start, design and engineering built from the same source of truth. Either it used the particle or it didn't. No "close enough." The result was a system that was boring to build and extraordinarily durable to use. Designers stopped debating UI and started focusing on UX.

Impact: 1.0.0 shipped in four months. The first feature refactored took four months of dev. The next two shipped in under two months each.

Key Decision 2: Build for internationalization from day one

Leadership was planning to take Whoop international but didn't have a timeline. I made the decision that every component had to be built for localization from the start — expandable text containers, flexible layouts, support for variable string lengths. Not just left-to-right Latin-based languages like English, German, and Spanish. Right-to-left languages like Arabic and Hebrew too.

This wasn't in the brief. Nobody asked for it. But I knew that retrofitting a design system for internationalization after launch is exponentially more expensive than building it in from the beginning. Every component that ships without localization support becomes technical debt the moment the company decides to expand.

Key Decision 3: Reframing the design system as critical engineering infrastructure

Leadership saw a design system as a Figma library the design team maintains. That framing limited buy-in and resources. I made the case that this was engineering infrastructure — it changes how features get built, how fast they ship, and how much they cost.

That reframe didn't happen through slide decks. It happened through results. After the first refactored feature shipped in half the expected time, the conversation shifted from "why are we investing in this" to "what else can we run through the system."

Impact: When internationalization became a priority, the typical 18-month timeline collapsed to under nine months. I led the design-side effort. Once the first wave shipped, expanding to additional countries became incremental work instead of another major program.

Data Visualizations are great examples of organism-level components and how they can be themed and used in multiple places once it is built. The force multiplier effect is difficult to calculate, however, leadership started to take notice once these were in action.

Key Decision 4: Live Library on Zeroheight

While most of the components and design documentation lived in a Figma library file, the team used a CMS to host the code and content examples online, which allowed accessibility for the entire company in addition to the design system team. The site is where the entire Whoop Product language as a whole lives and is easier to view for both internal and external users.