From custom UI to a system the whole company designs with

Within weeks of coming back, I wrote a business case. The product had moved from Looker to its own React app and was learning fast, with new navigation, filtering, insights and reporting on the way. But with no design tokens, every one of those features added design and front-end debt, and design and engineering were losing about a day and a half a week to UI reviews over colours and spacing.

I argued that tokens would give designers and engineers a shared language, let us improve the product by changing a handful of values instead of hundreds of screens, and free reviews up for customer problems. To build the bridge between design and code properly, I brought in Rich Hallows, a design systems specialist and my co-founder at Kindly, the web agency we set up together. He'd built systems for Barnardo's and the Evening Standard and created Stylelint, a CSS linter downloaded millions of times a month.

After researching the options, we chose Shopify's Polaris over building our own. Many of our customers run their stores on Shopify, so its patterns were already familiar to them. Polaris also gave us foundations, design and content guidance, patterns, components and tokens on day one, so we could save our own effort for problems unique to Fospha.

The first release on Polaris was an instant step up: consistent filters, cards and controls across the product, and a customisable dashboard customers could shape around their own targets.

Engineers hadn't worked with a design system before, so I trained them bit by bit, often co-coding to show which component to reach for, which props to use, and why. I wrote it down as a user interface playbook built on three principles:

• Shared language: one set of foundations, tokens, components and patterns
• Shared source of truth: code, not Figma, with designers owning the coded tokens and components
• Shared platform: everything grounded in the web platform

Stylelint and the Polaris plugin acted as a safety net, flagging hard-coded values and missing layout components. Custom components lived in Storybook, with Chromatic for design review, visual regression and accessibility testing, and Lighthouse to keep the product fast.

We worked in product trios and used Teresa Torres' continuous discovery approach to decide what to work on next. Polaris made that faster. AI tools could generate disposable prototypes that already followed Polaris patterns and principles, so we could put realistic ideas in front of customers in days and test more of them.

Only once an idea had been validated through research, release and product analytics did we build something custom: semantic tokens made from Polaris primitives, and our own components, like charts, where Polaris didn't cover our needs. Analytics v2 was organised around customers' jobs to be done: reporting, planning and benchmarking.

Next, the rest of the business needed the same consistency without waiting on design. I built a Claude design system with Claude Code and deployed it as an internal web app on Vercel, iterating on it as teams used it. Colleagues could now:

• spin up several variants of a sales deck instead of commissioning a bespoke PowerPoint
• build partner dashboards that showed the platform's value
• create 3D renders, which we used for our stand at ShopTalk

Most importantly, the system underpinned a full redesign of the website. I wireframed the homepage as an interactive prototype, with notes on every section for the Webflow build: a hero that tells the story in three beats, stats that count up as you scroll, sticky storyboards for each of the four product suites, and a section walking through a marketer's week. All the homepage animations were made with the system in Claude.

We also moved our reports out of Canva and onto the website as proper pages, so search engines and AI assistants can find and cite them. A structural template keeps every report consistent: one clear headline, a single key stat, findings in a repeating pattern, and a clear next step.

My first stint was much earlier. Fospha had just acquired the analytics company iJento and was still finding its market. I worked with data scientists to turn large volumes of client data into product, and interviews and paper prototypes with marketing managers pointed us at multi-channel attribution as the problem worth solving.