Creating a design system

Problem

Three main issues were slowing us down:

Inefficient patterns

Multiple design patterns used to solve the same problem.

Reduced velocity

Design and technical debt slowing down delivery.

Inconsistencies

Visual and interaction inconsistencies weakening the brand.

Role & team

As the founding product designer, I partnered with engineering to identify which components our roadmap needed first, prioritising them by impact over effort. With the CEO, I made the business case for investing early so we could ship faster and cut design and technical debt before it compounded. This kept the system tied to real product needs.

Goal

Unite departments around a common visual language, deliver consistent user experiences across products, and increase development speed.

The design system

I followed the framework from Alla Kholmatova's Design Systems, breaking the work into four parts:

1 · Design principles

To guide the system, I defined principles aligned with the product's purpose:

Empowering

Nothing makes you feel uncomfortable or like you can't trust the system. The system aids you when needed.

Inclusive

Everything we design should be as usable, legible, and readable as possible. We prioritise accessibility over beauty.

Conversational

The system speaks the user's language. Our use of copy and interactions breathes personality into our product and allows us to communicate with users in easily understood ways.

2 · Functional patterns

I audited the UI, grouped similar components, and defined reusable patterns for inputs, lists, navigation and pricing.

Interface audit

Auditing all interface elements allowed me to uncover inconsistencies and expose redundancies.

An audit of all interface elements, laid out to expose inconsistencies. — Auditing patterns and components across the app

Defining functional patterns

After collecting and grouping all elements by purpose, I decided whether to merge patterns or keep them separate by mapping out each component's content structure. Typically, elements that share the same underlying structure can be merged into one pattern.

Several similar interface elements used to display task pricing, shown side by side. — Similar elements used to show task pricing

Different payment-card elements being merged into a single pattern. — Merging elements into one pattern

The finished cost-list pattern and its variants used to show task pricing. — Cost list pattern and variants used to show task pricing

3 · Perceptual patterns

I standardised typography, colour, spacing and tone of voice to create a unified feel.

Identifying signature patterns

Pinning down distinct elements that convey the brand.

Aesthetic qualities and signature patterns

Style inventory

I then grouped individual style elements by purpose, then defined patterns.

4 · Pattern library

I documented the system in a shared Google Doc with naming, usage, and structure guidelines so the team could easily understand and apply it.

Patterns documented in Google Docs with naming and usage guidelines. — Documenting patterns in a shared Google Doc

Impact

In the next sprint we delivered faster and with fewer handover issues. The system gave us a shared design vocabulary and a foundation for future work.

Before — Handyman Services booking screen with inconsistent styling.

After — service selection built from the shared pattern library.

After — task booking screen using the consistent system.

Outcome

The system helped us work more consistently, build faster, and reduce design debt, making future design work easier to scale.

Utilities — form elements and selection controls.

Toolbox design system Read the MVP design system documentation

Learnings

Collaboration was essential as it ensured the system embodied the right values and solved user problems that directly impact business goals.

The team in a workshop, prioritising solutions to implement as patterns. — Workshop prioritising solutions to implement as patterns