Obermartin Design System

WDS Design System

Design System and Product Language

Role
Lead Product Designer
Responsibilities
Strategic Vision, Product Design, Project Strategy

Team
Michael Hagel - Principal Designer
Nicolas Cipollo - Tech Lead
Alex Treco - PM

“The primary benefit of design systems is their ability to replicate designs quickly by utilizing premade UI components and elements. Teams can continue to use the same elements over and over, reducing the need to reinvent the wheel and thus risking unintended inconsistency.”

- Nielsen Norman Group

Context

The Whoop app was created in 2014 by the agency Bureau Oberhauser. With rapid growth in app development over time, code complexities increased and visual inconsistencies emerged as new features were built on top of the original system. I was hired to create a Whoop design system for visual brand consistencies that enables design and development to scale effectively across all parts of the ecosystem.

Foundation

Design System Requirements:

Detailed and Thorough
Platform Agnostic
Flexible and Adaptable
Follow Design System Principles

Design systems require a fair amount of mathematics and need to be adaptable for long-term planning and overall success. If a design system is not fully thought out initially before implementation, the whole system can break when complex elements are added. Due to the complexity of the Whoop product and the “uncomfortable pace” Whoop moved at, the foundation of this design system had to be fool-proof more than any other design system I created to date.

In my view, the Atomic Design principles worked but were lacking. Subatomic particles are the basic patterns that allow atoms and molecules to be constructed. By defining particles on an actual component level from the beginning, both design and engineering are able to build with it in mind. Starting the system at this level created an incredibly durable foundation, which allows designers to focus on the user experience rather than the UI.

Outcome

After 4 months of sprints to build up a stable library of components, 1.0.0 went live in March of 2022. Its positive effects were immediately felt by the entire design team. Features were able to be requested through the automated process and put directly into design sprints and were followed immediately with an engineering sprint.

Initially, leadership had a limited understanding of the impact a solid design system would bring to Whoop, however, upon implementation the efficacy of the system spoke for itself. After the team refactored one of our key features with all of the new components, it allowed subsequent features using a similar layout to be delivered in a fraction of the time it previously took. The original feature was built after 4 months of development. The subsequent two were built in less than 2 months each, which resulted in a cost saving of 50-60%.

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.

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.