Standardising engineering and design practice across 15+ products with a Design System for LloydsDirect
Leading on design language, component architecture, and developer tooling alongside brand design leadership, I set out to solve a problem that's all too familiar: a fast-growing product suite with dozens of applications, each doing its own thing with buttons, forms, and "brand blue." The challenge wasn't just creating beautiful, consistent components. It was building something teams would actually adopt without forced migration or big-bang rewrites. A system that bridged the gap between design and engineering, serving both users of our internal tooling and our (at times vulnerable) patients managing their health.
What we inherited
LloydsDirect had grown fast. Over 15 products, each with its own visual patterns, duplicated components, and slightly different design patterns for similar functionality. Every new feature meant building from scratch. Accessibility was inconsistent. Designers and engineers worked in parallel rather than together, and handoffs required constant clarification.
Building a shared language
I started with design tokens: the atomic layer of truth for colour, spacing, typography, and motion. Everything flowed from there. Want dark mode? Swap the token set. White-labelling for a partner? Same deal. No more hunting through stylesheets or Figma files to find hex codes.
One system, two worlds
Just to add to the complexity, the system needed to serve 15+ internal tools and a suite of patient-facing products (mobile app, web app, marketing sites). These have fundamentally different needs.
Internal tools are built for speed and density. Support agents and pharmacists need to scan a lot of information quickly, toggle between tasks, and complete workflows in as few clicks as possible. Power users tolerate complexity if it saves them time. Polish matters less than function.
Patient-facing products are a different beast entirely. Patients managing their prescriptions are often anxious, sometimes unwell, and definitely not power users. The interface needs to feel calm, trustworthy, and effortlessly clear. Accessibility is non-negotiable. Every interaction has to earn confidence.
The temptation is to build two separate systems. We didn't. Instead, we built a single component architecture with theming baked in at the token level. The same Button, the same Modal, the same Form. But internal tools get denser spacing, smaller type, and a more utilitarian palette. Patient products get generous whitespace, larger touch targets, and a warmer, more reassuring tone.
One codebase. One maintenance process. One shared language between designers and engineers. But styling that flexes to meet users where they are.
On top of this foundation, we built:
- A component library covering both internal tooling and patient-facing apps, all accessibility-tested and production-ready
- A pattern library with best-practice solutions for forms, navigation, data display, and error handling
- Figma libraries fully synced to code, so designers and engineers always worked from the same source of truth
Making it stick
A design system nobody uses is just a fancy document. We invested heavily in adoption:
- Linting and formatters to catch deviations before they hit code review
- IDE documentation so engineers could see usage examples without leaving their editor
- Scaffolding tools to spin up new components in seconds, already wired up to tokens and patterns
Critically, the system was fully backwards compatible. Teams could adopt it incrementally, without big-bang rewrites or blocking sprints. This made the difference between a system that ships and one that sits on a shelf.
What changed
Development cycles got faster. Consistency improved across the board. Accessibility compliance went from "we'll get to it" to baked-in by default. Designers and engineers started speaking the same language, and handoffs became almost frictionless.
We rolled out across all 15+ products without a single rewrite, and adoption happened organically because the system made everyone's job easier, not harder.