The team could finally build without rebuilding from scratch — which meant shipping features instead of starting over.
Role Product DesignerCompany ISNShipped
Stack
Figma
WCAG standards
Component documentation
Problem
No shared component library existed. Every team was building the same patterns from scratch — inconsistently, and repeatedly. The product looked different depending on who built it.
Intervention
Audited the existing product, defined a token system, and built a documented component library in Figma. Set WCAG AA as the minimum bar. Shipped a working foundation rather than waiting for a perfect one.
Outcome
Teams adopted the system. Feature velocity increased. Designers and engineers shared a common language for the first time — and the product started to look like it came from the same place.
Impact
Faster
Feature delivery — teams stopped rebuilding existing patterns
WCAG
AA compliance baseline set across all new components
One source
Single component library adopted across design and engineering
Design artifacts for this project are publicly available.
01 / Audit
Audit
Catalogued every UI pattern in the existing product. Identified redundancy, inconsistency, and gaps. The audit made the problem visible — and quantifiable — to stakeholders who hadn't seen it that way before.
02 / Define
Define
Defined the token layer first — color, type, spacing, radius, motion. Everything downstream depended on getting this right. Components were built on top of tokens, not the other way around.
03 / Constraint
Constraint
The temptation was to wait until every component was perfect before shipping anything. The real constraint was time and adoption — a perfect system no one uses is worth nothing.
"Ship a working foundation over waiting for a perfect one"
04 / Ship & Watch
Ship & Watch
Released the foundation and monitored adoption. Iterated based on real usage — what components teams actually reached for, where gaps appeared, and what documentation needed to be clearer.
