Upper House
Scalable Design System 0 → 1
Upper House
Scalable Design System 0 → 1
Upper House
Scalable Design System 0 → 1
Project | Client | Time | Team |
|---|---|---|---|
New Branding UI Refresh | Upper House | 8 weeks | 1 Design Lead |
Overview | |||
Problem | |||
As The Upper House refreshed its visual identity, fragmented design files forced teams to rebuild similar UI patterns and make repeated interface decisions. This ended up diluting brand consistency and slowing down feature delivery across web, mobile, and guest touchpoints. | |||
Business Goal | |||
Build a scalable, tokenized design system to establish a single source of truth, align touchpoints with the refreshed brand, and speed up release cycles. | |||
My Role | |||
Restructured the Figma library into tokenized, developer-ready components to cut out repetitive design work and keep design and engineering aligned. | |||
Project | Client | Time | Team |
|---|---|---|---|
New Branding UI Refresh | Upper House | 8 weeks | 1 Design Lead |
Overview | |||
Problem | |||
As The Upper House refreshed its visual identity, fragmented design files forced teams to rebuild similar UI patterns and make repeated interface decisions. This ended up diluting brand consistency and slowing down feature delivery across web, mobile, and guest touchpoints. | |||
Business Goal | |||
Build a scalable, tokenized design system to establish a single source of truth, align touchpoints with the refreshed brand, and speed up release cycles. | |||
My Role | |||
Restructured the Figma library into tokenized, developer-ready components to cut out repetitive design work and keep design and engineering aligned. | |||
Project
New Branding UI Refresh
CLIENT
Upper House
TIME
8 weeks
Team
DCA
Overview
Problem
As The Upper House refreshed its visual identity, fragmented design files forced teams to rebuild similar UI patterns and make repeated interface decisions. This ended up diluting brand consistency and slowing down feature delivery across web, mobile, and guest touchpoints.
Business Goal
Build a scalable, tokenized design system to establish a single source of truth, align touchpoints with the refreshed brand, and speed up release cycles.
My Role
Restructured the Figma library into tokenized, developer-ready components to cut out repetitive design work and keep design and engineering aligned.
01 / FOUNDATION
01 / FOUNDATION
Turning brand guidelines into a scalable UI system
Turning brand guidelines into a scalable UI system
Created foundation for buttons, inputs, layout, banners etc.
Created foundation for buttons, inputs, layout, banners etc.
01 / FOUNDATION
Turning brand guidelines into a scalable UI system
Created foundation for buttons, inputs, layout, banners etc.
02 / GOVERNANCE
02 / GOVERNANCE
Deciding what actually goes into the library.
To prevent library bloat, basic elements like buttons stayed global, while complex patterns with custom business logic were kept as feature widgets. This structure kept the core system clean, flexible, and easy to maintain.
Deciding what actually goes into the library.
To prevent library bloat, basic elements like buttons stayed global, while complex patterns with custom business logic were kept as feature widgets. This structure kept the core system clean, flexible, and easy to maintain.
03 / IMPLEMENTATION
03 / IMPLEMENTATION
Keeping design and production in sync
I managed the Figma library and reviewed designer files to keep component use consistent. During build, I cross-checked coded UI against Figma to fix spacing, color, and state bugs before QA, keeping our production code clean and pixel-accurate.
Keeping design and production in sync
I managed the Figma library and reviewed designer files to keep component use consistent. During build, I cross-checked coded UI against Figma to fix spacing, color, and state bugs before QA, keeping our production code clean and pixel-accurate.
04 / MAINTENANCE
04 / MAINTENANCE
Managing Change Request in a Live Product
A quick color fix in Figma was simple enough—we’d log the update and move on. But if a component change touched behavior or core interaction specs (CIM), it triggered a full review with BAs, QA, and devs to assess regression risks.
It was a huge reality check: a design system isn't just a Figma file. It’s deeply tied to product requirements, engineering capacity, and release schedules.
Managing Change Request in a Live Product
A quick color fix in Figma was simple enough—we’d log the update and move on. But if a component change touched behavior or core interaction specs (CIM), it triggered a full review with BAs, QA, and devs to assess regression risks.
It was a huge reality check: a design system isn't just a Figma file. It’s deeply tied to product requirements, engineering capacity, and release schedules.
05 / SCALING
05 / SCALING
Evolving the Libary in Control
When a major brand refresh dropped, our UI needed an immediate facelift—new colors, updated components, and theming support from top to bottom.
To keep all these changes from turning our Figma files into a messy free-for-all, I cleaned up our naming conventions and kept a strict cap on new variants. If a tweak wasn't going to be reused across the product, it didn't make the cut. This let us roll out the new look smoothly without building up a mountain of design debt.
Evolving the Libary in Control
When a major brand refresh dropped, our UI needed an immediate facelift—new colors, updated components, and theming support from top to bottom.
To keep all these changes from turning our Figma files into a messy free-for-all, I cleaned up our naming conventions and kept a strict cap on new variants. If a tweak wasn't going to be reused across the product, it didn't make the cut. This let us roll out the new look smoothly without building up a mountain of design debt.
06 / LAUNCHED
06 / LAUNCHED
Available Now Online
Available Now Online
get in touch
Want to work together? Drop your details and I'll hit you up soon!
contact Me
get in touch
Want to work together? Drop your details and I'll hit you up soon!
contact Me
get in touch
Want to work together? Drop your details and I'll hit you up soon!