Will Thompson Design
Design systems, why?
"A design system isn’t just a set of reusable components, it’s a shared language between design and engineering.”
— Nielsen Norman Group, “Design Systems 101”
The start of the journey
When I joined UniHomes, design cohesion and consistency always took a back seat. Buttons came in six different border radii, and colours were inconsistent across pages. Over the years, engineers had built the same component repeatedly, each time with various classes and subtle styling differences.
What started as a simple UI cleanup evolved into something far more foundational, a bespoke design system that helped unify our design language, accelerate development, and scale our product ecosystem.
Understanding the problem
The first audit
I knew the website was bad, and the design was only the tip of the iceberg on a litany of problems that users faced when trying to accomplish their goals. To build and improve the process, I needed to understand the current state of the design systems in place. It turns out there was nothing consistent.
In my early projects, the back-and-forth between me and engineering was mind-blowing, clearly impacting development velocity.
12
Different shades of orange including random gradients across Figma handover files
4
Different fonts used for the same header variation, including a third party design system
0
Documentation. Nothing for handover, no guidelines for development, no systems at all
"Design debt is like technical debt: the longer you ignore it, the more expensive it becomes.”
— Nielsen Norman Group
The strategy
How do you solve such an engrained issue?
Our business needed more than visual consistency, we needed a scalable design foundation that could support multiple brands and future platforms.
I partnered with engineering and product leadership to define three clear goals:
Unify
Create a single source of truth for components and design across our ecosystem for development and future design teams.
Accelerate
Aim to reduce handover friction between Product and Engineering. There should be no questions about components.
Scale
Empower scalability. The Design System should be a living, evolving creature, built in a way that accommodates this.
"Our Design System's main goal is to help accelerate and unify project delivery"
— Internal comms
Build it
Stage one: The basics
Colour, typography, buttons.
In my opinion everything stems from these four key elements. You use them to build a look and feel of a brand or business function. Border radii on buttons for example could influence how form or text fields look. Typography and colour influence calls to action, layouts, forms, even promotions.
Stage two: Slightly expand the library
Inputs, forms, galleries, headers/footers, anything that would be common on a majority of pages throughout the system.
Stage three: Maintenance
To ensure parity between design and code, I collaborated closely with engineering in order to bring our dream of minimal handover to a reality.
Annotate
Adding a system of annotations to designs for edge cases or animations to avoid confusion.
Observe
I sat in refinement and planning sessions to see the design handover process in action and tweak accordingly.
Review
In retrospectives the design system was often raised in order to catch ad-hoc feedback.
Building a Bespoke Design System
From Chaos to Cohesion
UniHomes
Product Design
Prop-tech
The results
Reduction
In meeting length for design discussion
From hours of back and forth to the occasional five minute chat
100%
New screens using the system
All handovers used the new system
System parity
It was rare to see components online and not in the system
Eventually this led to components being re-used site wide
Clarity, not control
A truly collaborative approach
A well-crafted system gives teams the confidence to move fast without breaking design integrity.