Role: UX Designer. Concept, Research, Visuals
Responsibilities: Conducting interviews, paper, and digital wireframing, low and high-fidelity prototyping,
managing usability studies, accounting for accessibility, and iterating on designs.
Tools: Figma, Gdrive, Jamboard
Duration: July 2021 to August 2021.
Umami Sushi is a regional Sushi maker located in the suburbs of a metropolitan area. Umami Sushi strives to deliver healthy, specialty Japanese cuisine and side dishes. They offer a wide spectrum of competitive pricing. Umami Sushi targets customers like commuters and workers who lack the time or ability to prepare a family dinner.
Busy workers and commuters lack the time necessary to prepare a healthy meal.
Design an app for Umami Sushi that allows users to easily order and pick up fresh, healthy custom dishes.
1. Understanding the user
User research: Summary
I conducted interviews and an empath map to understand the users I’m designing for and their needs.
A primary user group identified through research was busy adults focused on their careers and don’t have time to cook.
This user group confirmed the initial assumption about Umami Sushi customers, but research also reveal that time was not the only factor limiting users from cooking at home.
Other user problems included dietary restrictions, empathy, or challenge to make it difficult to get groceries for cooking.
User research: Pain points:
Customization. Some customers have Dietary Restrictions
Time. Working adult doesn’t have time to prepare a healthy meal
Empathy. Giving the name of the delivery driver, personalize the service
Reward. When the delivery is done, giving a tip through the app is a sign the user appreciate the service
Persona: Rose Grams:
Rose Grams is a busy developer, who needs to have a customer order feature due to her dietary restrictions.
User journey map:
Mapping Rose’s user journey revealed how helpful it would be for users to have access to a dedicated Umami Sushi App.
2. Starting the design
Paper wireframes
Taking the time to draft interactions of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized a quick and easy ordering process to help users save time.
Stars were used to mark elements of each sketch that would be used in the initial digital wireframes.
Digital wireframes
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
Easy checkout was a user need to address in the designs in addition to making the process shorter with only 3 steps:
Delivery/Pickup
Payment Method
Confirmation
Low-fidelity prototype
The low-fidelity prototype connect the primary user flow of building and ordering Japanese meal, so the prototype could be used in a usability study with users.
View the Umami Sushi
Usability study: findings
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 need refining.
Round 1 findings
Users want more customization options
Users want to schedule delivery or pick-up
Users want to order sushi quickly
Round 2 findings
Adding toppings is confusing
Toppings can be organized by categories
3. Refining Design
Mockups
The early design allowed for customization, but after the usability studies, I removed the top slider, because it didn’t add more value to the customization process.
I also revised the design so users see toppings by categories and how many toppings they can add.
1a. Before usability study
1b. After usability study
2a. Before usability study
2b. After usability study
The second usability study revealed frustration with adding toppings to the custom Maki. Users wanted to have a better organization of the toppings and which toppings are already in their order.
High-fidelity prototype
The high-fidelity prototype presented cleaner user flows for building a custom Maki Sushi and checkout.
It also meets user needs for a pickup or delivery option as well as more customization.
View Umami Sushi
Accessibility considerations
Umami Sushi App will be Multilingual As Rotterdam is a multicultural city.
It is important for users, to have the choice of the language
Provide sufficient contrast between foreground and background.
People who have low vision could find it difficult to read text from a background color if it has low contrast.
Write useful alternative text for images and other non-text content.
People with low vision often make use of screen readers to “hear” the web.
4. Going forward
Impact:
The app makes users feel like Umami Sushi really thinks about how to meet their needs.
One quote from peer feedback:
“The app made it so easy and fun to build my own Maki Sushi! I would definitely use this app as a go-to for a delicious, fast, and even healthy meal.”
What I learned:
While designing the Umami Sushi app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.
Next steps
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Conduct more user research to determine any new areas of need.