A ground-up redesign of a Toronto restaurant's web presence, turning a dated site into a reservation-first experience that reflects the quality of the food inside.
Anok is a fictional West African fine dining concept in Toronto's west end. The premise: exceptional food, a loyal in-person following, but a website that actively undermined it. Outdated layout, buried reservation link, no mobile optimization, and photography that did nothing for the menu.
I chose this as a spec project because it is a pattern I see constantly in Toronto's restaurant scene. Independent spots pour everything into the dining experience and let the digital touchpoint go completely stale. For many potential diners, the website is the first impression. If it looks like 2012, they assume the restaurant does too.
"I looked it up on my phone, couldn't find the menu, and just picked somewhere else. I'm sure the food is good but it didn't feel worth the effort."
That quote came from one of three informal interviews I ran with Toronto diners aged 24 to 38. It shaped the entire direction of the redesign.
Without access to real analytics, I used a combination of heuristic evaluation, a lightweight competitor audit of five Toronto restaurants, and three user interviews conducted over video call.
Reserve button appeared at position 6 in the navigation hierarchy. Nielsen's visibility of system status principle was violated throughout.
4 of 5 comparable Toronto restaurants had a sticky reserve button visible at all times. Anok was the only one with a PDF menu.
All 3 participants decided whether to visit within the first 10 seconds on a restaurant site. Photography and price range are the deciding factors.
On a 390px viewport, the reserve button required 3 scrolls to reach. Tap targets in the nav were below Apple's 44px minimum guideline.
The redesign was built around one constraint: every decision had to serve a first-time visitor on a phone. Desktop would follow, not lead.
Visually, I leaned into the restaurant's West African identity through a deep green palette with gold accents, confident Inter typography at generous sizes, and a photography treatment that favoured candlelight and texture over flat food shots.
Key structural changes: a persistent sticky header with "Reserve a table" always visible, an inline scrollable menu replacing the PDF, and a photo-first hero that loaded fast and communicated atmosphere immediately.
The hierarchy was rebuilt so the most important actions (reserve, view menu, find us) were reachable in one tap from anywhere on the page. Every tap target was brought up to the 44px minimum.
This project was self-directed, which meant I was making assumptions a real engagement would validate or kill early. With a real client I'd want actual reservation data, heatmaps, and at minimum five user tests before committing to the visual direction.
The biggest open question is photography. The redesign depends heavily on strong imagery to land its atmosphere. A real restaurant that could not afford a photographer would need a version of this that works with what they have, a constraint I'd want to design around from the start.
The brief also did not touch the booking flow itself. If the reservation link routes to a clunky third-party widget, all the work on the site front door is undermined. That is scope I'd push to include in a real project.