Work

# Vodafone Neo

Many product teams were each building their own UI, so brand and accessibility had drifted apart. I came in as the first engineer on a team of designers, and built one system with them, joining Figma to code: the tokens, a React component library and the documentation.

![Neo components floating on a red background: a data plan with 12.4 GB left, a countdown to the end of a weekend deal, quick-settings toggles, a card for a new phone and a payment notice](https://phil.dev/_astro/vodafone-neo-components.B1zB5D7u_hSLhI.webp?dpl=dpl_H5ZkMXUNhuvtnV4YMXoB4Kq3xvDS)

Neo’s own components, in the tour of the system I built for teams deciding whether to use it.

## Problem

Vodafone’s product teams were building their own UI, each doing good work with what it had. Side by side, though, the brand looked different from one product to the next, and accessibility, which Vodafone has to meet by law as well as by choice, rested on each team getting it right alone. One shared system could fix both, if it cost those teams less than building their own. The designers and I had to show that it would before any product team gave it their time.

## Decision

The tokens are the one source design and code share. They’re pulled from where the designers define them, and every platform’s are built from them, so a change in design reaches code as a change someone can review. The React components and their documentation sit on top, and Code Connect shows an engineer looking at a design which component to use, props and all. New components start in a labs tier, so a team can try one early, knowing it may still change. I started a record of the decisions, and the team adds each one as it’s made. And every rule a change is reviewed against says who checks it: CI, an agent or a person.

![The same card twice, headed “Find your phone, whichever room it’s in”, on a light background and on a dark one. Its illustration, a red figure in a small room with a phone ringing above them, is drawn white in the first and dark grey in the second](https://phil.dev/_astro/vodafone-neo-light-and-dark.B3P1uANl_1LiRVG.webp?dpl=dpl_H5ZkMXUNhuvtnV4YMXoB4Kq3xvDS)

A card from a marketing page in the tour, in light and in dark: its illustration changes with the mode, as the rest of it does.

## What changed

Neo’s packages are released one by one to a private feed at Vodafone, so a team that needs only the tokens can take them without the components. Automated accessibility checks run on the components’ documented examples, and a failing check stops a change from merging. Each component also describes itself in a form an agent can read, so a team’s agents can build from the same system its engineers do. Getting teams to use Neo is the part still going, and the one that matters most. Whatever gets in the way of a team trying it is what I work on next.

![A red banner headed “Full fibre that keeps up with everyone”, beside a photograph of a living room, outlined in a dashed red line and labelled “Banner · labs”](https://phil.dev/_astro/vodafone-neo-xray.D66mXtXA_1u3rk.webp?dpl=dpl_H5ZkMXUNhuvtnV4YMXoB4Kq3xvDS)

The banner of a marketing page in the tour, made of Neo’s components alone. X-ray is on, and outlines it as one of them, still in labs.

![Two phones from the Neo showcase showing the same My Vodafone screen: one in English on a light background, the other in Arabic on a dark one, its layout mirrored to read right to left.](https://phil.dev/showreel/vodafone-neo/still-2026-09-27.webp)

## Say hello

Email [hello@phil.dev](mailto:hello@phil.dev). I read everything that isn’t a sales pitch.

[LinkedIn](https://www.linkedin.com/in/frontendphil) · [Bluesky](https://bsky.app/profile/phil.dev) · [RSS](https://phil.dev/rss.xml)