Momotaro
Role
UX/UI Designer
Project Duration
June - September 2022
Tools
Figma and Photoshop
Responsibilities
Wireframing, prototyping, conducting a usability study, and iterating on designs
Project Overview
Momotaro is a local café in State College specializing in Asian-themed foods. The café targets customers like students and workers who are always on-the-go. As a small business I noticed Momotaro lacked a way to order food online so I created an app that would enable customers to place an order in advance so that they could save time and skip the line.
User Research
Personas
I created personas and empathy maps to understand the users I am designing for and their needs. A primary user group identified through research were students who are always on the go and need to grab food fast.
Sierra Kline
20 | Single | University student
”My daily motto is eat, sleep, and study.”
Sierra is a college student always on-the-go. She commutes from her house to class five days a week. Part of Sierra’s daily routine is ordering food through her phone to pick up before class because she does not have time to prepare food.
Problem Statement
Sierra is a busy full-time student who needs a way to place orders in advance because she has early morning classes and does not have time to wait in line.
Jae-sung | 재성
19 | Single | Foreign exchange student
”My English is getting better each day.”
Jae-sung is a foreign exchange student. Although he took a few English classes before arriving in America, he often struggles reading restaurant menus. Jae is a bit shy about the language barrier so he avoids having to place orders in-person. He prefers to place online orders because those usually have pictures.
Problem Statement
Jae-sung is a foreign exchange student who needs an ordering app with lots of pictures because he has trouble reading English and prefers to place orders online.
Starting The Design
Paper Wireframes
Creating different iterations of each screen of the app on paper ensured that certain elements that made it to digital wireframes would address user pain points. On the home screen I prioritized a quick and easy ordering process to help users save time.
Digital Wireframes
Next, I took different elements of my paper wireframes and put them together to create digital wireframes. Once all the wireframes were laid out, I connected the screens to create a low-fidelity prototype.
Low-fidelity prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was placing an order from start to finish.
Usability Study Findings
I conducted an unmoderated usability study to help find strengths and weaknesses in my design. There were 5 participants (3 male, 2 female) between ages 20-72. The participant requirements were for people who reside in suburban areas who order out at least every other week. These users were asked to place an order on the low-fidelity prototype. Check out my research plan and script and view my low-fidelity prototype. Findings from this study helped guide the designs from the wireframes to mockups.
The insights that I found during my usability study were:
Users need a more direct way to add an item to their cart.
Users need a better, more intuitive way to complete the checkout process.
Refining The Design
Revision 1
The usability study revealed frustration and confusion with the checkout flow. I consolidated the “Order summary” and “Checkout” screen into one screen making the flow easier for users to understand.
Revision 2
I also discovered that users wanted bigger imagery. This lead me to redesign the product screen page to fit the full screen allowing the picture to take up ⅓ of the space.
Revised Design
High-fidelity prototype
After revising my design and creating mockups, I connected the screens using the same user flow to create my high-fidelity prototype. Check out the prototype and try ordering yourself some rolled ice cream!
Conclusion
Personal reflection
Momotaro was one of the first Asian-themed cafes to pop up in my small hometown. As an Asian-American, I discovered how much I love this type of café since I’ve never seen one before that caters to my ethnicity. I chose to design an app for Momotaro because I noticed they did not have a dedicated website or mobile app, and I love designing for small businesses.
What I learned
While designing the Momotaro app, I learned to empathize with users by creating personas and conducting usability studies. By carefully listening to users I was able to take their feedback and improve on each iteration of the app’s designs.