Sushi Desu!
This is a menu and ordering app for japanese sushi restaurant 'Sushi Desu!'
Year
2022
Agency
(Google UX Course)
Project Type
Product Design, UX/UI Design
Role
UX/UI Designer
Sign up screen, Home screen and checkout screen of 'Sushi Desu' app
Overview

A Menu and Ordering app for a sushi restaurant

Sushi Desu! is a japanese sushi restaurant located in the metropolitan area. Their goal is to provide high quality sushi dishes that caters to all types of palates. They have a wide variety of dishes, all which should be easily accessed and ordered though the new ordering app that we are building.

The Problem
Sushi Desu! wants to update their menu to a digital version, but they also want it to address an issue they've noticed. When there is a big group at a single table, the time taken to place their orders grows proportionally to the number of people at the table. This lowers the efficiency of the kitchen and discourages groups from dining in the restaurant as well.

The Goal
To design an app and system for Sushi Desu! That allows customers to easily order their own individual meals to their table quickly and easily to improve efficiency.

My Role and Responsibilities
UX Research, UX Design, UI Design, Brand Identity, Prototyping, Testing

Discover

What do restaurant-goers want?

Initial research focused on analyzing customer reviews, complaints and frequently asked questions; after which user interviews helped further distill the information into user needs and pain points.

01: Menus often have items that are unavailable and do not offer many services beyond just displaying item name and price
02: Splitting bills and customizing meals are difficult when ordering as a group.
03: Menus have little to no information on calories, allergens, whether a dish is halal or not, etc.

User Interviews

In-depth interviews were conducted with 5 participants that fit in the target demographics, resulting in a few interesting insights.

"Splitting bills with friends is a pain
"I don't like waiting in general, but it's worse at restaurants when I have to wait to order and then wait for the order
"I don't know if a dish is safe to eat or not

01: Most people want to know the ingredients in their dish

02: Text alone doesn't inform users enough to make a decision

03: Many people are frustrated when they have to wait to order

04: Many people wish to customize their orders

05: Most people do not want to sign up / register when using an online service / app to order food

06: Having too many options all at once can overwhelm users and often results in a dropped sale

Goal Statement

Our menu app will let users filter, search and order through a dynamic menu by table number which will affect busy users and larger groups by simplifying the ordering process and increasing efficiency when ordering as a group. We will measure effectiveness by number of orders placed through the menu app.

Ideate

Let's roll out some ideas

Using the data collected and the insights formed, the fun part of the design process can begin.

Paper Wireframes

The rough sketches on paper got all my thoughts into a tangible form very quickly with minimal investment.

This is a picture of the paper sketches and rough designs of screens and UI Elements

Low-Fidelity Wireframes

Now with a better idea of what UI elements to use and what kind of screens I need on the app, a low-fidelity wireframe was created to start on user testing as soon as possible.

Usability Study

To determine where improvements could be made, to identify new ideas, to see what worked with users and what did not, a usability study was conducted

"I didn't want to sign in, so being able to continue as Guest was nice
"At a more upscale place like these prices imply, asking for payment up front is almost an insult to the customer.
"I'd prefer the price range to be represented better, visually. A sliding scale would be perfect here.

Affinity Map

To quickly differentiate and group the different insights gained from the interviews, I put together a quick affinity map

This is the first part of the affinity mapThis is the second part of the affinity map
Design

It's got to look rice to the eye

I took a lot of inspiration from the black-and-white art of Japanese manga, focusing on its simplicity and clean design.

Typography & Colors
The main typeface used is Plus Jakarta sans, and the main colors used are orange, dark seaweed green and white
Solution

Maki-ng a menu

The new menu is meant to increase conversions and get people to order more food. It's easy to browse, helps make informed decisions and place orders intuitively.

Intro Screen - Being able to skip the registering / signing in process is something most participants wanted to do. The option is available, but the prominence of the Sign In / Sign Up buttons make for more conversions than not.
Home Screen - This is where users will likely spend most of their time.
There are quick navigation links to get users to the sections they wish to explore. There are also quick filter options so that users won’t have to go into the filters unless they are looking for something more specific.
 The sections in the menu are also collapsible so users can spend time on only the items that interest them.
The pictures and simple descriptions allow users to skim through the menu efficiently, and clicking any of the items will give them more detailed information should they need it, thus solving the problem of not enough information and too much information.
Filters and More Info - These overlays quickly display extra information / actions.
The filter helps to sort and find things based on the user’s wants and needs. These options have been decided by requests and suggestions taken from the usability study.
The extra information displayed when clicking the image or description of an item helps users make informed decisions on whether to order an item or not.
Checkout - The checkout screen has an ETA at the top that changes depending on your order to help out the user on a time crunch.
If there are certain elements of your orders that users wish to change, then it can be requested in the cooking instructions section. 
Being able to pay / order individually dramatically speeds up the experience with larger groups. It’s similar to how multiple threads finish a task much faster than a single thread.
The option to pay later allows users to keep ordering without having to pay for each instance, emulating a traditional restaurant experience.
Lessons learned

Following procedure takes time, but it's usually worth it.

In closing, the design of this menu presented unique challenges and opportunities. Through thorough research, user-centered design, and iterative testing, this case study demonstrates the importance of understanding customer needs, creating an intuitive and visually appealing interface, and streamlining the ordering process.