Project Overview
Summary: As the UX designer, I began by conducting user interviews to understand real needs and challenges. These insights shaped my personas and informed both paper and digital wireframes. I then created low-fidelity prototypes, iterated on them through usability studies, and refined the designs into high-fidelity prototypes. At every stage, I kept accessibility in mind to ensure the final product was inclusive and easy to use.
The Problem
Busy individuals waste time queueing and waiting for their food. They also want more customisation options in cases of food allergies.
The Goal
Design a food menu app that allows users to customise orders and order in advance along with letting them know when their order will be ready.
User Research Summary
I conducted competitive analysis and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was working professionals who don’t have time to prepare their own meals.
This user group confirmed initial assumptions about El Rancho’s customers, but research also revealed that time was not the only factor limiting users from cooking at home. Other user problems included obligations and food allergies.
User Pain Points
Time: Long waiting times and not knowing when orders are ready
IA: Lack of screen reader technologies and translation services leave out individuals with disabilities
Support: Not adding ingredients to the menu means those with diet restrictions can't freely order
Financial: Membership systems to reward frequent customers
Personas
Below are the 2 personas I created to help me in developing my app for a larger group of users.
Nathan Tan
“My family and my patients come before myself”
Age: 40
Education: Bachelor's Degree
Hometown: Singapore
Family: Wife & Daughter
Occupation: Nurse
Goals
Order food on the go
To be able to know what ingredients are in each food menu item
Frustrations
Hectic schedule that always changes
Not all apps have screen reader technologies
About Nathan
Nathan is a 40-year-old nurse who lives with his wife and daughter. Since his wife is also a nurse, their schedules are always changing so Nathan and his family rely on ordering food very often. Nathan would like to be able to order food on the go instead of having to always queue in line since he prioritises his patients, sometimes even skipping meals. He has struggled with apps that don’t have the screen reader technologies he relies on. Nathan also orders food to bring home for his daughter who has a number of food allergies. He feels it would be helpful to have the ingredients listed out so he doesn’t order something his daughter cannot eat.
Ashley Uwir
“Being the ‘coffee girl’ means I get to connect with more people than those I work directly with”
Age: 20
Education: Final Year University Student
Hometown: Jakarta, Indonesia
Family: Parents & Sister
Occupation: Marketing intern
Goals
Order in advance and know when her order will be ready through the app
Membership so she can collect points from her favourite stalls
Frustrations
Complex menus that confuse her
Long lines and getting the timing right when ordering large numbers of food or drinks
About Ashley
Ashley is a 20 year old final year university student that interns at a large marketing firm. Ashley’s first language is not English so she often struggles with menus that are too complex and don’t allow her to change the language. Ashley often orders food and coffee for her colleagues when making her coffee runs as she feels this is a great way to network with those on her team. These large orders often either take quite long to make, or if she orders in advance, are already cold by the time she picks them up.
Empathy Maps
Nathan
SAYS
'My daughter has many allergies so it's quite difficult when ordering food'
THINKS
Wants to know ingredient list
Wants to order food on-the-go so he can save time
DOES
Frequently buys food home for daughter & wife
Skips meals because of waiting and preparation time
FEELS
Vexed that not all apps have screen reader technologies
Tired at the end of shift
Ashley
SAYS
'I want to order beforehand and know when my order is ready'
'I either have to wait in line or my order is already cold when I pick it up'
THINKS
Membership system would be beneficial
Menus need to be simpler for non-English speakers
DOES
Regularly buys coffee and food for colleagues
FEELS
Frustrated that she has to wait in line
Confused by complex menus
Storyboarding
I created 2 storyboards using 1 persona to visual the user experience with my app. These were created with Lucian Popovici’s Storyboard Mix-and-Match Library on Figma.
Persona: Nathan
User Story / Scenario: (Big picture) Use a food menu app to order from a street food vendor
Persona: Nathan
User Story / Scenario: (Close-up) Use a food menu app to order from a street food vendor
User Journey Map
Mapping Nathan’s user journey revealed how helpful it would be for users to have access to a virtual menu for a street food vendor.
Persona: Nathan
Goal: Order suitable food for his daughter after his shift ends
ACTION | Check what daughter would like to eat | Look through menu for suitable options | Place his order | Wait for his food | Collect food |
|---|---|---|---|---|---|
EMOTIONS | Unsure about what daughter would like to have | Worried about ingredients Frustrated with reading the small font | Anxious about whether the order is done right | Tired from a whole day of work Impatient about the long wait | Relieved that order is ready and is safe for his daughter |
TASKS | A. Message/call daughter to find out what she would like to have B. Check if the menu has what she wants | A. Look through the menu for ingredients B. Wait in line | A. Relay order to server B. Double-check with server on allergens C. Make payment | A. Gather cutlery & napkins | A. Pick up order B. Check that order is correct |
IMPROVEMENT OPPORTUNITIES | Allow for group ordering on the app so the order can be shared with loved ones | Create an app that lists out ingredients and has larger font & images Optimise app to have screen reader technologies | Offer virtual payment | Create an app that offers order status updates | Collect food |
Wireframing & Lo-Fi Prototype
After creating all the digital wireframes, I created a low-fidelity prototype to be used in a usability study. The primary user flow was to customise a food menu item. To get some feedback for improvements, I conducted a usability study using the low-fidelity prototype.
Early Design Mistakes
In the earlier iterations of the app, there were concerns with the layout of certain pages that hindered the intended user experience along with accessibility concerns with regard to the colour palette.
Sticker sheet
After the main user flow and wireframing were complete, I moved on to the design components of the app. The colour palette had to undergo some changes as the initial palette did not pass accessibility standards. I also utilised icon components from Material Design. You can find my sticker sheet for the app below.
Hi-Fi Prototype
Once the main design elements were established, I worked on creating a high-fidelity prototype that includes transitions and animations for a more realistic user flow. It also meets user needs for customisation and status updates.
Accessibility Considerations
Buttons are large enough to be easily clickable for anyone. Text is also scaled to sizes that are easily readable.
Colour combinations meet accessibility standards, hence being helpful to those with visual impairments.
Navigation icons include text below for screen readers to interpret.
Reflections
Impact
The app helps El Rancho’s customers customise their orders to their needs and gives them an accurate status update so they can save time waiting in line.
What I’ve Learnt
I’ve learnt that the initial designs and the final designs may look very different. Especially so after rounds of feedback from usability study participants and peers.
Next Steps
Conduct another round of usability studies to check if the user journey flows well enough.
Work on improving other areas of the app’s design that were not covered during this project.
El Rancho
El Rancho is a Mexican street food vendor conceptualised for my Google UX Design certification course.