Executive Summary
 

As testing velocity increased across CRO and product teams, we needed a better way to maintain quality and consistency.

​

I led the creation of Charles Tyrwhitt’s first design system — a scalable Figma library paired with Notion documentation. The system made it faster for designers to build test variants, easier to stay consistent, and gave the wider team access to reusable, responsive components.

The Challenge​

​

• No shared design standards across teams

• Duplicate components and inconsistent UI across pages

• High dependency on senior designers to build from scratch

• Slow handoff between design and dev

• Growing test roadmap with no scalable system in place

Discovery

​

I ran a series of audits and shadowing sessions:

• Identified friction in how tests were assembled and shared

• Flagged gaps in component reuse, responsiveness, and layout consistency

• Held collaborative sessions with other designers to define a structure that worked for our specific team — making the system tailored, realistic, and easy to adopt

These insights helped ensure the system wasn’t just technically complete, but also personalised to how we actually worked.

System Approach​

​

Foundations

​

• Centralised tokens: colour, spacing, type, grid, etc.

• Clear naming for desktop/mobile and hierarchy (e.g. H1DesktopBold)

• Iconography, border radius, and layout rules aligned across platforms

​

Components

​​

• Properties for device, state, mode (e.g. hover, active, dark)

• Prototyped flows for fully functional menus, selectors, nav, and PDP flows

​

Templates & Prototyping

​

• Drag-and-drop page templates (PDP, Basket, Checkout)

• Ready-to-test files with interactions built in (e.g. nav open/close, modals)

• Internal team could now run interactive usability tests directly from Figma

​

Documentation & Enablement

​

• Live Notion guide for importing, publishing, naming conventions, etc.

• Demo sessions with designers and CRO to encourage adoption

• Feedback loop for iterating components based on usage

Conclusion

 

The design system is now the backbone of all experimentation and design work at Charles Tyrwhitt. It sped up our workflow, reduced duplication, and helped unify design standards across teams — while remaining tailored to the way our designers actually work.

By including fully prototyped components, we also made usability testing faster and more realistic, allowing teams to validate ideas without extra overhead. What started as a library became a shared language — one that continues to support testing velocity, collaboration, and consistent UX at scale.