Building a design system
Project overview
I was contracted to lead the design, build and implementation of a company-wide design system as part of a major rebranding initiative. The objective was not only to refresh the visual identity, but to establish a shared foundation that could support multiple teams and products over time.
The problem
Prior to the rebrand, design patterns and UI decisions were fragmented across the organisation. Different teams were solving similar problems in slightly different ways, which resulted in inconsistencies in the user experience and unnecessary overhead for both designers and engineers.
The rebranding effort created an opportunity to step back and address these issues at a structural level, rather than treating them as surface-level visual changes.
Scope and responsibilities
My role covered the full lifecycle of the design system. This included aligning with stakeholders on business goals and brand direction, defining design foundations, designing and documenting core components and working closely with engineering to ensure the system was practical and scalable in production.
Design foundations
The first step was establishing a set of clear, flexible design foundations. This included colour, typography, spacing and layout principles that reflected the new brand while remaining adaptable across different products and contexts.
These foundations were designed to provide consistency without being overly prescriptive, allowing teams to work efficiently while still supporting a wide range of use cases.
Component design and implementation
From there, I designed a core library of reusable components. Each component accounted for states, variations, and edge cases that would arise in production.
Documentation and adoption
For the system to succeed, it needed to be easy to understand and adopt. With each component, I write clear documentation and usage guidelines to explain how components needed to be used and implemented.
This helped build trust in the system and encouraged consistent usage across teams. I also noticed that writing strong documentation reduced friction, as cross-functional teams would lean on it as "a single source of truth".
Outcome and impact
The resulting design system supported the new brand while significantly improving consistency across products. It reduced duplication, streamlined design and development workflows and gave teams a shared language for building interfaces.
| What improved | How | Result |
|---|---|---|
| Consistency | Shared foundations + components | Less UI drift across teams |
| Speed | Reusable, pre-tested building blocks | Faster page delivery |
| Collaboration | Clear documentation | Less back-and-forth |
A minor toast
When the rebrand went live in August, it was a little chaotic. There was one specific instance where we had an urgent requirement to publish four new pages ASAP. As the components were already tested prior, we were able to design and build the pages flawlessly within one working day. One of the engineering leads told me that something like this would have taken a whole week in the past. That was a great feeling.
Reflection
This project reinforced my belief that effective design systems are less about visual uniformity and more about enabling teams to do their best work with confidence.