OTB Studio
All work

National B2B · Client work

Optimus Coffee & Vending

Optimus supplies coffee machines, vending and water systems to workplaces across the UK, with 25 years of trading and more than 500 clients behind them. The brief was to turn that established offline reputation into a site that generates qualified enquiries.

DesignBuildLead-generation UXTransactional email
Next.js 14Tailwind CSS 4shadcn/uiResend
Visit the live site

The brief

B2B buyers researching workplace coffee do not want a hard sell. They want to work out, quickly, which of a large product range fits their office, gym or hospital, and then talk to a person. The site is structured entirely around that journey.

Every sector Optimus serves (offices, hospitality, healthcare, education, fitness, manufacturing) gets its own landing page, and every path ends at a low-friction enquiry.

What I built

  • A guided solution-finder quiz: a stepped modal that asks a few questions about the workplace and recommends the right setup, ending in a quote request
  • Sector landing pages with tailored content, imagery and trust signals for six industries
  • A product catalogue covering coffee machines, vending and water systems, fed by manufacturer imagery
  • A four-step engagement process section (consult, design, install, support) that sets expectations before the first call
  • Enquiry and specialist call-back forms delivered over Resend with validation and spam protection

From the live build · rebuilt for this page

1 / 3

Where will the machines live?

A condensed, working demo of the production solution-finder. The real one asks more questions and ends in a live quote request.

From the live build · rebuilt for this page

1

Consult

Understand the workplace and the people in it.

2

Design

Specify the right machines and layout.

3

Install

Fitted, tested and ready to pour.

4

Support

Servicing, restocking and a direct line.

The four-step engagement strip rebuilt from the production codebase, in the Optimus palette and type.

Details that mattered

Warmth without losing the corporate spine

Bitter serif headings against clean neutrals, and shadows tinted with the brand orange, keep a large B2B catalogue feeling human.

The quiz is a small product in itself

A self-contained state machine with staggered slide transitions, focus trapping and keyboard handling, so it feels considered rather than bolted on.

Motion that respects the visitor

Staggered entrances and hover states run on GPU-friendly transforms, and every animation is disabled for visitors who prefer reduced motion.

The outcome

Placeholder · outcomes
Real, factual outcomes for Optimus go here once Oliver supplies them: enquiry volumes, performance scores, search visibility, cost savings. Nothing invented.
Placeholder · client quote
A real quote from Optimus, with their permission, goes here.

Want something built like this?

Every project starts with a conversation about your business, not a sales call.

Start a conversation