Food & beverage · Arabic RTL · Self-initiated concept

Fino

An Egyptian sandwich brand with meticulous branding and a PDF for a menu. I rebuilt the last step: the whole menu, live, with a cart that sends a finished order straight to WhatsApp.

Role
Design + frontend build
Category
Food & beverage ordering
Platform
Vanilla JS · No framework · No backend
Overview

الفينو اللي عارفينه.

Fino is an Egyptian sandwich brand — All Egyptian Home Deli. The food is the corner grocery of the nineties: rumi cheese, egg and pastrami, breaded chicken, in a fino roll baked in the shop.

Their branding is genuinely good. Printed menu, logo, packaging, the smell of bread when you walk in — all of it deliberate. Then the customer decides to order, and the experience drops to a PDF menu and a code on somebody else's platform. The last step before the money is the least finished step in the brand.

So I built that step. Nobody briefed me and nobody paid me — it is an unsolicited prototype, made because the gap was obvious and a working page argues better than a proposal.

Why this one

The gap was in the handoff, not the design

Fino pitched on Shark Tank Egypt: one branch, forty corporate accounts, five branches and five cloud kitchens planned for next year. Every one of those numbers puts pressure on the same weak point — the moment a customer tries to order.

01

A menu you cannot order from

The menu lived as a PDF. Pinch, zoom, read, then leave the brand entirely to place the order somewhere else. Every extra surface is another place the price, the item list, or the branch can go out of date.

02

Scale multiplies the problem

One branch can be run from a phone. Five branches and five cloud kitchens cannot — availability, pickup point and the corporate discount all differ per location, and none of that fits in a PDF.

03

Proof beats a pitch

I could have written an audit. Instead the deliverable is the thing itself: a live page in their own identity, using their own menu, that a founder can open on a phone and immediately judge.

How it was built

The design is theirs — I only moved it to a screen

Nothing here was invented. The palette, the grid paper, the stamps and the outlined lettering all come out of the printed Fino menu and the logo. The work was translating print grammar into something that survives a screen.

01

Drenched, not accented

Green is the surface, not a highlight — the page behaves like a printed menu pinned to a wall, not a delivery app. Cream panels, a checkerboard edge strip and hard print shadows with no blur: the same grammar as the logo.

02

Where print had to give

The printed menu sets cream text on green — 2.3:1, fine on paper and unreadable on a screen. Body text became ink on green at 6.7:1. Prices stay in Arabic-Indic numerals like the print; the WhatsApp message uses Latin so it actually works.

03

Edited by whoever owns it

Every item, price, branch and phone number lives in one data file. The item count on the page and the “from” price in the stamp calculate themselves, so the copy cannot drift out of sync with the menu. No build step, no dependencies, no backend.

Fino ordering page, full length — hero, live menu sections, bundles, corporate accounts and footer
Fino — the printed menu as a working order flow, in the brand's own visual language
Where it goes next

The prototype deliberately stops at the interface. It ships on day one because it needs no server — and the data is shaped so the next layer can be added without rewriting the front.

The obvious next steps are per-branch availability, so an item that has run out shows as unavailable instead of becoming a cancelled order; the forty corporate accounts, where an employee signs in with a work email and the discount applies itself; and the weekly and monthly subscriptions the founders announced on air.

Demo

Build an order and watch it leave.