Rebrand & Design System
Lead Product Designer
Better.co.uk — Rebrand & Design System
My role: Lead Product Designer
Timeline: 9 months (Jul 2022 – Mar 2023)
The short version: Led a full website rebrand and design system build under a 4-week compressed deadline, as the sole design resource — while also securing investment in user testing that changed how the team made product decisions.
CONTEXT
Better.co.uk (previously Trussle) is an online mortgage broker. Following its acquisition by Better.com, the business needed to rebrand the entire customer-facing product to align with the parent company. I joined during this transition as Lead Product Designer.
The product had evolved organically over time. The 250-page website used components from four different libraries, with inconsistent patterns, accessibility gaps, and no shared design system. The rebrand wasn’t just a reskin — it required auditing and rationalising the entire UI landscape.
THE CONSTRAINT THAT CHANGED EVERYTHING
The original plan was a three-month rebrand timeline. Contractual obligations compressed this to four weeks. I was the sole design resource on the project for much of this period.
This constraint forced a decision: we couldn’t audit, redesign and document everything. I had to prioritise ruthlessly — focusing on high-visibility areas, core interaction patterns, and components with the highest reuse potential. The design system wasn’t a side deliverable; it became the mechanism for delivering the rebrand at speed.
WHAT I DID
Design system build
Audited all existing components to understand usage, importance, variants and documentation status. Developed a new Figma design system using atomic design principles, with consistent accessibility standards (colour contrast, labelled form fields, clear text hierarchy). Documented patterns in Storybook so engineering could build from shared primitives. Collaborated with US-based colleagues to understand their system while retaining autonomy for the UK product.
The atomic design methodology used to structure the design system — ensuring consistency from individual elements through to full page templates.
Rebrand delivery
Worked closely with heads of product and development to prioritise what needed to change first. Delivered restyled components, a comprehensive style guide, and a new visual identity across the key customer-facing journeys — all within the four-week window.
Redesigned calculator and guide pages — one of the highest-visibility areas prioritised for the four-week delivery window
User testing investment
Separately, I partnered with a product manager to assess the team’s testing capabilities. I researched platforms, ran demonstrations, and presented a business case to senior stakeholders. This resulted in significant investment and established a regular cadence of moderated and unmoderated testing — giving the team the ability to make product decisions based on insight rather than assumption.
User testing investment
Separately, I partnered with a product manager to assess the team’s testing capabilities. I researched platforms, ran demonstrations, and presented a business case to senior stakeholders. This resulted in significant investment and established a regular cadence of moderated and unmoderated testing — giving the team the ability to make product decisions based on insight rather than assumption.
Type scale defined as part of the design system, establishing consistent hierarchy across the product.
KEY DECISIONS
Rebuild rather than refactor
The existing component landscape was too fragmented to patch. I pushed for a structured rebuild of core components, which allowed us to remove duplication at the source and establish consistent patterns from the start.
Design system as delivery mechanism
Instead of treating the system as something to build after the rebrand, I positioned it as the way we would deliver the rebrand. Components were designed with reuse in mind from day one, and patterns were documented as they were created.
Prioritising under pressure
With four weeks, I focused on high-visibility product areas, core interaction patterns, and components with the highest reuse potential. Everything else was documented for future iterations.
OUTCOME
- Delivered a consistent rebrand across key product areas within 4 weeks, as the sole design resource
- Established a new design system with reusable, accessible components and a comprehensive style guide
- Reduced UI inconsistency and component duplication significantly
- Secured investment in user testing that changed how the team approached product decisions
- Improved alignment between design and engineering through shared primitives and documentation
Colour primitives — the ‘atoms’ of the design system. This foundational palette fed into all component and layout-level colour decisions.
Responsive mortgage comparison view — one of the core customer-facing journeys redesigned during the rebrand.
Redesigned sign-up modals — moving from Trussle’s illustrative style to a more professional photography-led approach as part of the Better.co.uk rebrand