- Project
Feefo design system
- Role
- Lead product designer, partnered with engineering
- Stack
- Figma, design tokens, Storybook, WCAG 2.1 AA
- Year
- 2022–2024
- What I owned
- Audit, token model, component redesign, engineering collaboration, documentation, accessibility bar.
- What I shipped
- Tokenised system, 50+ redesigned components, Storybook library, documentation in Figma Dev Mode. 40% faster component work, 95% consistency, full team adoption.
Overview
Feefo’s products had grown without a shared system. I led the rebuild so designers and engineers had one source of truth, not a UI kit for a slide.
The problem
Components disagreed across products. Tokens had no naming convention. Handoff was slow enough that engineering rebuilt the same UI twice.
The process
Stakeholder interviews and an audit first. Then semantic names, responsive variants, and tokens for colour, type, space, and elevation mirrored in code. Weekly engineering syncs. Storybook was where implementation was judged. Internal teams tested whether the pieces were actually usable. Accessibility was a requirement on the components, not a later pass.
Measuring success
Component work 40% faster (target 30%). 95% consistency across products. Full team adoption. WCAG 2.1 AA on the components.
Outcomes
More than 50 redesigned components, a token model, a Storybook library, and documentation in Figma Dev Mode. Duplicate work dropped because there was finally one place to look.