Sushi Umai
Sushi Umai is driven to provide high quality Japanese cuisine to its diverse, busy customers quickly and easily online.
Project Duration
February 2022 - April 2022
Role
UX Designer & Researcher
Responsibilities
User research, wireframing, prototyping, user testing, design iteration, and accounting for accessibility.
Tools
The Problem
People with busy schedules due to work and other daily responsibilities are left with little time to prepare meals for themselves or their family and maintain a healthy work-life balance.
The Goal
Design a mobile app for Sushi Umai that allows a wide range of users to order healthy Japanese cuisine quickly and easily so as to allow more time for them to dedicate to their families, personal interests, and the like.
Key Challenges and Constraints
Conducting interviews and multiple rounds of user testing was the biggest challenge I faced. This was not only because Sushi Umai was my first ever UX project, but also because it required the most preparation out of the design process. This was due to countless factors of which each demanded close consideration and relied heavily on other people’s schedules. Most notably, stitching together wireframes for user testing took some getting used to. Walking the line between accurately representing an app in the real world and designing a prototype that produces effective research findings was an ongoing challenge that dictated much of the project’s success.
Understanding the User
Conducting user interviews confirmed initial assumptions regarding a general desire for simpler menu overlays and revealed other crucial insights that came together to lay a strong foundation for the project moving forward. Users recounted frustrating experiences with menus that required excessive scrolling and lacked clear categorization. Users also expressed their desire for a seamless order and checkout process that is intuitive and not time consuming; they don’t want to deal with a learning curve in order to buy some food. Lastly, users want to be able to edit their orders without having to jump through hoops and completely reorder.
Personas
Developing personas allowed me a consolidated source of empathy for the user. They reflected the pain points and goals of my users that were revealed during interviews.
Journey Map
Walking my users through a basic online food ordering flow gave me a better sense of where snags could appear to hinder progression. Doing so allowed me to anticipate areas of friction like the cart and editing features to pay close mind to when kicking off designs.
Competitive Audit
A deep dive into several market competitors revealed multiple design conventions, some that enabled a positive user experience and some that reflected the frustrations identified during user interviews. For example, each competitor prominently featured the button to kick off the online order flow on the landing page. Furthermore, each site shared a similarly easy process to add menu items to the cart and progress to payment. On the other hand, one competitor required multiple PDF downloads to view the entire menu while another was only viewable as a PNG, making it inaccessible to those using assistive technologies.
Defining the Problem
Pain Points
😵💫 Poorly designed menus muddle the flow—Many food ordering apps have menus that are unorganized and require effort to parse through (e.g. excessive scrolling).
⏱️ Complicated ordering processes waste the user’s time—Users will order food online as a way to save time from having to prepare and cook food themselves. However, food ordering apps can sometimes contradict this goal with complicated ordering processes that require too many steps to order food.
⬅️ Failure to anticipate misinputs causes headache and ignores the inevitable—Food ordering apps can sometimes be merciless when users make mistakes, occasionally requiring them to completely reorder. A lack of recourse for incorrect menu selections and customizations increases the amount of time the user spends in-app and causes a lot of frustration.
Problem & Goal Statements
Writing out a problem statement for one of my personas lets me peek into the life of a user, the problem they want solved, and why they want it solved. Stemming from there, I write a goal statement to crystalize the objective I wish to achieve with my designs-- the solution to the problem. Doing so narrowed my focus with an actionable goal.
Problem Statement
Aki is a new grad kicking off his career as a busy jr. software engineer who needs a fast way to order food because he wants to dedicate the bulk of his time after work to hanging out with his girlfriend and playing games.
Goal Statement
Our online ordering app will let users order Japanese cuisine quickly & easily which will affect individuals with busy work schedules by saving them time and energy to dedicate to their personal interests.
Kicking Off Ideation with Storyboards
Creating a big picture storyboard helped to contextualize the user’s interaction with the Sushi Umai app—how it can fit into daily life and how to ensure that it does. On the other hand, a close up storyboard marks the beginnings of the app and demonstrates its core features.
Laying out a User Flow
Adhering to the objective of my goal statement, I mapped out a user flow that consolidated the online food ordering flow to as few screens and actions as possible. I understood early on that options to edit or customize menu items carried the most potential to suck up a lot of the user’s time, especially when done for multiple orders. Runner up was, naturally, payment.
Giving Form to Ideas with Prototyping
While sketching wireframes on paper I looked for concrete ways to consolidate the online food order flow. I’ve already established that I want to streamline the way people order food online, but how can I achieve it within the app and its features?
Digital Wireframes
I took the ideas that I felt best addressed my design goal and fleshed them out with digital wireframes. Some examples are the use of tabs to categorize core food groupings in the menu and pairing them with icons that clarify those groupings to those unfamiliar with Japanese cuisine.
Low-Fidelity Prototype
To prepare for user testing, I stitched together my digital wireframe ensuring that users had clear options to progress forward and backward. I also had to make sure that the prototype’s functionality closely matched its intended function in the real world for testing to encourage effective research findings. How can I guarantee that users know to select this ingredient over that one so they can progress through the prototype?
Collecting Feedback with User Testing
Two rounds of moderated usability studies guided the project through low and high-fidelity iterations, each offering a slew of opportunities for improvement in the name of quick and easy ordering.
Round 1 — Affinity Diagram
Pouring the data from round one into Jamboard, I sought to identify patterns and establish themes with pain points that users experienced and/or expressed with the low-fidelity prototype.
Round 1 — Usability Study Findings
Round 1 — Design Iteration
Round 2 — Affinity Diagram
After addressing the core findings from the first round of testing, I also embellished the designs with visual elements, like color and shading, to increase usability along with several other improvements. I conducted a second round of testing with this new design iteration and organized my findings.
Round 2 — Usability Study Findings
Round 2 — Design Iteration
Final Mockups
Accessibility Considerations
Adjusted the color palette for Sushi Umai to maximize the contrast between screen elements and comply with WCAG standards.
The use of detailed imagery and large, prominent iconography alongside most copy made for a more clear information hierarchy.
Text sizes were increased universally for greater readability.
Conclusion 🏁
What I Learned
I learned that a strong source of empathy, stemming from effective user research, drives success with design solutions that truly addresses the user’s needs and pain points. Before user interviews and testing, I felt fairly confident that the solutions I came up with were strong ones. It wasn’t until I conducted that research that I revealed countless opportunities to improve the user experience that I had never considered.
Next Steps
Additional user research - conduct further user research to develop a stronger foundational understanding of the user group and what drives them.
Further iteration - conduct additional usability studies to identify any pain points and opportunities for improvement for the high-fidelity prototype.
Increase fidelity of designs - Enhance the fidelity of prototypes and flesh out additional features to improve the function of the app.