Hargreaves Lansdown

Collage of Hargreaves Lansdown website and app screens showing savings rates, login page, investment options, and account details.

THE PROJECT

OVERVIEW

Senior UI Designer at Hargreaves Lansdown, a platform serving 1.7 million clients across web, mobile and native apps. Twelve product teams were working in silos with no shared design language. I shaped the visual language and component architecture for the platform's first unified design system—working across UI, UX, accessibility and product to build infrastructure that held at scale.

CHALLENGE

A company-wide rebrand exposed years of fragmentation. Twelve product teams had produced overlapping components, inconsistent patterns and no shared standards. The same problems were being solved differently across teams, sometimes multiple times in the same quarter. Accessibility compliance was a critical gap—handled reactively, project by project, rather than built into the foundation.

The problem wasn't talent or intent. Every team was capable. But without a unifying system there was no scalable way to address consistency, accessibility or efficiency. The rebrand made the cost of that gap visible to everyone.

GOAL

A design system treated as infrastructure—a reusable library of UI components that brought visual and functional consistency across the platform, embedded accessibility compliance from the ground up, and eliminated the cost of teams repeatedly solving the same problems in isolation.

THE PROCESS

Set of nine iPhone screens showing an app audit highlighting fragmented user experience issues in login, accounts, watchlists, and news sections with accompanying detailed text.

DISCOVERY

Audited existing component libraries, coded UI patterns and accessibility reports across web, mobile and native apps. The landscape was fragmented: overlapping components with subtle inconsistencies, spacing and typography that varied by team, accessibility handled as remediation rather than foundation.

Paired the audit with conversations across product, design and engineering to understand where friction showed up day to day. The findings were consistent—teams wanted a shared system they could trust. They didn't want to maintain their own variations. They'd built them because nothing authoritative existed.

STRATEGY

The system was positioned as infrastructure, not a component library. Tokens first, components second. Accessibility and performance as foundations, not additions.

Critically, the system was framed as a service to product teams rather than a top-down mandate. The pitch was practical: faster delivery, fewer regressions, less cognitive load. I worked with leads across disciplines to align the system with existing product roadmaps—adoption would follow value, not enforcement.

Defined a governance model that balanced central ownership with team contribution. The system needed to be authoritative without being rigid. Teams could extend it, but extensions followed shared conventions.

Service blueprint for Hargreaves Lansdown Accessible Design System showing phases 01 Audit to 05 Govern across weeks and ongoing, with tasks in categories Evidence Artefacts, Design UI+UX, Engineering Front-End, Technology Tools, Backstage Internal, and Support Enablers.

Service blueprint mapping the full design system rollout — from initial audit through to governance — across design, engineering, technology and stakeholder layers.

PROTOTYPING

Rebuilt core primitives in Figma using tokenised colour, type and spacing, then mapped these directly to coded equivalents in React and Storybook. High-use components were prioritised and tested in real product contexts rather than abstract demos.

Worked in rapid feedback loops with front-end engineers. Where designs didn't translate cleanly, patterns were adjusted. This phase proved out naming conventions, component APIs and documentation style before broader rollout. By the time the system shipped, the friction points had already been found and resolved.

IMPLEMENTATION

The system shipped as a unified Figma library paired with a coded component library, with parity maintained through shared tokens and semantic versioning. Every core component was built to WCAG 2.1 AA standards—accessibility handled at system level, not checked project by project.

Wrote documentation covering usage, accessibility requirements and contribution paths. Reduced reliance on tribal knowledge. Supported adoption through onboarding sessions, office hours and direct collaboration with product teams during integration.

Design Tokens Collections table showing primitives with navy color swatches, related colour text states, light and dark themes, and typography styles with sizes for desktop, tablet, and mobile.

Token foundations — primitive colour scale, semantic light and dark colour mappings, and a responsive typography scale across desktop, tablet and mobile breakpoints.

Diagram showing semantic design tokens with primitive colour circles mapped to semantic roles and their application on a webpage example about an active savings account.

How primitive values map to semantic tokens and resolve in the final interface — giving teams meaningful names instead of raw hex values.

Diagram showing component tokens for HL A and HL B buttons with color, text, padding, and radius attributes, plus spacing and corner radius tokens divided into primitive, semantic, and component categories.

The same component consuming the same semantic tokens but resolving differently across brand themes — proving the system's flexibility without duplication.

THE OUTCOME

RESULTS

The design system consolidated multiple fragmented libraries into a single shared platform adopted across product teams. Where teams had previously maintained their own component variations—often duplicating the same patterns with subtle inconsistencies—the system introduced one authoritative Figma library and one coded component library, kept in sync through shared tokens and versioning.

The practical impact was felt across the design-to-engineering workflow. Handover shifted from annotated static screens to documented, tokenised components with clear usage guidelines and accessibility requirements built in. Engineers spent less time interpreting design intent. Designers spent less time recreating solved patterns. Both spent more time on product-level problems.

Accessibility moved from reactive remediation to structural default. Every core component met WCAG 2.1 AA standards. Teams could trust that compliance was handled at the system level rather than audited project by project.
‍
The system serves 1.7 million users across web, mobile and native apps—not as a finished product, but as living infrastructure that teams adopt incrementally, contribute to, and trust to hold as the platform scales.