Project
Sandwich Shop App
Google UX Project
Role
Interviewing
Ideating
Wireframing
Prototyping
Usability Testing
Iterating
Tools
Pen + Paper
Figma
Jamboard
Duration
June – September, 2022
Challenge
Busy professionals don’t have the time to cook healthy meals and need a simple and efficient way of buying it since not all apps provide order progress.
Solution
The Sandwich Shop app will present the menu in a visually easy to read manner and include a live progress bar.
Research
Summary
I conducted interviews and created empathy maps. One of the primary user groups identified were professionals who are busy with work and don’t have time to cook meals.
Further research revealed that extracurricular activities and family obligations also affected their ability to cook healthy meals at home.
Pain Points
Time
Professionals are too busy to cook healthy meals
Efficiency
Apps don’t always provide live order progress
Use
Menus can sometimes be too cluttered and hard to read
Persona
Jesse, 27
Single
Bank Professional
Jesse is a young professional who is busy with work and extracurricular activities. She’s single and lives with 2 roomates. She often buys dinner for everyone on her way home but she’s too busy to call so she prefers apps. She likes being suggested meals.
Goals
- Spend energy on activities and time withs friends
- Eat healthy
Frustrations
- Not easy to find healthy food with positive ordering experiences
User Journey Map
It was evident after mapping Jesse’s user journey that having an live order status is very important to improve the user experience.
Design Process
Paper Wireframes
I sketched out multiple versions of each page and then extracted the best version of each to create the main process flow.
Digital Wireframes
Low-Fidelity Prototype
Usability Study Findings
Round 1 Findings
Users want to order sandwiches quickly
Users want to track order progress
Users want customization options
Round 2 Findings
The create account option was hard to find
The checkout process was unclear
Mockups
The logical next step after adding items to the bag was unclear, so I decided to remove the edit and go to menu buttons. Instead, I converted the summary page into a full screen overlay, keeping the bag separate from other sections of the app.
In the initial design users weren’t sure on how to get to the account page so in the footer row, I added an account icon and rolled access to the checkout information to be found in the bag icon.
Final Design
Final high fidelity prototype presented a clear flow with more logical options that improved how the user navigated the app.
Sandwich Shop Protoype
1. Used images for sandwich toppings to allow users to more easily identify
2. Used color contrast that meets accessibility requirements for improved readability
3. Used icons to allow users to find various sections of the app more readily
Outcomes
Impact
The primary objective of the app was to provide busy individuals with a seamless experience when ordering sandwiches. One key feature that helped achieve this was the order progress bar, which allowed busy professionals to anticipate their pickup time and better manage their arrival. Overall, the app succeeded in providing a convenient and efficient solution for sandwich ordering.
What I learned:
After running usability studies I found out that the checkout flow was unclear since the next step after adding an item to the bag was unclear. Secondly, I was able to validate design decisions by testing prototypes and gathering feedback from users. This feedback was used to rework the design and flow to ensure that the final product meets the needs of the target audience.
Next Steps
1. Conduct another usability study to determine if the previous challenges have been addressed.
2. Conduct more research to determine if there are any more opportunities to improve the app.