Clarks.

Clarks runs its UK sites, the main retail site, Originals and Outlet, plus a US B2B portal, built and maintained by separate scrum teams. There was a decent style guide but no design system, so every team was interpreting the brand for themselves and rebuilding the same components time and time again.

The B2B side was a different problem. The US business is predominantly wholesale, selling to big shopping chains and mum and pop stores through a portal Clarks owned. It worked but it was old and clunky, and the US team asked for a UX review with a very open brief. Part of why the brief was so open only became clear later. Few people in the UK really understood how the US business worked.

The design system

Getting a design system adopted is a people problem before a design one, so I started with workshops bringing brand designers, product designers and developers together to define what good looked like for Clarks and how the wider business would use it. The tooling was a deliberate choice. Figma was only just emerging and Sketch was still the standard, but more importantly Sketch gave us the control the vision needed, a system that non designers could use to make basic changes and designs themselves. Scaling and enabling, not gatekeeping.

The system shipped as shared Sketch libraries, incorporated into Storybook so design and development stayed matched, working omnichannel across the UK sites. It was basic but it was the foundations to build on. Forms were where we proved it, pairing directly with the developers, co-creating and building the new form components in a single sprint.

Alongside

Designs from wireframe to high fidelity, prototyping in sprint with the developers, and remote unmoderated user testing. And the 2020 digital roadmap, which the whole digital strategy hung off, crafted with the director responsible for digital technology and innovation.

The B2B portal

I ran a heuristic review of the portal first, highlighting the friction points and identifying the flows worth improving. But fixing flows for users nobody could describe felt backwards, so we built the picture. Remote workshops and stakeholder interviews with the US team, plus the analytics, produced four key personas for the groups actually using the wholesale platform, worked up and shared across the business. From there we ran empathy mapping sessions, identified the four highest value journeys and mapped each one in detail as a service design blueprint.

The design system was adopted by the design team and lives in Storybook matched to the dev components. The forms shipped from that single sprint. And the improved B2B flows were built, working from the blueprints, before the contract ended.

Then COVID. The majority of Clarks' UK revenue came from bricks and mortar stores rather than digital, and the business was already running on a rolling three month budget with a lot of contractors filling gaps. When the stores shut the contractors went, me included.

• The heuristic review found the friction but the personas and blueprints did the real work, getting the UK and US to a shared understanding of a wholesale business one side barely knew existed.
• The workshops mattered more than the Sketch file. Brand designers, product designers and developers defining the system together meant adoption wasn't a separate battle afterwards.
• Building the system so non designers could use it turned out to be the point. In a business run on a rolling three month budget and contractors, the work has to survive the people leaving.