Scaling a shared UI foundation across Wetherspoon's internal product suite

Role

Lead Design System Owner (3+ years)

Platforms

Web (desktop) + Mobile apps

Used across

5+ internal products

Team

2 designers, 10+ engineers

The challenge

Wetherspoon operated a variety of internal tools — a mix of legacy systems and newly commissioned products — each built by different providers over the years. As our agency took on the work of replacing and expanding this suite, the interfaces were understandably inconsistent, and usability and accessibility varied widely. A shared design foundation was needed to bring coherence across scheduling, operations, HR, and employee-facing apps, and to ensure new products could be built quickly and consistently from the start.

My role

I've been the primary owner of the design system for the past three years. The foundations were originally created by a freelance designer, and my role has been to evolve and grow the system from there — introducing new components and rules, maintaining documentation in Figma, and working closely with engineering to ensure clean implementation.

The system now covers design tokens (type, colour, spacing, breakpoints), responsive layout rules and grids, reusable components and interaction patterns, and usage documentation. It's the shared foundation for mySchedule, myJDW, employee records, an admin tool (App Manager), authentication flows, and an upcoming pub auditing product (CQSMA). Engineers can also view real implemented components in-app, which supports consistent adoption across teams.

Foundation documentation from the design system

What I built

Beyond the core foundations, I've introduced components tailored specifically to JDW's operational workflows — patterns that allow teams to design sophisticated tools without reinventing interaction logic each time. Some highlights:

Dense data tables with filtering, bulk actions, and audit states
Calendar and rota grid systems for complex staff scheduling
Drag-and-drop and touch-friendly assignment patterns for shift management
Stats and performance cards for operational dashboards
An AI chatbot ("Daisy") widget, giving staff instant answers about their SOPs
Multi-state components to handle real-world complexity: permissions, statuses, role-based views

Rota components shown in context within JDW's scheduling tool

Daisy, JDW's AI chatbot, giving employees instant answers about their SOPs

Impact

The system has become the default foundation for new internal products, resulting in faster design and engineering delivery, fewer inconsistencies, reduced UI debt, and improved accessibility standards across the suite. What started as a single-product resource now underpins the entire internal app ecosystem.

Takeaway

A design system's value isn't the components — it's the shared language it creates between design and engineering, and the speed and confidence it gives teams building new products. This one has grown to do exactly that.

Back