Kokoloko's
A digital flagship for Kokoloko's, a fried-chicken restaurant in Melissia: a brand and competitor audit, information architecture, personas and wireframes, a design system, a six-page Next.js website, and an ordering backend for direct pickup. The ordering flow is built and tested, but payments, the POS link and a production database are not connected yet.
The website is a working preview. Direct-pickup ordering is built and tested in development; payments, the POS link and a production database are not connected.
Website preview (Netlify)- STRATEGY
- DESIGN SYSTEM
- WEBSITE
- ORDERING
What already existed, and who it was up against
The audit started from what the restaurant already had: a logo, one typeface (DTNaxos), a palette sampled from the logo file, and the photo sets on its delivery-platform listings. The competitor pass covered SmashTag, Smash ’n Bun, Comet Street Gourmet, KFC and Goody’s.
The conclusion: the site shouldn’t be a prettier delivery menu. It should send people to order quickly, and give the place a home that Wolt and efood can’t.
Four people, six pages
Four personas set the priorities, then six low-fidelity mobile wireframes fixed what each page had to do before anything was styled.
- Nikos, the after-work craverOpens the site already craving something specific and wants to be ordering within seconds.
- Elena, the Melissia regularChecks the menu, finds her favourite, reorders, or decides to visit in person.
- The weekend tableA group exploring together, agreeing on a big shared order or a visit.
- New Google visitorDiscovers the place, works out what makes it different, then orders or plans a visit.
Four colours, two typefaces, every state
The first palette was sampled from the logo file. A later colour update replaced it with the restaurant's four brand colours — yellow #FFEA56, orange #FF8246, teal #23A78F and red #DA2328 — and checked every text pairing for contrast: ink on yellow passes at 12.8:1, white on orange fails at 2.4:1, so that pairing is never used.
DTNaxos for display type, Nunito for body and interface text, with Greek falling back to a system sans.
- Yellow#FFEA56Ink on yellow 12.8:1
- Orange#FF8246Ink text only; white fails at 2.4:1
- Teal#23A78FInk text only
- Red#DA2328The one colour that takes white text
Six pages in Next.js, built to the system
Home, menu, order, story, gallery and visit. The menu is transcribed from the restaurant’s own menu with exact Greek names and prices, and delivery orders go straight to the restaurant’s Wolt, efood and Box listings.
- Pages
- Home, menu, order, story, gallery, visit
- Stack
- Next.js, TypeScript, Tailwind, self-hosted fonts
- Accessibility
- Skip link, visible focus, 44px tap targets, reduced motion
- Delivery
- Links to the restaurant's Wolt, efood and Box listings
- Menu
- About 40 items, Greek names and prices from the official menu
- Status
- Working preview on Netlify
Mobile homepage 
Mobile menu 
Its interface design Its wireframe
Direct pickup orders, built but not switched on
Alongside the platform links, I built a direct-pickup ordering backend into the same codebase. The server prices every basket itself, applies a 10% discount for ordering direct, checks pickup hours, and moves each order through a fixed set of states. A paid order can’t be lost if the restaurant’s till is offline: it retries until it’s accepted.
It runs in a mock mode for development. In the deployed site it is switched off and answers “ordering unavailable”.
| Part | State | Detail |
|---|---|---|
| Menu, prices and sizes from real dataPrices held in cents | Built | Prices held in cents |
| Server-side pricing and 10% pickup discountA 15% rule exists but is off | Built | A 15% rule exists but is off |
| Pickup hours and time slotsPrep time and hours still need the owner's confirmation | Built | Prep time and hours still need the owner's confirmation |
| Orders, states, duplicate protectionIdempotency keys; duplicate payment webhooks ignored | Built | Idempotency keys; duplicate payment webhooks ignored |
| Retry to the till after paymentSo a paid order is never dropped | Built | So a paid order is never dropped |
| Automated tests39 passing | Local only | 39 passing |
| Card payments (Viva.com)Needs the business's credentials | Blocked | Needs the business's credentials |
| Till / POS connection (JoinPOS / eLINK)Needs confirmation from the provider | Blocked | Needs confirmation from the provider |
| Production databaseOrders are held in memory in development | Blocked | Orders are held in memory in development |
| Sauces, extras and allergensNeeds the owner's input | Blocked | Needs the owner's input |
A pickup app on the same backend
A six-page website available as a Netlify preview, with delivery orders handed to Wolt, efood and Box. The direct-pickup ordering backend runs locally in mock mode with 39 passing tests; real payments, the POS link and a production database are not connected.