Orders Made Simple.B2B SaaS marketing site redesign, hand-built in HubSpot

Solo: design & build · 2025 to 2026

Orders Made Simple is an hospitality procurement platform and their marketing website drifted from their original look and feel. Years of small edits had eroded the brand down until the site did not look as polished as it once did. I rebuilt it as a design system, so the next round of edits will fit easily in the design.

OMS helps restaurants, pubs, cafés and multi-site operators to do manage things easily. I worked for them as a software developer while I was in university and I also was their acting designer from 2021 to 2023, which meant I already knew the visual language the site had drifted away from. I offered Stephen to rebuild the site to adapt the old look and feel to a modern design.

The Orders Made Simple logo: the words Orders Made Simple in white on a lime green field, with Simple reversed out inside a white speech bubble
The brand the site had drifted away from: lime green, rounded type and the speech bubble.
The rebuilt homepage on desktop: a three-item navigation, the headline Restaurant ordering software that saves time and protects your margins with saves time and protects your margins in pink, an explanatory paragraph, two buttons, the figures 35h+ saved per month, 100% existing suppliers kept and 1 platform for everything, and a strip of customer logos
The homepage rebuilt: bold and clean with the product as the main focus point.
01

Outcomes

2
Pages holding the most vital information, making it easy for client to navigate and find what they need
5 to 3
Top-level nav items simplifying the navigation.
2 yrs
On the team before the rebuild, so the original DNA was not guesswork
02

Before & after

Nothing here failed all at once. The site was updated steadily for years, and each change was reasonable on its own: a heading in title case, another nav item, a stock photo to fill a gap, a gradient to make a section feel branded. The result was a site that said the right things while looking like anyone else's.

Before: the site as it stood
The old homepage: five navigation items across the top, the headline Save 35+ Hours Per Month On Restaurant Supplier Management in title case with an exclamation mark, a second heading below it, a bulleted feature list and a phone screenshot, all over a lime green gradient that fills the page
The old homepage: two stacked headings, a bulleted list of features, and a green gradient doing the work a palette should do.
The old How OMS Works page: the heading How Orders Made Simple Works above Run your kitchen. Not your inbox., three paragraphs of explanation, and a stock photograph of a chef in whites holding a phone, over the same lime green gradient
The old How OMS Works page. The explanation existed, but stock photography and the same gradient made it look like anyone's SaaS site.
After: the rebuild
The rebuilt homepage on a phone: an illustrated handset running the OMS app above the headline Restaurant ordering software that saves time and protects your margins, a short explainer, and Book a demo and Get OMS Lite buttons
One claim, in sentence case, with the explanation immediately under it and the brand carried by type and illustration instead of a gradient.
  • Navigation: five top-level items three, with pricing, suppliers and insights moved into the footer
  • Voice: Title Case And Exclamation Marks sentence case, opening on what the product actually is
  • Look: a full-bleed green gradient and stock photography a palette, type scale and spacing defined once and reused everywhere
03

The HubSpot rebuild

The brief was not "make it prettier", it was make it theirs again, and make it stay that way. So the work was less about drawing pages and more about deciding where the identity should live. It now lives in a small set of CSS custom properties that every section reads from, hand-written and injected into a HubSpot template so marketing keeps the CMS it already knows.

