All work

ESB

ESB - Design System Refactoring

Leading a global design system initiative, consolidating fragmented multi-product systems into one scalable platform.

ESB design system migration case study hero image
  • Unified Platform Consolidated multiple fragmented systems into one
  • AI Powered CMS Using Figma Make & Claude Code
  • Multi-Platform Plan Multiple route plan to achieve the same goals on all platforms
  • Team Alignment Unification of the team around defined goals

The Brief

Context

ESB brought me back a second time, recruited through TCS, to lead a new global design system initiative while their permanent designers were on leave. The brief was to take several fragmented, multi-product systems and to rebuild, reimagine, and redesign a new unified system.

Read the detail

Responsibilities

  • Own and lead design for a new global design system initiative.
  • Consolidate fragmented multi-product systems into a single platform.
  • Plan the migration away from the legacy platforms.

I had worked with ESB once before, six years earlier, training their design team on Figma and design-system standards. That history mattered here: it meant I already understood how the team worked and could move quickly on a short contract.

Discovery

Review & audit

Before proposing anything, I reviewed ESB's current systems, documenting every piece of content across current and legacy platforms to work out what to keep, what to scrap and what to merge.

  • Documented all content held on the legacy systems.
  • Scored each item for relevancy and flagged duplicate or conflicting content.
  • Built a unified sitemap and a high-level overview for stakeholders.
Read the detail

Fragmented systems accumulate a lot of material that nobody has audited in years. Scoring content for relevancy, and marking where two systems contradicted each other, turned a vague sense of "there is too much of this" into a concrete inventory people could make decisions against. The unified sitemap became the reference point for everything that followed. It gave the team a single view of what exists, what overlaps and what can be retired, and it gave the workshops something specific to react to rather than abstractions.

Three-stage diagram showing fragmented legacy systems on the left, each content item scored as keep, conflict, duplicate or retire in the middle, and a unified design system sitemap on the right
Fragmented systems in, one structure out: every item documented, scored and reconciled.

Process Mapping

Mapping build effort

ESB required multiple solutions to be explored across the different platforms they could utilise. To illustrate complexity and effort, I mapped the process end to end: how each platform option would be built.

  • Mapped the build process across each platform option, step by step.
  • Documented how a new component enters the system.
  • Documented how an existing component gets updated.
Read the detail

By mapping out the actual steps for each route, I could illustrate the trade-offs: the quick but limited routes, versus the more complex but powerful ones. These build flows were backed up by other documents exploring the pros and cons in much more detail, which I delivered via presentations.

Process flow mapping four delivery routes for building the new design system, Figma Prototype, SharePoint, Figma Make and AI Agent, with every step each route requires colour coded by platform
The build process, mapped across each platform option. Scroll to follow a route end to end.

Proof of Concept

AI built CMS design system

Using Figma Make and Claude Code AI agents, I built a working proof of concept web app, which acts as a WYSIWYG interface that designers could use to build their own easy-to-update platform.

  • Explored AI tools via Figma Make, Claude Code and Copilot to develop working web apps.
  • Built a working WYSIWYG web app for designers to compose their own systems.
  • Delivered a proof of concept framework for each viable path.
Read the detail

Choosing a platform for a design system is usually a long, theoretical debate. Building something runnable for each candidate route changed that conversation: stakeholders could try the options instead of imagining them, and the trade-offs became obvious quickly. The WYSIWYG app was the most ambitious of these. Built with AI tooling, it gave designers a direct way to assemble and customise a system themselves, which is a very different proposition to handing them a static library to request changes against.

The WYSIWYG design system editor, letting designers build and customise their own system
Starting by building wireframe designs, I fed these into Figma Make, then migrated the product to Claude Code.
Side by side comparison of the Accordion component documentation page, shown first as a greyscale wireframe and then as the finished ESB-branded interface with Design, Implementation and Accessibility tabs
Wireframe to finished product

Systems

One system to rule them all

With a route chosen, I consolidated the fragmented systems into a single proof of concept for each platform (polished custom web app below), built so it could scale across ESB's multiple products rather than serve just one.

  • Analysed and consolidated multiple multi-product design systems.
  • Delivered an all-purpose tool, focused on flexibility and customisability
  • Laid foundations designed to scale as the product portfolio grows.
Read the detail

The consolidation had to account for products with genuinely different needs, so the aim was a shared foundation with room to vary, not a single rigid template. Getting that balance right early is what makes a system survive contact with more than one product team.

Getting Started - Introduction page of the design system, explaining what it is and its objectives
A selection of screens from the proof of concept platform. Scroll each screen, or use the arrows to move between them.

Alignment

Getting everyone heard

Goals only work if the people living with it agree on the outcomes. I ran interviews across disciplines, including Dev, Product Owners, Brand and Marketing. With regular workshops with the design, I was able to let them feel involved with every big decision in order to facilitate their needs.

  • Interviewed stakeholders across branding, design, development and product.
  • Hosted regular workshops so every team member could contribute.
  • Synthesised the findings into a high-level overview for decision makers.
Read the detail

Conducting workshops and hosting individual interviews surfaced tensions that would otherwise have shown up much later. The workshops then put those views in the same room. Running them regularly, rather than as a single kickoff, meant the direction was built with the team instead of presented to them.

Impact

Outcome

A short contract, but a massive amount done, that ended with ESB aligned on goals and equipped with clear paths forward via research to strategise from, MVP deliverables to refine, and foundations ready to scale.

  • Unified the team around a clear consensus and path forward, giving them a solid framework to utilise when scope is available.
  • Collected a large body of research and analysis documentation for the design team to reference and strategise from.
  • Developed a collection of comprehensive MVP deliverables as starting points for future refinement.
  • Built the foundations for a flexible system that will scale with the client's needs across their multiple products.