Digital experience / Website refresh brief

Meb & Sons refresh

Why it changed, what is better and how to try it yourself

Prepared for
Meb & Sons
Prepared by
Shaan Designs
Date
13 November 2026
Stage
Refresh for review
Compare the sites

Confidential. This package is for the Meb & Sons team, so please keep the link to yourselves.

01Why refresh

A trade buyer decides in seconds. The site should earn the order in those seconds.

The project

Same business. A site that sells like one.

Meb & Sons supplies restaurants and takeaways across Birmingham. The refresh keeps the brand and the WordPress, Elementor and WooCommerce build, and rebuilds how each page looks, reads and works.

Client
Meb & Sons, wholesale food service, Birmingham
Site
mebsons.co.uk on WordPress, Elementor, WooCommerce and Astra
Audience
Restaurant, takeaway and caterer owners and the people who order for them
Goal
Make it quicker to trust Meb & Sons, find a product and place the next-day order
Scope of the refresh
  • Home, About, Featured products and Contact pages
  • Basket page and totals
  • One login and create account modal, and a refreshed checkout modal
  • A shop and browse direction, shown in the working prototype
What stays
Logo, orange and black brand, products, prices and the WooCommerce checkout engine
Shaan Designs · Meb & Sons · Refresh01 / 07

What was holding the old site back

Six problems, six answers.

These came from reviewing each page as a buyer would, then fixing what slowed them down.

01

It felt dated

Plain layouts and heavy black text blocks read as generic, not as a supplier to rely on.

BeforeFlat sections, little hierarchy
NowBold type, clear rhythm, brand orange used with purpose
02

The promise was buried

Order by noon, delivered tomorrow is the reason to choose Meb & Sons, and it was not leading.

BeforeGeneric welcome
NowOrder by noon, delivered tomorrow, in the first screen
03

Featured products were weak

The page that should sell the range was one of the least inviting on the site.

BeforeHard to scan, little to act on
NowClear cards with price, pack and add to basket
04

Basket and checkout felt unfinished

Totals and labels were hard to read, and the steps did not guide the buyer.

BeforeDefault WooCommerce look
NowReadable lines, clear totals, a guided checkout
05

Two ways to log in

An old login form and a newer modal sat side by side, which confuses a returning customer.

BeforeOld form plus modal
NowOne branded modal for login and create account
06

Weak on phones

Most kitchen owners order from a phone between jobs, so mobile has to be the main design.

BeforeDesktop first
NowDesigned phone first, tested with no sideways scroll
02Compare

Click through both versions and judge for yourself.

Interactive comparison

The current site, beside the refresh.

Pick a page, then scroll and click inside either window. Switch to phone width to see how each behaves on mobile. The refresh is a standalone working prototype with a basket, filters and checkout flow, using your real product names, prices and photos.

Loading…
Current siteOpen live ↗
mebsons.co.uk
RefreshOpen full screen ↗
refresh prototype
Good to know: the left window is the live website, so it can show pages that are being updated one at a time. The right window is a standalone prototype and changes nothing on the live site.
Shaan Designs · Meb & Sons · Refresh02 / 07
03Benefits

Better for the buyer, and better for the business.

Benefits and advantages

Who gains, and how.

These are design and usability benefits we can point to in the build. We have not invented sales figures, and results should be tracked once the refresh is live.

For your customers

Find it, trust it, order it.

  • The promise comes first. Order before noon and delivery tomorrow are visible straight away.
  • Faster to find products. Categories, filters and a grid or list view replace scrolling.
  • Reorder in fewer taps. An express order pad lets a buyer add several lines in one go.
  • Clear totals. Basket and checkout show what is being paid and when it arrives.
  • One simple login. A single modal for sign in and create account.
  • Works on a phone. Large tap targets and a layout built for small screens.

For Meb & Sons

A site that looks the part.

  • Stronger first impression. A bolder, more professional look to put beside bigger suppliers.
  • Fewer questions to the team. Cut-off time, delivery and contact details are answered on the page.
  • Built on what you own. Still WordPress, Elementor and WooCommerce, so nothing is locked in.
  • Easy to update. Content blocks can be edited in Elementor, and products stay in WooCommerce.
  • Consistent branding. One type system, one orange and one set of components across every page.
  • Room to grow. Rotating featured products and account tools can be added later.
Shaan Designs · Meb & Sons · Refresh03 / 07
04Functions

Every feature has a job: get the order placed.

What it does

Features, one by one.

Select a feature, then use the button to try it in the working prototype.

Shaan Designs · Meb & Sons · Refresh04 / 07
05Design

Your brand, turned up and used with discipline.

Design system

Colour, type and components.

The refresh keeps the Meb & Sons orange and black, and sets rules so every page feels like one company.

Meb orange#FF6A00 · actions, accents
Orange hover#E55F00 · hover state
Near black#0D0D0D · headers, panels
Charcoal#151515 · cards on dark
Warm light#F4F4F2 · page background
Headings · Barlow Semi Condensed
Order by noon.
Delivered tomorrow.
Uppercase, tight and confident. Built for fast reading.
Body · Inter
Kebabs, frozen foods, catering supplies and cleaning products for restaurants and takeaways, all from one supplier. Clear at small sizes and on a phone.
Next day deliveryOrder before noonLow minimums

Hover the buttons: the same states are used across the whole site.

Design principles

Four rules behind every page.

Promise first

The reason to order leads every key page.

One job per section

Each block does one thing, then hands over to the next.

Motion with meaning

Gentle GSAP reveals guide the eye. They switch off for anyone who prefers reduced motion, and the page works without them.

Phone first

Designed small, then widened. No sideways scrolling.

Shaan Designs · Meb & Sons · Refresh05 / 07
06Status

What is done, and what is left to decide.

Where we are

Built in pieces, page by page.

The refresh is applied to the WordPress site one block at a time, so each page can be checked before the next.

01

About, Home, Featured, Basket

Redesigned as Elementor HTML blocks with GSAP motion and a static fallback.

Built
02

Login, create account and checkout modal

Restyled on the live site, with one login route for customers.

Live
03

Contact page

Hero, contact cards, form styling, find us, FAQ and call to action.

Blocks ready
04

Shop and browse

Shown in the standalone prototype with categories, filters, grid and list. To be built into WooCommerce once approved.

For review
05

Checkout steps and real login test

Steps two to four of checkout and a real customer sign in still need a full test on the live site.

To test
06

Launch checks

Cache purge, page title tidy up, mobile and speed checks.

Planned
Shaan Designs · Meb & Sons · Refresh06 / 07
Shaan Designs

Ready to go live?

A few facts on the pages need your confirmation before we publish them as final. Tick them off as you go.

Please confirm

Ticks are saved in your browser only, as a personal checklist.

What happens next

  1. Review the comparisonClick through both versions and note anything you would change.
  2. Confirm the factsThe checklist on the left.
  3. We apply your feedbackUpdates go onto the live site page by page.
  4. Test end to endLogin, basket and every checkout step.
  5. Launch and reviewClear the cache, then track how buyers use it.

Back to comparisonOpen the refresh ↗

Shaan Designs · Birmingham

Shaan Designs · Meb & Sons · Refresh07 / 07