Overview
A B2B SaaS company in the productivity/hardware space had its product suite grow organically across web, mobile, and desktop without a shared design language. With 50+ enterprise clients depending on a consistent experience, the inconsistencies were becoming a business problem, not just a design one. Role: Senior UX Designer (sole designer), 14-month engagement. Team: 1 designer, 3 engineers, 1 PM. Tools: Figma, Storybook.
The Challenge
A UI audit across all three platforms catalogued every component variant, color value, and typographic style — revealing 47 unique button styles, 12 different greys, and no shared spacing scale.
Engineering was spending extra cycles reconciling design specs. Onboarding new team members meant re-explaining patterns that should have been documented. Stakeholder interviews with 3 engineers, 2 PMs, and the VP of Product confirmed inconsistent handoff specs and duplicated work as the top pain points.
Key Insights
Inconsistency is a business problem
Stakeholder interviews revealed that inconsistent UI patterns were appearing in enterprise client feedback and slowing sales cycles — not just creating internal design debt.
“We're spending more time explaining our own product to clients than selling it.”
Engineering cycles were the real cost
Each sprint, engineers were re-implementing the same components with slightly different values — 20–30% of development time on UI reconciliation instead of feature work.
Documentation had never existed
Onboarding new team members required tribal knowledge transfer. There were no pattern guidelines, no component specs, no rationale for design decisions.
Design Decisions
Flat tokens or layered architecture?
Chose layered (primitive → semantic → component). More upfront work, but it enabled theming and platform-specific overrides without breaking consistency. When the team later needed a dark mode prototype, the semantic layer made it possible in days.
Build everything at once or incrementally?
Incremental — engineers were shipping features daily. A full freeze wasn't realistic. I started with buttons, inputs, and cards (80% of the UI surface), giving immediate visual consistency without blocking any sprint.
Figma-only docs or code-connected?
Both. Figma was the design source of truth, but I worked with the frontend lead to set up Storybook with the same token names. This eliminated the "Figma says one thing, code says another" problem that was causing rework.
Approach
I chose a layered token architecture (primitive → semantic → component) over a flat variable list. More upfront work, but it enabled theming and platform-specific overrides without breaking consistency — when the team later needed a dark mode prototype, the semantic layer made it possible in days instead of weeks. Rolled out incrementally: buttons, inputs, and cards first (80% of the UI surface), giving immediate visual consistency without blocking any sprint. Figma was the design source of truth; Storybook mirrored the same token names, eliminating the "Figma says one thing, code says another" rework cycle. Final library: 120+ components across 3 platforms, adopted by all engineering teams.
Outcomes
