Hank Marvins — takeaway ordering website design

Hank Marvins is a fictional takeaway in Seaham: kebabs, burgers, pizza, fish and chips, chicken and sides, for collection and delivery. Nobody commissioned it. I set the brief myself, and I set the hard version of it: not a menu page with a phone number, but a takeaway that takes its own orders, so the owner keeps the commission an ordering app would take, and the customer gets something that feels as quick as the apps.

That means the whole chain has to work: a menu people want to order from, options and meal deals priced correctly, delivery that knows which postcodes it covers, card payments, allergy information that can be trusted, and a screen in the kitchen where the orders actually land. It is built as a complete working system and runs in test mode, so every order placed on it is a clearly marked test order and no food is ever made.

The homepage opens on the Marvins Double, and as you scroll the burger comes apart: bun, sauce, patties, cheese and pickles separating in a burst of heat and then settling back. It is not a video. It is a sequence of around 150 still frames drawn to a single canvas and tied to the scroll position, so it moves exactly as fast as your thumb, runs backwards when you scroll back, and stops when you stop. All the words stay real HTML over the top, so they are readable, selectable and indexed.

A film like this is usually what kills a takeaway site on a phone. Here the frames are compressed per device, the phone gets its own smaller set, and none of them start downloading until the headline has been painted, so the first thing a customer sees arrives immediately and the film loads in behind it.

Takeaway websites tend to use stock food photography, and customers can tell. Every dish here was art-directed as the takeaway's own: 48 photographs on one dark counter, in one warm window light, with the food in Hank Marvins boxes, pizza boxes, wraps and pots. The orange and charcoal packaging carries the brand into every shot, so the menu reads as one business rather than a collection of pictures.

Drinks were handled differently, because a can of Coca-Cola has to look exactly like a can of Coca-Cola. Instead of generating an approximation of anyone's label, the drinks are the manufacturers' own pack shots, placed into a red studio set generated to match the food photography, then lit, grounded and given shadows and reflections so they sit in the same world. The water bottle is properly transparent: you can see the set through it.

The menu is 48 dishes across eight sections, each with its own page so it can be found in search: kebabs, burgers, pizza, fish and chips, chicken, sides, drinks and meal deals. Tapping a dish opens it in place with everything a takeaway order actually involves: sizes, bread, salad, up to two sauces, extras, make-it-a-meal with a choice of drink, and a note to the kitchen. The price updates as you choose, and the server prices every order again from its own menu, so nothing typed or tampered with in a browser can change what an order costs.

Allergy information is where takeaway websites most often cut corners, usually with a line that says “ask us”. This one is built as a proper system. Every ingredient, sauce, extra and packaged drink has one central record, and every dish and option points at those records. Confirm the garlic mayo once and its allergens appear on all fifteen dishes that offer it. Choose a different sauce and the allergen list changes with it, in the dish, the basket, the checkout, the order page and on the kitchen ticket.

Nothing is ever shown as allergen-free by default. The packaged drinks are verified from the manufacturers’ own published product data; everything the kitchen makes stays marked as “not yet confirmed” until its recipe and its supplier information are entered, and customers are told plainly not to order an unconfirmed dish online if they have an allergy. Customers who declare an allergy at checkout are flagged on the kitchen ticket, and the order cannot be accepted until someone has ticked that it was checked.

The basket checks your postcode against delivery zones set by postcode sector, each with its own fee, minimum order and free-delivery threshold, and tells you before you get to checkout. Checkout is a single page: name, number, address if it is a delivery, a time slot, the allergy question, and payment by card or cash.

Card payments go through Stripe’s hosted checkout, so card details never touch the takeaway’s server. An order only reaches the kitchen once Stripe confirms payment, through a signed webhook that is verified, recorded and applied exactly once, and a payment whose amount does not match the order is refused. A declined card never reaches the kitchen. In this build everything runs in Stripe’s test mode, and the checkout says so at the button.

Orders land on a board designed for a tablet on the pass: new, in the kitchen, and ready or out for delivery. A new order sounds an alert, shows the customer, the time, the items with every option, and any allergy in red, and the kitchen sets a ready time as it accepts. Tickets and sealed-bag allergy labels print from the same screen. Test orders sit on their own board with a clear “do not prepare” banner, completely separate from real ones.

A takeaway menu changes weekly, so the owner needs to change it without calling a developer. The staff area lets them switch a dish or a single option off when it sells out, edit names, prices, portions and descriptions, add and remove dishes, and rebuild option groups: add a sauce, re-price a large, retire a topping. Each dish’s recipe points at the allergen records, so changing what goes into a dish updates its allergen information everywhere at once.

Prices and allergen information are approved in bulk, section by section, with the name of the person approving and a record of exactly what they approved. Change an approved price later and it goes back to needing approval. It is the kind of paper trail a real kitchen needs when someone asks what the menu said on a given day.

Because Hank Marvins is fictional, the site is built so it can never be mistaken for a working takeaway. Every order is a test order and says so at the button, on the order page and on the kitchen ticket. There is no phone number, no address and no opening hours on the public site, because a real business would supply its own. Card payments only accept Stripe test keys while the site is in this mode, and the server refuses real orders outright until a list of launch requirements is complete, even if the switch were forced on in the database.

The site is a small Node server with a SQLite database and no framework: pages are assembled on the server so the menu is in the HTML from the first byte, and the only JavaScript is a few modules for the menu, basket, checkout and film. Images are WebP at two sizes, fonts are subset and self-hosted, and nothing loads from a third party. It is covered by automated tests: an API suite of 96 checks covering pricing, delivery zones, payments, webhooks, allergens and staff controls, and browser journeys on a desktop and a phone that place orders all the way to the kitchen board.

Measured on the live site with Google PageSpeed Insights on 29 September 2026: Performance 96 on mobile and 100 on desktop, with Accessibility 97, Best Practices 100 and SEO 100. Largest Contentful Paint is 2.7 s on the mobile test and 0.5 s on desktop, with no layout shift and no blocking time on mobile. The hero headline is the largest paint, and the film frames are only requested once it is on screen.

A takeaway website that works as its own ordering channel: a hero people remember, 48 dishes photographed as one brand, a menu that handles meal deals, sauces and extras properly, allergen information that follows every choice through to the kitchen ticket, secure card payments, delivery by postcode, and a kitchen board and owner controls that make it runnable day to day.

There are no order numbers or revenue claims here, because it is an independent studio project with no customers. What it shows is what a takeaway gets when its website is built as the business’s own shop counter rather than a page pointing at someone else’s app.