– Case Study

Shangai Sushi App

The product

Shagai Sushi is a small Japanese food restaurant located in a metropolitan area of Portugal. They want to offer the possibility of placing orders quickly with pick-up and delivery options, in two languages (PT | EN) at competitive prices. Shagai Sush is aimed at customers who want to take their orders or who want food to be delivered wherever they are.

Claudia Machado
Claudia Machado

The problem

People  need to pick up their orders or delivered wherever they are but don’t understand Portuguese.

The goal

Design an app for Shangai Sushi that allows users to order and choose dishes in two languages (PT | EN) that can be picked up or delivered.

Project duration

October to Dezember 2021

My role

UX/UI designer an app for Shangai Sushi from conception to delivery.

Responsibilities

Conducting interviews • Paper and digital wireframing • Low and high-fidelity prototyping • Conducting usability studies • Accounting for accessibility • Iterating on designs.

Design Process – Design Thinking

Empathize

Define

Ideate

Prototype

Test

01. User Research

I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was adults who like to eat sushi and order out at least once a week.

This user group confirmed initial assumptions about Shangai Sushi customers, but research also revealed that it was frustrating not having the English language for some of the targeted users.

Interview questions

  1. Is the process of creating a profile easy?
  2. How is the process of choosing a sushi?
  3. Is change language of App easy?
  4. Are there any parts of the app where users are getting stuck?
  5. Is the payment process easy for the customer?
  6. Is necessary option to scan menu in App?

Pain points

Time: They are too busy to spend time to eat at restaurant

Acessibility: Platforms for ordering food are not in another language.

IA: Menus with lots of images in apps are often difficult to read and request

Persona

Catarina is working adult who needs to easy access to sushi food ordering options because she has a tyne time to eat out when she working.

Persona Shangai Sushi App
User journey map Shangai Sushi App

User jorney map

Mapping Catarina’s user journey revealed how helpful it would be for users to have access to a dedicated Shangai Sushi app.

02. Starting the design

In this phase, I initially used paper and digital wireframes and low-fidelity prototype to test design ideas and user flows. I also carried out a usability study to test the “inicial product experience”.

Paper wireframes

I took the time to draft the iterations of each screen in the app on paper to ensure that the elements that made it to the digital wireframes would be adequate to deal with the user’s pain points. For the home screen, I prioritized a quick and easy ordering process to help users save time and be able to change language quickly.

Paper wireframes Shangai Sushi App
Digital wireframe Shangai Sushi App

Digital wireframe

As the initial design phase continued, I made sure to base screen designs on feedback and findings from  the user research.

Low-fidelity prototype

Using the complete set of digital wireframes, I created a low-fidelity prototype. The main user flow I connected was choosing and ordering sushi and switching the language so that the prototype could be used in a usability study.

Low-fidelity prototype Shangai Sushi App
Usability study Shangai Sushi App

Usability study

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining. 

03. Refining the design

In this phase, I initially create mockups and high-fidelity prototype to test design ideas and user flows. I also carried out a acessibillity to test and give users the “end product experience”.

Mockups

Early designs allowed for some customization, but, after the usability studies, I added to see delivery time and to receive a message when the courier is at the door to deliver the package. I also revised the design so that users could see all the options placed on the fixed footer.

Mockups Shangai Sushi App
Mockup Shangai Sushi App

The second usability study revealed frustration with receiving order information. To improve, I create in a screen such as “See delivery time” and “Receive message” .

The second usability study alson revealed frustration with delivery option in the checkout process. I added the pickup or delivery option to “Rever Pedido” (“Review Order”) screen.

Mockup 3 Shangai Sushi App
High-fidelity prototype Shangai Sushi App

High-fidelity prototype

The final high-fidelity prototype presented cleaner user flows for change language and checkout. It also met user needs for a pickup or delivery option as well as more customization. 

Accessibility considerations

People deserve equal access to information, services and products, which is why accessibility is so important.

Accessibility considerations Shangai Sushi App
Final output Shangai Sushi App

Final output

04. Going forward

To express the content in visually distinct ways and maintain readability, various font styles were used. It is the Hind Madurai font used throughout the App.

Impact

The app makes users feel that Shangai Sushi really cares about meeting their needs.

A quote from peer feedback:
The app is intuitive and simple! I would definitely use this app to order sushi.

What I learned

When designing the Shangai Sushi app, I learned that first ideas for the app are important to get the whole process started. Usability studies and peer feedback have improved each iteration of app designs.

Next steps

Next steps Shangai Sushi App

Let’s talk?

If you have a project in mind or are simply interested in finding out more, don’t be shy. It would be my pleasure to work on the next big idea.