A design system before the first feature.
Muuvr started with tokens and components, not screens. Every screen since has snapped onto one system instead of spawning its own.
Product DesignandDesign SystemforMuuvr
Intro
A brand-new consumer sport app: no system, a blank repo, a founding team that wanted to move fast. The engagement covered product design and the design system underneath it, from the first commit.
Challenge
Nothing to migrate, everything to ship. Most teams this small should reach for an off-the-shelf component library and move on, but when the product itself is the UI, copy-pasted screens quietly assemble tomorrow's drift machine.
There was every reason to skip foundations: no legacy, no scale, no second team to align. The bet was that the cheapest moment to build a system is before the screens exist to fight it.
Approach
The system grew screen by screen with the product, nothing abstracted before its second use. Every component earned its place by being needed.
- A small token set and component library sized for a startup team
- Product design for the core app flows, built from the system
- A design language that reads as motion, not a generic template
Design Language
The identity had to read as motion, pace, sweat, forward lean, not as another template with a logo swapped in. Type, colour and motion decisions were encoded as tokens, so the brand's energy travels with every new screen instead of being repainted onto it.
Product Design
The core app flows were designed straight from the system, screen by screen. When a flow needed something the library did not yet have, we built and tokenised the component first, then used it, nothing entered the app as a one-off.
Outcome
Features piled up; the app stayed one product. New screens snap onto the existing tokens and components instead of spawning their own.
Recommendation
His outstanding work in building a highly scalable component library deserves special mention, as it continues to serve as the foundation for consistent and efficient product development to this day.
Results
Results
- Day one
- tokens and components before the first feature sprint
- One product
- new screens snap onto the system, not past it
- Self-maintained
- foundations the founding team kept current on their own
Deets
Deets
- Industry
- Sport · Consumer app
- Scope
- Product design
- Design system
- Design language
- Stack
- Design tokens
- Design Library
- React Native
- TypeScript
- Storybook
- Credits
- Florian Gampert, Product design + system foundations
- Muuvr founding team, Product
This shape of work, installed in your product in 90 days.
