Design systems
Product Strategy
Building Infrastructure for Product Scale
I created a multi-product design system that gives designers and developers a shared foundation for building consistent, modern digital products.
Role
Lead Designer
Platform
1 design system
5 web applications
01 · Problem & context
Five products, five ways of doing everything.
As the product portfolio grew, different products developed their own visual languages and interaction patterns.
Older software increasingly felt disconnected from newer offerings, while teams repeatedly solved the same design problems.
The challenge was to create a shared foundation that could modernize existing products, support new ones, and make the portfolio feel like one ecosystem.
5
products with independent, diverging UI codebases
100+
variants for a button component
~30%
of design time spent recreating existing patterns
02 · Approach
Build a shared product language
I approached the design system as shared product infrastructure rather than a collection of UI components.
I consolidated recurring patterns into reusable foundations and components while allowing enough flexibility for different product contexts.
The system needed to work across the entire product lifecycle: from early concepts and product discussions through design, development, and ongoing maintenance.
It also needed to become a practical tool that designers and developers would actually use, rather than another library that existed separately from the product teams.
Phase 01
Audit
Cataloged every pattern across five products: thousands of Figma components and color variables, none of it ready for development
Phase 02
Foundation
Semantic tokens for color, type, spacing, and motion. Decisions encoded once, consumed everywhere, themed per product.
Phase 03
Components
Beginning with atoms, patterns, and eventually product-specific compositions. Built in code, readable by AI.
Phase 04
Adoption
Close collaboration with developers to ensure quick and seamless implementation across all 5 products.
03 · Key decisions
01
Reusable foundations
Components were designed to solve recurring problems across multiple products rather than optimize individual interfaces.
02
Design for the ecosystem
The system was built with the wider product portfolio in mind, creating a shared language that could support future products as well as existing ones.
03
Make changes scalable
Shared components meant that brand and visual updates could propagate across products without requiring the same work to be repeated in every codebase.
04
Support exploration
The system also became useful during ideation, allowing designers and product teams to create realistic concepts quickly instead of rebuilding interfaces from scratch.
04 · Outcome
A system adopted across the product portfolio
5
products shipping on the shared foundation
100+
components and design patterns ready for use with AI
1 PR
to update a token across every product at once
5×
faster feature design-to-build cycle after adoption
The system was adopted across multiple shipped products as well as smaller projects, prototypes, and early concepts.
Most of the design team uses the shared foundation alongside numerous developers. It also accelerated the path from concept to implementation, particularly when combined with AI-assisted development.
More importantly, it gave the company a scalable way to maintain a consistent, modern brand across an expanding product portfolio while reducing repeated front-end maintenance.