Multi-Brand Design System & Component Library

Design Operations

UI Design

Accessibility

Role:

Design Operations

Rapid Prototyping:
Designers can now spin up new product interfaces or brand themes in minutes using Figma variables.

Code Alignment:
Set the foundation for a unified design-to-code pipeline that will drastically reduce development cycles and enforce consistent accessibility standards across all production apps.

Objective

HDR UK’s suite of digital products was built across three separate design libraries. This fragmented setup caused visual inconsistencies, raised accessibility concerns, and created significant maintenance overhead for the design team. Furthermore, with future plans to integrate user journeys across different platforms, the lack of a shared design language risked a disjointed experience for researchers and data custodians.

System Architecture & Refactoring
Co-led the refactoring of the design system in Figma, replacing duplicate components with a streamlined library powered by variables and modes. This allowed a single component structure to instantly adapt to different product visual identities.

Advocating for Technical Resource
Pushed management to secure dedicated engineering resource, bridging the gap between design and front-end development.

Pioneering Dev-Design Integration
Initiated plans to translate the library into coded components, actively exploring Code Connect and AI tooling (such as Claude) to automate the translation from Figma tokens to clean front-end code.

‍