← Back
Gastronomy · Responsive App · 2023

Sashimi: Luxury Sushi Restaurant App

A responsive app for a high-end sushi restaurant, with a rich, luxurious interface with beautiful imagery, appetising and effortless to read, that holds its elegance across mobile, tablet and desktop.

Sashimi home page
Role
UI/UX Designer
Timeline
4 weeks
Platform
Responsive Design
Tools
Figma +
Overview

A premium interface for a premium table

Sashimi is a high-end Japanese sushi restaurant in London's Mayfair, where Asian heritage meets modern luxury. The app brings that experience online: browse the menu, book a table, pre-order the meal, and discover signature events like One Night in Osaka, a sushi class or jazz night.

This was a focused UI/UX design project, running from the information architecture and wireframes through to the final visual design. There was no separate usability study with users; the work was about getting the structure and the interface right: translating the restaurant's premium, understated character into screens that feel just as considered as the room.

I owned the design end to end: the structure, the look, the layout system and the feel of every screen, from wireframes through to a high-fidelity, interactive prototype. And because it's responsive, the same visual language had to hold across breakpoints, staying immersive on desktop, comfortable on tablet, and focused and one-handed on mobile, without ever feeling like three different products.

The Problem

No website to reserve
or order ahead

Sashimi had no website where guests could reserve a table or pre-order their meal. Without one, they had to call or wait until they arrived, far from the effortless, luxurious experience the restaurant gives in person.

The Goal

Translate a premium restaurant into a premium app

Create one responsive experience that reflects Sashimi and brings its premium, understated character online. Guests should be able to browse the menu, reserve a table and pre-order their meal in a single considered flow, and it has to feel just as polished and effortless on mobile, tablet and desktop.

My Role

Sole UI/UX designer, end to end

I owned the design from a blank canvas to a high-fidelity, interactive prototype: a focused UI/UX project with no separate research or testing track.

  • Information architecture
  • User flow
  • Responsive wireframes
  • Visual design & system
  • Interactive prototype
Tools

What I designed with

I worked mainly in Figma, from wireframes to the high-fidelity prototype, with a few supporting tools for visuals along the way.

  • Figma
  • Canva
  • Adobe Photoshop
  • Adobe Illustrator
Information Architecture

A clear structure behind a calm interface

A handful of primary destinations, each with just enough beneath it, so a guest can browse, book and order without ever feeling lost.

Sashimi
Home
Hero & story
Featured events
Reserve / order
Menu & Order
Savory · Sweet · Drinks
Add to cart
Pay & confirm
Reserve
Date
Time & guests
Confirmation
Discover
Events
Reviews
About us
User Flow

From homepage to a confirmed table

I kept the path simple and intuitive: the core journey a guest takes, from browsing the menu to a booked table and a pre-ordered meal.

01
Browse the menu
From the homepage, the guest opens the menu to explore dishes, prices and photography that set the tone.
02
Build the order & review the cart
Add dishes to the order, then review everything in the cart before committing.
03
Reserve a table
Start a booking and pick a date from a calendar that shows availability at a glance.
04
Choose time & guests
Select a time slot and the number of guests for the reservation.
05
Pay
Enter details and pay to confirm the table and the pre-ordered meal together.
06
Confirmation
Receive a confirmation with the reserved table and the pre-ordered dishes.

What I'd add next: a single review step just before payment that brings the reservation and the pre-ordered dishes together on one screen, so guests can check everything at a glance before they confirm and pay.

Wireframes

Structure first, across every screen size

Before any visual styling, I laid out the same page at three breakpoints to get the hierarchy and the responsive behaviour right: what stacks, what hides, and what stays. Two iterations refined the layout across desktop, tablet and mobile.

Version 1
Wireframe v1, desktop
Desktop
Wireframe v1, tablet
Tablet
Wireframe v1, mobile
Mobile
Final version
Wireframe v2, desktop
Desktop
Wireframe v2, tablet
Tablet
Wireframe v2, mobile
Mobile
Prototype

Try the interactive prototype

The mobile design is fully clickable: a guided run through the core flow, from the homepage to ordering a meal ahead and then reserving a table. It opens straight in Figma, with no account or sign-in needed.

