Architectured the design system every CMS feature runs on
Architectured the design system every CMS feature runs on
Context
Context
I joined Business Insider as the first embedded designer on the CMS team, stepping into early wireframes, loose research, and no plan for reuse—no component system, no shared language, no scalable structures.
The org-wide libray technically existed, but it was outdated, missing core states, and barely adopted.
I joined Business Insider as the first embedded designer on the CMS team, stepping into early wireframes, loose research, and no plan for reuse—no component system, no shared language, no scalable structures.
The org-wide libray technically existed, but it was outdated, missing core states, and barely adopted.
Problem
Problem
With no reusable components or standards, designers and engineers rebuilt from scratch every time. Worse, frontend development had already started, so some early wireframes shipped straight to production, locking in inconsistent Ui and long-term maintenance debt.
With no reusable components or standards, designers and engineers rebuilt from scratch every time. Worse, frontend development had already started, so some early wireframes shipped straight to production, locking in inconsistent Ui and long-term maintenance debt.
What I did
What I did
Built the CMS component library from scratch: scalable, variant-ready components structured with clear naming, logical categories, and lightweight docs
Built the CMS component library from scratch: scalable, variant-ready components structured with clear naming, logical categories, and lightweight docs
Designed full interaction coverage across inputs, buttons, and filters—hover, focus, disabled, error, loading
Designed full interaction coverage across inputs, buttons, and filters—hover, focus, disabled, error, loading
Built a token system with Figma variables, mapping foundational primitives to semantic UI tokens and emabling multi-mode theming
Built a token system with Figma variables, mapping foundational primitives to semantic UI tokens and emabling multi-mode theming
Made the Figma library the single source of truth across product, design, and engineering when a Storybook integration wasn't feasible
Made the Figma library the single source of truth across product, design, and engineering when a Storybook integration wasn't feasible
The token system
The token system
Tokens in Figma
Tokens in Figma
Foundational primitives mapped to semantic UI tokens, enabling multi-mode theming like light and dark.
Foundational primitives mapped to semantic UI tokens, enabling multi-mode theming like light and dark.
Tokens applied
Tokens applied
The same tokens driving a real component (Schedule-to-publish modal), keeping color, spacing, and radius consistent across the CMS.
The same tokens driving a real component (Schedule-to-publish modal), keeping color, spacing, and radius consistent across the CMS.
Sweating the states
Sweating the states
Icon button, before and after
Icon button, before and after
The original had three stages and no touch target. The redesign added Pressed, Focused and Loading on top of Default, Hover, and Inactive—improving clarity, accessibility, and responsiveness.
The original had three stages and no touch target. The redesign added Pressed, Focused and Loading on top of Default, Hover, and Inactive—improving clarity, accessibility, and responsiveness.
Outcome
Outcome
20% faster development through reusable components
20% faster development through reusable components
96% drop in UI-inconsistency QA bugs
96% drop in UI-inconsistency QA bugs
Adopted by 3+ designers and became the UI foundation for every CMS feature
Adopted by 3+ designers and became the UI foundation for every CMS feature