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.