Open the interactive prototype →
Figma prototype board showing how the screens connect
How the screens connect: the wired prototype flow in Figma
High-Fidelity · Across Devices

The same page, beautifully responsive

The main page in high fidelity, shown across desktop, tablet and mobile, with one visual language tuned to each screen.

Sashimi hi-fi, desktop
Desktop
Sashimi hi-fi, tablet
Tablet
Sashimi hi-fi, mobile
Mobile
Design

A dark theme that lets the food shine

For the design I chose a black background with golden accents that reflect Japanese culture. I kept the text and design elements to a minimum, so the interface stays clear, never distracts from the images and is easy to use.

The hero opens on a Japanese venue that picks up the same gold and brown tones and shows different Japanese script. Directly below it sit the two most important buttons, order and dining, alongside the menu. At the centre is the gallery, where images of the dishes guests can eat at Sashimi take the lead.

Around it, I wrote several articles about the events and the restaurant itself, so guests can learn more before they arrive, and just as important was capturing their voices through reviews. The menu I designed to feel classic and elegant, as if you were reading it at the table, and the main flow stays simple and intuitive, guiding guests step by step through booking and payment.

The direction came from New York's world of Asian fine dining, restaurants like Buddakan and 53, and above all from the website of Hutong, a Chinese luxury restaurant: an elegant, timeless, dark-themed interface, atmospheric and rich, carried by beautiful photography of the room. That reference is what convinced me to build Sashimi on the same dark, luminous foundation.

Colour palette
BlackGoldYellowWhite
Typography
AaAa
Italiana · Logo & headlines
Italianno · Button accents
Inter · Body & UI
Generous spacing, calm hierarchy
Inspiration
Hutong NYC, dark, gold-lit interior
Hutong NYC, expressive imagery on black
Reference: Hutong (hutong-nyc.com)
Key Screens

The core of the experience

A closer look at the screens that carry the journey: discovery, ordering, booking and payment.

Homepage, tablet
Homepage · Tablet
Menu
1 · Choose menu
Order, menu
2 · Browse the dishes
Order, add dishes
3 · Add to order
Cart
4 · Confirm in cart
Book a table
5 · Reserve a table
Book a table, choose date
6 · Choose a date
Select a time
7 · Choose a time
Select number of guests
8 · Choose guests
Payment
9 · Pay
Confirmation
10 · Confirmation
Events
Discover · Events
Reviews
Discover · Reviews
About us
Discover · About Us
Outcome

A premium restaurant, fully translated to screen

The result is a complete, responsive design for Sashimi: a calm, luxurious, high-end interface where guests can discover the restaurant, browse the menu, reserve a table and pre-order a meal. It moves from a blank canvas to a clickable, high-fidelity prototype, ready to hand to development.

One language, every screen
A single visual system holds across mobile, tablet and desktop, so the brand feels considered everywhere, never like three products.
An effortless journey
Browse, order and book flow as one uninterrupted path, kept clear and intuitive from the first tap to confirmation.
Atmosphere on screen
A black surface with golden accents and expressive photography carries the restaurant's mood into the app itself.
Reflection

What I took from it

Results and Impact

  • A complete, end-to-end design: from a blank canvas to a clickable, high-fidelity prototype: a full responsive interface ready to hand to development.
  • One brand across every screen: mobile, tablet and desktop share a single visual language, so the experience feels considered everywhere.
  • A full booking & ordering journey: guests can discover the restaurant, reserve a table and pre-order a meal in one uninterrupted flow.

Design takeaways

  • Templates can save time: building features like the calendar from scratch looked great but took a lot of time, and next time a template would get there faster.
  • A dark design can still feel warm: even with a dark background, the interface stays warm and atmospheric when you set the right accents, like golden elements.
  • Dark websites suit night-time venues: a dark design fits establishments that are mainly open in the evening and at night, like the restaurant Sashimi.
  • One product, three devices: keeping the same hero image, the logo in its place, the golden buttons, imagery, text and footer consistent across mobile, tablet and desktop is what made it one product.
  • Desktop and tablet can share a structure: the tablet is smaller, but the arrangement stayed the same, so I only had to scale the size, not redesign the layout: a real time-saver.
Next case study
La Lumière: Menu & Payment App
La Lumière app