Notting Hill Bakery — Pickup ordering and wholesale lead generation for an artisan bakery

The Brief

Notting Hill Bakery — a London artisan bakery with thirty years of wholesale heritage and two retail shops on Westbourne Grove — needed a website that could do two things: let walk-in and local customers place pickup orders directly, and give prospective wholesale partners a clear, credible way to get in touch.

The Problem

The existing site was a single static page — little more than a shop address. It wasn't designed to drive sales in any direction. Retail customers had no way to browse the menu or reserve items ahead of a visit, and wholesale prospects found nothing to build trust or prompt them to enquire. The bakery's quality and reputation weren't coming through online at all.

The Approach

The primary design decision was to let the craft speak. Cormorant Garamond was chosen as the heading typeface — a serif with the warmth and weight that signals artisan quality without feeling dated. Jost handles body copy and UI labels: clean and legible, with just enough personality. Both are used consistently across the site to create a coherent, unhurried feel.

Brand colours from the bakery's existing identity were carried through faithfully, avoiding the temptation to redesign what didn't need redesigning. High-quality imagery was used throughout, but optimised through Next.js's built-in image pipeline so it never became a performance liability.

The site is structured around two distinct customer journeys — retail ordering and wholesale enquiry — each with its own clear path from landing to conversion.

The Build

Pages: Home, Menu, About, Find Us, Wholesale — each with its own metadata, Open Graph tags, and structured data for SEO.

Pickup ordering flow: Customers browse the menu, add items to a persistent cart (stored in localStorage so it survives a page refresh), then proceed through a slide-out drawer to a checkout modal. The modal collects pickup date (today or tomorrow), a time slot in 30-minute increments, name, phone, and optional notes. On submission, a unique reference code is generated (e.g. NHB-A4XK2P) for the customer to quote at the counter. Payment is taken on collection — no payment integration required, keeping the flow simple and frictionless.

Wholesale enquiry form: A structured form on the Wholesale page captures name, business name, email, phone, enquiry type (restaurant supply, corporate catering, wedding, etc.), estimated date, quantity, and a free-text message. Required fields are validated client-side before submission, and the form transitions to a confirmation state on success.

Analytics and compliance: Google Analytics 4 is integrated with Consent Mode v2 — analytics storage defaults to denied until the user accepts via the cookie banner, keeping the site GDPR-compliant out of the box.

SEO: Schema.org Bakery structured data is embedded in the root layout. A sitemap.ts and robots.ts are generated by Next.js at build time.

The Outcome

The site now gives Notting Hill Bakery two active revenue channels where there were none before. Retail customers can browse the full menu, build a basket, and lock in a pickup slot — reducing friction for regulars and capturing impulse orders from new visitors. Wholesale prospects land on a page that communicates the bakery's heritage and scale, then have a direct, low-friction route to make an enquiry.

The overall impression the site creates — unhurried, quality-led, consistent with the product — means a visitor's first contact with the brand online now matches what they'd find in the shop.

Stack Used

• Next.js 16 (App Router) — file-based routing, server components, built-in image optimisation, sitemap and robots generation
• React 19 with useReducer and Context API for cart state management
• TypeScript throughout
• Tailwind CSS v4 for utility-first styling
• Google Fonts — Cormorant Garamond (headings) + Jost (body/UI)
• Google Analytics 4 with Consent Mode v2 for GDPR-compliant analytics
• Vercel for deployment