Street Food Vendor Mobile app
When busy professionals working in downtown Chicago get hungry there’s always a food truck nearby. But busy people don’t have time to wait in line for food. And when there’s a problem with the order, busy professionals don’t have time to seek corrective action from the vendor.
The Street Food Vendor app will save working professionals from waiting in line and ensure their food orders are accurate when they opt for delivery.
Overview
In downtown Chicago there are a large number of alternatives to typical fast food options in the form of food trucks. The Street Food Vendor app allows users to order ahead of their trip to a food truck while avoiding any miscommunication that might occur when placing an order. Our target users are working adults who are short on time but want an alternative to McDonalds.
Timeline
December 2021
to April 2022
Role
Sole UX designer
Sole UI designer
Sole UX researcher
Tools
Figma
Adobe Photoshop
Pen & Paper
The Design Process
Empathize
Understand the user, their feelings, frustrations and goal, through research.
Define
Uncover insights gleaned from research to help define the core problem.
Ideate
Brainstorm solutions with the user centered in the design.
Prototype
Build tactile representations of solutions in the form of wireframes and a prototype.
Test
Test prototype with users to glean insights for the refinement of the design.
The Problem
-
Waiting in line when short on time
-
Communication issues at the counter
-
Forgetting details of order
-
Missed or incorrect items upon delivery
The Goal
-
Users can order before traveling to street food vendor.
-
App informs user when food will be ready.
-
User can avoid lines and pick up food upon arrival.
Target Audience
Anyone in the city of Chicago with access to internet can make use of Street Food Vendor. The demographic focus during design was working adults of all genders between the ages of 23 and 55 who often struggle to find time to eat during their busy and stressful work day.
Challenges
Confusing Interface
The interface needs to make ordering quick and easy.
Unclear Navigation
Finding information such as history of previous orders needs to be clear.
Tools
Not enough food apps offer images of menu choices.
User Research Summary
The goal of my research was to inform my product design with empathy maps and personas constructed from interviews. My initial assumption of the primary user group was that they are working adults who need fast stress free meal solutions. However, my research also revealed that they are people who spend a lot of time away from home. During the work week they rely on food trucks to eat while on breaks during their shift.
Methodology
A primary qualitative usability study.
Participants completed a list of guided tasks using a low fidelity prototype.
I directly observed each participant as they completed their study.
Each participant study session was recorded for later analysis.
Location
United States, via Zoom (each participant will complete the study from their home)
Date
Sessions will take place during the week of March 21 - 25, 2022
Length
Each session will last 5 to 10 minutes, based on a list of prompts.
Compensation
No compensation
Participants
Full time workers who order out for lunch during the workday. All genders, ages 23 to 55 years old
Themes
User research revealed that my early designs were overly complex. Navigation needed to be clearer, important information needed to be easier to find.
85
%
of participants want clearer indications of which page they’re on.
90
%
of participants want the shopping cart’s location to be easier to find.
78
%
of participants say the vendor search result list needs to be easier to recognize.
Insights
There were three major insight I gleaned through user research that helped further refine Street Food Vendor’s design to insure the app’s usability.
1
Common interface elements like a map or shopping cart icons are a must.
2
Horizontal scrolling allows access to long lists and require less space.
3
Simplicity is a best practice.
“I did not know if that was a nearby vendor…it
said vendor, so I clicked.” (Participant D)
Starting the design:
Paper wireframes
As I iterated through paper wireframes my aim was simplifying the user journey towards order completition. While keeping an eye on pertinent UI being easy to reach.
Digital wireframes
User research informed the information architecture of the earliest wireframes. A trend that maintained the entirety of the project.
User Wireflow
In this wireflow the user finds a nearby vendor and purchases an item for pickup.
Mockups
Accessibility Considerations
1
Between the mockups and final design contrast was heightened in the body text.
2
Some UI was moved lower on the screen for better accessibility.
3
Detailed food pics were used for the entire menu so all users could better understand its offerings.
Takeaways
This design lends warmth and appeal to the app.
"The wording makes me feel like I’m being taken care of." (Participant E)
The user journey laid a foundation that was refined through user studies and ideation. I learned not only how to let data influence design. But also how designing for accessibility helps all users.
Next Steps
1
Another user study will tell if insights gained from the previous study have been successfully applied.
2
More research to uncover other needs to be addressed.
3
A deeper dive to include more accessibility into the design.
