Building & Evolving Redesignr — Wahoo Fitness's Design System
I led Wahoo Fitness in building a scalable, token-driven design system that integrates seamlessly with our existing Material UI React framework. By synchronizing design tokens, Figma components, and developer workflows, we streamlined our process, ensured consistent look & feel, and made it simple to adapt to new designs or feature expansions.
Overview
In 2022, Wahoo Fitness set out to rebuild the Wahoo app from the ground up—ushering in a new era of innovation. At the same time, the product team was undergoing changes and decided to consult an external design agency for the initial design concepts. Despite the unfinished designs, our developers were eager to start building. Recognizing this, I led the effort to create a future-proof design system that would unify the Wahoo ecosystem, enable rapid iteration, and safeguard the look & feel across all platforms, multiple teams, and codebases.
The Challenge & Context
-
Outsourced Design Concepts
Wahoo initially hired an external design agency to shape the visual direction of our new app. Meanwhile, our in-house developers were already laying the technical foundation before final designs were approved. This meant design decisions lagged behind development—a tricky scenario where code was being written in parallel with outsourced design work.
-
Future-Proofing the System
Recognizing the misalignment in timelines, I saw an opportunity to create a design system that could adapt to whatever the agency delivered. My goal was to ensure that core styles (color, typography, spacing) would be easily configurable, so the system could absorb changes without massive refactoring.
-
Technical Preferences & Constraints
Our developers wanted to continue using Material UI (MUI) in React, as they were already comfortable and productive with it. Instead of pushing an entirely new framework, I integrated MUI into the design system to maintain consistency while respecting established developer workflows.
-
Design Token Integration
I proposed a combination of Design Tokens, Tokens Studio (Figma plugin), and Style Dictionary to keep the design and dev processes in sync. This ensured that if the agency later shifted any artistic direction, we could make a handful of token updates instead of redeveloping entire interfaces.
Overall, balancing external design decisions with in-house dev timelines became the central challenge—and it sparked the creation of a dynamic, token-driven system that could handle changes gracefully.
Below is the approach I took to tackle these challenges head-on.
My Approach
-
Audit & Research
- UI Audit: Gathered existing styles, patterns, and colors across Wahoo products to identify inconsistencies and consolidation opportunities.
- Stakeholder Interviews: Spoke with developers to understand pain points, must-haves, and future goals.
-
Design Tokens & Advanced Tooling
- Design Tokens: Codified brand elements—color, typography, spacing—into platform-agnostic tokens.
- Tokens Studio: Leveraged the Figma plugin to define and manage tokens directly in the design tool.
- Style Dictionary: Automated exports into platform-specific files (e.g., JS, CSS, SWIFT (iOS), KT (Android)), reducing manual handoff errors and ensuring consistency.
-
Library & Documentation
- Figma Library: Maintained reusable components—buttons, modals, and navigation bars—aligned with MUI’s structure but styled with Wahoo’s unique look. This served as the design-side source of truth for visual references and high-fidelity mocks.
- Storybook: Introduced a dedicated Storybook environment where designers and developers could collaborate in real time on the code-side of the components. By viewing each component in isolation, teams could quickly refine design details, test prop variations, and ensure cross-platform consistency without hunting through the full app codebase.
- Guidelines & Standards: We are now in the process of creating a design guideline in Storybooks to capture usage rules, accessibility standards, and design rationale. This living documentation will help onboard new team members, foster consistency, and serve as a single source of truth for key decisions.
The Solution
By making tokens the single source of truth, we created a design system ready to adapt to any future updates. Our Figma library and Style Dictionary integration empowered teams to quickly roll out changes across platforms—keeping devs comfortable with MUI’s familiar React workflow while ensuring on-brand designs.
Key Highlights:
- Scalable Architecture: Easily handle new feature requests and product expansions without major overhauls.
- Efficient Updates: A single token tweak trickles through every component in development and Figma.
- Platform Flexibility: MUI remains under the hood, but the end result looks and feels distinctively Wahoo.
Impact & Learnings
- Unified Brand Experience: Despite early design misalignment, the final product suite feels cohesive and professional.
- Developer-Designer Alignment: A shared “token language” has streamlined collaboration, making reviews more efficient.
- Consistent UI Across Codebases: All Wahoo Fitness app codebases reference the same library for colors, typography, and components, ensuring design consistency across micro frontends.
Overall, integrating a token-driven design system with our existing MUI setup made Wahoo’s workflow far more adaptable to shifting designs and priorities.
Throughout this journey, I deepened my understanding of design system management, focusing on solutions that work for both designers and developers. My biggest takeaway was that a truly effective design system can’t exist in isolation—it has to address each team’s unique needs. I initially viewed design systems as polished Figma libraries, but I soon realized the real source of truth belongs in the codebase, because ultimately that's what our athletes experience.
By leveraging build tools like Tokens Studio and Style Dictionary, we automated the repetitive tasks of updating colors, typography, and spacing—allowing developers to concentrate on building features, not tracking down style inconsistencies.
If you’re interested in learning more about this project or have suggestions for improvement, feel free to reach out!
Credits — Sophie Linn, Chris Blom, Nicole Mertz, Shane Byler, Maryna Ionova, Jordan Corbman, Brett Mathe, Ryan Weisenberger, Jacob Richardson, Tobias Fenney, Kelsi Lane, Matt Charlton, Nathan Petteroni