Orders Made Simple / mobile flow
Home
The rebuilt homepage on a phone: an illustrated handset running the OMS app above the headline Restaurant ordering software that saves time and protects your margins, a short explainer, and Book a demo and Get OMS Lite buttons over the three stat figures
The claim, then the proof
How it works
The How it Works page on a phone: the heading How OMS simplifies supplier ordering, invoices and cost control for hospitality, two buttons, and a line-drawn illustration of a commercial kitchen in the brand's lime green
One page, four steps
Signup
The signup form on a phone: company name, role and locations selects, an email field and a consent checkbox above a Send button that stays disabled, with the hint Tick the box above to continue, followed by the round feature icons
Posted straight to the API
Arrive on the claim, get the four-step explanation, then a signup form that looks like the rest of the site instead of like an embedded widget.
The How it Works page on desktop: the heading How OMS simplifies supplier ordering, invoices and cost control for hospitality with three phrases in pink, a short explainer, Book a demo and Get OMS Lite buttons, and a wide line-drawn illustration of a commercial kitchen with lime green units and pendant lights
The same page, rewritten. It opens on the problem in the reader's own words, then answers it in four numbered steps rather than three paragraphs beside a stock photo.
A section headed Key Benefits of OMS with six outlined cards in two rows: Time saving, Cost Control, Simplified Stock Takes, Better Supplier Relationships, Proven Industry Experience and Accounting Integration, each with a line icon and a short description
Six cards, one card component. Spacing, radius, border and type all come from the same tokens, which is why the grid holds together.

The brand rebuilt as tokens, not pages

The identity lives in 39 CSS custom properties: the palette, a full type scale, a nine-step spacing scale and a set of radii. Every section reads from them, so the look is defined in one place rather than re-decided page by page. That is the part meant to outlast me.

HubSpot as a shell, not a page builder

The markup, styles and behaviour are hand-written and injected into a HubSpot template. No drag-and-drop modules, no marketplace theme, no framework and no UI library. Marketing keeps the CMS it already knows, and the pages stop looking like everyone else's.

Forms that match the site around them

The signup posts straight to the HubSpot Forms API with a hand-written fetch rather than embedding HubSpot's own form widget, so the fields inherit the same tokens as everything else. The submit button stays disabled until consent is ticked, and says so.

Also in the build: a nine-step spacing scale rather than ad-hoc margins, hand-named form fields and hints wired to their inputs, and line-drawn illustrations in the brand palette instead of stock photography.

StackHubSpot CMSVanilla JavaScriptCSS custom propertiesHubSpot Forms APIFigma
04

Results

  • The identity is recoverable: it is written down as tokens rather than spread across pages, so a future edit changes a value instead of eroding a look.
  • The explanation has a shape: How it Works went from paragraphs beside a stock photo to four numbered steps, each ending in the words a customer would actually search for.
  • The forms stopped looking borrowed: posting to the API rather than embedding a widget means the signup inherits the same type, spacing and colour as everything around it.

“If you're looking for a good developer, Victor is genuinely a pleasure to work with. Super sharp, picks up new things fast. He's a real problem-solver who approaches every challenge with a clear head. His strengths are communication and organisation.”

Stephen S., Orders Made Simple
05

Reflection

What worked

  • Treating drift as the real problem: the brief was a redesign, but the thing that had actually failed was that the identity had nowhere to live. Tokens fix that, a new layout would not have.
  • Having been on the inside: two years on the team meant I was restoring a visual language I already knew rather than reverse-engineering one from old screenshots.

What I'd improve

  • Hand-written code is awkward to hand over: marketing can edit copy, but building a new page in the same language still comes back to me. Turning the token system into real HubSpot modules is the obvious next step.
  • Two pages is not a site: Home and How it Works set the language, and the rest of the site has yet to be brought over to it.

More work

Sujin Kim · React 19

A designer's portfolio built as a gallery

Three rooms instead of pages, a career archive walked one scroll per year, and a hero of canvas particles that scatter under the cursor.

L.M. Douglas · Vue 3

A two-book site grown into an author platform

An interactive realm map, a status-tagged catalogue and a free-novella funnel, built in Vue 3 for a fantasy saga.

The Orchard Bar · React + TypeScript

A dated WordPress site rebuilt in React

Online booking, self-updating seasonal menus and a design that matches the venue, for a client retained since 2020.

See all work →

Need something similar?

If your site has drifted away from your brand, that is usually a systems problem rather than a design one. Happy to talk it through.

Visit live site ↗Book a call ↗
← Back to all work

We use cookies & Pendo to monitor traffic anonymously, improve experience, and understand usage.

Let's connect