SaaS · Design system · Scale
Design System & Component Library
- Period
- 2020 — 2023
- Role
- Frontend Architect
- Industry
- SaaS
- Result
- 3×faster delivery
The challenge
What was the problem
Three SaaS products under the same brand, three independent codebases, three different visual implementations of the same components. Every new feature meant rebuilding the same button, the same modal, the same form field — and the design team was spending half their time policing drift instead of designing.
The approach
How I solved it
- Audited every UI surface across the three products and grouped them into 20 reusable primitives — the smallest set that covered 90% of screens
- Packaged the library as a versioned npm dependency on a private registry — each product installs it like any other package and pins its own version
- Built each component against the design spec with live Storybook stories — the same stories doubled as the design handoff surface for the design team
- Migrated the three products to the library one feature at a time, behind a feature flag, so design and engineering could ship in parallel
- Established a contribution model — designers open issues with Figma references, engineers open PRs against the library, no UI code lives in product repos
Stack
Tools that did the work
- Angular
- TypeScript
- RxJS
- Angular CLI
- SCSS
- Storybook
- Private npm registry
The outcome
What was delivered
- 3 products now run on a single shared library — same button, same modal, same form field everywhere
- Development speed for new product features tripled measured against the pre-library baseline
- Zero design drift — every component maps 1:1 to a Figma component and a Storybook story
- Design team reclaimed ~40% of their week, reinvested into discovery work
Have a similar problem?
30-minute call, no pitch — let's see if I'm the right fit.