Manzoku Sushi App

This app was created for customers of Manzoku Sushi, an emerging restaurant chain that offers sushi and Japanese cuisine with competitive pricing. The goal was to create an easy to use, convenient option to quickly place a food order and make a payment in between a busy schedule.


Case Study
UX Research
Responsive UI App Design


Manzoku Sushi

Market research

What’s happening in the market

60% of U.S. consumers order delivery or takeout once a week.

45% of consumers say that mobile ordering or loyalty programs would encourage them to use online ordering services more.

43% of restaurant professionals said they believe third party apps, many of which withhold data, interfere with the direct relationship between a restaurant and its customers.

The problems with online food ordering

According to the data collected 70% of consumers would rather order from a custom app than a third party. There is a trend emerging to give back to local businesses, and people are willing to spend more at their favorite restaurants when using a dedicated app. Many sushi restaurants do not have dedicated pick up and/or delivery services and 3 out of 4 sell through a third party platform.

Graph showing the expected growth of the food delivery industry to $320 billion by 2029.

The food delivery industry is expected to grow to $320 billion by 2029. It saw its largest growth in five years in 2020 due to the coronavirus pandemic.

According to the article ‘Food Delivery App Revenue and Usage Statistics (2022)’ from Business of Apps.

Competitive Analysis

The 3 most relevant competitors have been analyzed, comparing the app and website experience for desktop and mobile, navigation, accessibility, user flows, UX interactions, visual designs, content and critical app store reviews.

1 – Kura Sushi

2 – Little Lilly Sushi

3 – Doordash

The good

Organization and site structure is good
All websites are responsive and have clear navigation


The bad

Apps are outdated (1), or no app/web app at all (2)
No allergen information (2), or not always displayed (3)
Amount of sushi included with an order is confusing (1,2,3)
Visual identity is not cohesive and not always accessible (1,2)
Ordering redirects to a third party or is not available, breaking continuity during the ordering flow (1,2)

Critical Comments

Critical Review by Jacob mentioning they can't find where to redeem coupons and no benefits to the app
Critical Review by Florence mentioning how the app needs to be reworked on how it gets drivers, handles scheduled orders and store updates
Critical Review by Amber mentioning it doesn't let users customize orders with the same options as in-restaurant orders, especially concerning food and gluten allergy options

User Survey

A quick survey was conducted to see the challenges people are facing while using food delivery apps. This will help to give insights into what can be improved for a better user experience, and start designing with these problems in mind.

Chef Pointing at the Text on the right

Initial Research Concludes

There is a growing need for food delivery apps that don’t involve a third party. The app should be easy and convenient to use, accessible to all users, and cater to people with allergies or language barriers.


Two personas were created to explore the larger group of users, to design the app with the target users in mind.

User Journey Map

A user journey map was created to identify the experiences and challenges the customer might go through while ordering in the traditional way.

Chef Pointing at the Text on the right

Time to start designing!

After going through all the research data, it was time to sketch out the first flows, the initial low-fidelity wireframes and start creating prototypes.

Flow Diagram

A flow diagram was created to outline all the neccessary functionality of the main tasks the user goes through. Fail states were also created, but are not shown due to space constraints.

Low-Fidelity Wireframes

Once the flow diagram was established, low fidelity wireframes were created for the main flows,

Lo-Fi prototype usability study feedback

Users wanted the ability to change/cancel orders.
The location filters were confusing to some users and needed to be more intuitive and easy.
It needs to be clearer if a user is placing a pickup or delivery order.

Flow Diagram

Once the initial flow was created, and the usability study results were in, it was time to start creating the high fidelity prototype. The feedback from the usability study will be incorporated and at this point the decisions for the UI are made by experimenting with color, fonts and elements. A UI style kit was created to create consistency and continuity.

Design Ideation

The UI design went through several iterations. The first version were too cluttered and made navigation unnecessarily difficult for users that are in a hurry. Following people’s feedback and improving the design by removing everything that was irrelevant has led to the final design of the app.


Previous Design Mistakes

Alignment and Grid

The app was created using an 8 point grid system and the margin between groups is set at 16, with margins between groups are set at 16, 24 and 32. Bounding boxes are set at 44×44 to prevent misclicks, and buttons are a minimum of 40×40 for easier tapping.

High-Fidelity Prototype

The high-fidelity mockups were connected into a clickable prototype. This way the app can be tested on the first group of users

Prototype validation by conducting a usability study

After the high-fidelity prototype was finished, it was tested by 4 users in an unmoderated usability study. A research plan was made for a where research questions and goals were outlined, KPIs, methodology, information about the participant requirements, and a script with tasks to complete. Part of the study was conducted through, giving heatmap information, misclick rates and task duration. After the study was completed, each user completed a System Usability Scale questionnaire through Google Forms.

Tasks given to the users included, following the sign-up process, adding menu items to the cart, complete the checkout process for a delivery order, and tracking the order status.


100% of participants were able to complete all tasks without issues. However, in the feedback session there was some notable feedback. One participant noticed the inability to exit the checkout flow, since these did not contain any back buttons. Another user mentioned that they usually login via their Google account, or make a payment through Apple Pay.


Prototype update concept

Because of time constraints a second usability study on the updated prototype couldn’t be conducted. However, the prototype was updated by adding the option to login with Google or Facebook. Back buttons were also added to the complete checkout flow, this way users can exit if they change their mind.

Accessibility Check

The app has been evaluated for contrast to match at least the AA standards of WCAG. All the main colors of the app, text, and call-to-action buttons, have been checked using the ‘Contrast Checker’ tool by WebAIM. Ensuring the app is accessible to every user.