Project Overview
The Challenge:
Busy professionals and commuters face time constraints preventing them from preparing meals.
The goal:
Revolutionizing Vin’s Sandwich Shop’s outdated phone-based ordering system, I am developing a streamlined and secure ordering app. This innovative solution ensures swift and convenient food ordering for pickup or delivery, elevating customer experience. My goal is to establish a competitive product that modernizes the traditional approach.
The Product:
Vin’s Sandwiches, situated in Los Angeles, California, is a local Vietnamese sandwich shop. Catering to a range of customers, including local residents, office employees, commuters, and students, the shop provides a selection of wholesome and cost-effective sandwiches. The establishment satisfies the need for delicious, affordable, and time-efficient local dining options.
My role:
UX designer designing an app for Vin’s Sandwiches from conception to delivery.
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Project duration:
4 weeks
Understanding the User
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was working adults who don’t have time to cook meals. This user group confirmed initial assumptions about Vin’s Sandwiches customers, but research also revealed that time was not the only factor limiting users from cooking at home. Other user problems included obligations, interests, or challenges that make it difficult to get groceries for cooking or go to restaurants in-person.
User Pain Points
Time
Working adults are too busy to spend time on meal prep.
Accessibility
Platforms for ordering food are not equipped with assistive technologies.
IA
Text-heavy menus in apps are often difficult to read and order from.
User Pain Points
Problem statement:
Rena is a busy working adult who needs easy access to healthy food ordering options because they have no time to cook dinner for themself.
User journey map
Mapping Rena’s user journey revealed how helpful it would be for users to have access to a dedicated Vin’s Sandwiches app.
Starting the design
Paper wireframes
Taking the time to draft iterations 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 the 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.
Payment confirmation is an issue that users mention during the initial test for usability study.
Low-fidelity prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected were ordering sandwiches, checking out, and tracking delivery, so the prototype could be used in a usability study.
View the Vin’s Sandwiches :
low-fidelity prototype
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 needed refining.
Refining the design
Mockups
During early usability study, users find it difficult to find menu icon and get confused with the menu. Therefore, I added menu icon into the fixed position bottom bar; and divided the top menu into three separated buttons.
The second usability study revealed frustration with the checkout process. to fix this problem, I add the “Confirm screen” and give option for edit info.
Key mockups
High-fidelity prototype
The final high-fidelity prototype presented cleaner user flows for ordering sandwiches, checkout, and tracking order. It also met user needs for a pickup or delivery option as well as more customization.
View the Vin’s Sandwiches
high-fidelity prototype
Accessibility considerations
1
Provided access to users who are vision impaired through adding alt text to images for screen readers.
2
Used Icons to help make navigation easier
3
Used detailed imagery for sandwiches to help all users better understand the designs.
Going forward
Takeaways
Impact:
The app makes users feel like Vin’s Sandwiches really thinks about how to meet their needs.
One quote from peer feedback:
“The app is easy to use. Its’ menu is easy to navigate. In addition, tracking order feature makes this app fun and useful.”
What I learned:
While designing the Vin’s Sandwiches 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
1. Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
2. Conduct more user research to determine any new areas of need.
More Design Projects to Check out
