Skip to content

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.

Read the transcript

Introducing Neo, our new approach to creating digital products for the AI era. We’ve always strived to create design systems that enhance customer experiences, drive consistency and help our people work more efficiently. Neo goes further. It reimagines both the experiences our customers see and the way we design and build at scale.

Neo introduces a more expressive digital language. It retains the strongest elements of the Vodafone brand while bringing greater depth, tactility and character through light and shadow, texture and materiality. Familiar at its core, yet unmistakably more modern. From everyday journeys to new propositions and different brands, Neo provides a single foundation from which we can create many different experiences.

But the biggest change is beneath the surface. Neo has been designed for agentic development. Design, engineering and agents now work from the same shared foundation, with components, standards, tokens and technical decisions providing the context and guardrails needed to build consistently across all platforms. That means faster development cycles, less rework and consistently high quality from the outset.

Neo is more than a design system. It is an operating system for digital product development. Built faster, built consistently, built for what comes now and what comes next.

On screen, under the narration: Neo’s components and the screens built from them, on phones, on the web and on a television; a chat with Vodafone’s AI; Design, Engineering and Agents joined to one foundation; Neo’s colour tokens, an architecture decision and code, for the web, Android, iOS and React Native; and Neo drawn as an operating system. It ends on Vodafone’s logo and “Together we can”.

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 — 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 — 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” — 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.

Phil has been an exceptional engineering partner in realising our vision for Neo, Vodafone’s next-generation global design system.
I’d wholeheartedly recommend Phil to any organisation looking for an engineering leader who connects technology, design and business strategy.

Ashton Snook, Head of Design & Research, Vodafone

Say hello

Email hello@phil.dev. I read everything that isn’t a sales pitch.