Bagel 77
A Green Street cafe, with the menu as the whole website.
- ROLE
- Art direction, design and build
- STACK
- Next.js · TypeScript · Tailwind CSS · Vercel
- LIVE AT
- bagel77-web.vercel.app
// THE PROBLEM
A cafe with sixty-plus fillings across bagels, paninis, wraps, parathas, loaded fries and breakfasts has a menu that fights itself. Dumped into one long list it becomes unreadable; split across tabs it hides the range that is the actual selling point.
The site also has to serve three different intents at once — someone ordering delivery, someone collecting on the way to work, and someone booking a table at the weekend — without making any of them hunt.
// THE SYSTEM
The menu is treated as the primary interface rather than a secondary page, organised by category with each item carrying its own price, description and rating so the range reads as depth instead of noise.
Delivery, collection and reservation are surfaced as three parallel paths from the top of the page, each with its own terms stated plainly — flat local delivery, free over a threshold, order-ahead collection.
An editorial art direction — serif display type over full-bleed product photography in a muted olive palette — positions it as a considered cafe rather than a takeaway listing.
Operational facts people actually check are pinned as their own block: halal certification, opening hours, and the Green Street address.
// WHAT SHIPPED
- Live at bagel77-web.vercel.app.
- The full menu is browsable and priced without leaving the page.
- Delivery, collection and table booking each have a distinct path from the homepage.
Building something like this?
Tell me the shape of the project and I'll come back with how I'd approach it.
START A PROJECT