– 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.
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
- Is the process of creating a profile easy?
- How is the process of choosing a sushi?
- Is change language of App easy?
- Are there any parts of the app where users are getting stuck?
- Is the payment process easy for the customer?
- 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.
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.
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.
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.
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.
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.
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
