top of page

Design system overhaul

Improving a legacy design system through accessibility standards, collaboration, and clearer governance.

Quick overview

  • Role: UX Lead

  • Company: John Lewis

  • Timeline: 2023 - 2024

  • Tools: Figma, Miro, Zeroheight, Dovetail, Contentsquare, HTML/CSS, Accessibility testing tools

  • Impact: 

    • Established WCAG AA compliance across all components

    • Improved documentation and contribution processes

    • Reduced dev time with consistent, trusted design resources

Situation

As UX Lead for the Design System team at John Lewis, I inherited an outdated design system suffering from poor documentation, unclear governance, and inconsistent standards, ultimately undermining accessibility and design consistency across digital products.

Task

My goal was to assess the system's current state, engage stakeholders across teams, and implement scalable improvements to ensure accessible, well-documented components that support high-quality, interactive user experiences.

Action

  • Conducted cross-disciplinary stakeholder interviews to understand pain points and surface key user needs.

  • Used affinity mapping to synthesise feedback and prioritise improvements to the component and pattern library.

  • Collaborated with engineers to address accessibility challenges in legacy components.

  • Facilitated design workshops to co-create better processes and explore contribution model improvements.

  • Benchmarked against leading systems (e.g. GOV.UK Design System) to strengthen accessibility and governance.

  • Developed and rolled out a new contribution model with clear documentation and minimum accessibility standards.

  • Partnered with the Accessibility Champions working group to validate new guidance and ensure messaging consistency.

  • Engaged product teams throughout to gather continuous user feedback and promote adoption.

Affinity maps of stakeholder interview responses

Affinity maps of stakeholder feedback

Results from tree testing a different IA

Results from tree testing different IA structures

Lab testing of the site pre launch

Lab testing of the site pre launch

Result

  • Established WCAG AA compliance as a non-negotiable standard across all components.

  • Shifted accessibility from a reactive check to a core design system principle.

  • Reduced development time and increased confidence through better-documented components.

  • Built a trusted system adopted across the wider John Lewis Partnership, improving product consistency and scalability.

Slide showing a list of features and content that were part of the MVP design system website launch
bottom of page