Case study · contracted via Rethink

Vivo Energy — the system that gave developers their time back

Vivo Energy's B2B extranet is where franchise partners order fuel, chemicals, and gas. In fuel distribution, order timing feeds supply, so those orders are time-sensitive. The platform had grown into something the business worked around rather than with. I came in contracted to the development team via Rethink. The real problem sat under the screens, in the substrate the team was building on.

The team had no design system. Every developer was making design calls alone, in the moment, sprint after sprint. Nobody was doing anything wrong. There was simply no source of truth to be right against.

So the codebase filled with parallel versions of the same component. Each one a reasonable local decision, collectively a maintenance burden nobody had chosen. Every new feature meant reinventing patterns that already lived somewhere else in the platform. And every inconsistency shipped straight to the people using it.

The clearest place it showed was online ordering. Clients ordering fuel, chemicals, and gas worked through a checkout with a confusing step structure, validation that behaved differently from one field to the next, pricing summaries that were hard to trust, and contrast that had never been held to any standard.

Each of these sounds small. Stack them up and they raised the cognitive load of a routine task until accurate order completion became the exception. Orders came through with errors or half-finished, and customer service reps stepped in to complete them by hand. A checkout that needs human rescue in a supply chain is a business continuity problem wearing a UI costume.

The intervention was deliberately unglamorous. Before any screens, I ran workshops with the internal teams to map how the business actually operated: 9 distinct personas, from customer service consultants to franchise partners, each with their own permissions and priorities.

Then the foundations. A colour system, a typography hierarchy, contrast held to WCAG AA. Then a reusable component library: 20 components, formalised page patterns, standardised validation and feedback. And a delivery rhythm to carry it, with designs finished 2 weeks ahead of each development sprint so engineering never started a feature from ambiguity.

What changed is worth being precise about. With one source of truth, developers stopped making design calls in silos. The call was already made, once, in the system. UI defects per feature dropped, because most of those defects had been born in the gaps between one developer's guess and another's. Fewer defects meant less rework. And rework is where the headline number came from: a 60 per cent saving in development time. The defects were the mechanism. The time was the outcome.

Alongside it, the rebuilt ordering flow gave clients a checkout they could finish accurately without help: clear steps, consistent validation, pricing you could actually read. The platform reached 224 screens across 8 feature areas without the inconsistency creeping back.

For the Technical Officer, the value had a particular shape. When the business asked what changed, he could point at something concrete: a number, a mechanism, and a team shipping faster because the substrate under them held.

That's what a design system is for. It's the difference between a development team that bleeds its velocity into rework and one that compounds it. And it's measurable.

If your team is shipping without a source of truth, the Diagnostic is where we start.

Get in touch