My Role
UX designer from conception to delivery.
Project Duration
November 2022 - February 2023
My Responsibilities
-
Conduct interviews
-
Wireframe on paper and digitally
-
Design low and high-fidelity prototypes
-
Conduct usability studies
-
Account for accessibility
-
Iterate on designs
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
Support
Not adding ingredients to the menu means those with diet restrictions can’t freely order
IA
Lack of screen reader technologies and translation services leave out individuals with disabilities
Financial
Membership systems to reward frequent customers
Hover to read more
Personas
Below are the 2 personas I created to help me in developing my app for a larger group of users.
“My family and my patients come before myself”
Age:
Education:
Hometown:
Family:
Occupation:
40
Bachelor's Degree
Singapore
Wife & Daughter
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.
Nathan Tan
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.
Ashley Uwir
“I don’t find being the ‘coffee girl’ demeaning, I get to connect with more people than those I work directly with”
Age:
Education:
Hometown:
Family:
Occupation:
20
Final Year University Student
Singapore
Parents & Sister
Marketing intern at large firm
Empathy Maps
Hover to read more
FEELS
DOES
SAYS
THINKS
-
‘My daughter has many allergies so it's quite difficult when ordering.
-
Wants to know ingredients list
-
Wants to order food on the go so he can save time
-
Vexed that not all apps have screen reader technologies
-
Tired at the end of shift
-
Frequently buys food home for daughter & wife
-
Skips meals because of waiting and preparation time
FEELS
DOES
SAYS
THINKS
-
‘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’
-
Membership system would be beneficial
-
Menus need to be simpler for non-English speakers
-
Frustrated that she has to wait in line
-
Confused by complex menus
-
Regularly buys coffee and food for colleagues
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.
Hover to read more
Persona: Nathan
User Story / Scenario: (Big picture) Use a food menu app to order from a street food vendor
Nathan is hungry after his shift & wants to order food for him & his daughter
He views the menu & places his order
Nathan walks to his usual food vendor
Nathan receives his food after the app prompts him that his order is ready
Nathan arrives home to have dinner with his daughter
Nathan scans the QR code to view the menu
Hover to read more
Persona: Nathan
User Story / Scenario: (Close-up) Use a food menu app to order from a street food vendor
Nathan scans the QR code to view menu
Nathan goes to the cart to review his order
He views the menu and decides what to order
He inputs his details & proceeds to checkout
He gets to the order status screen which tells him when his order will be ready
He selects the tacos menu to view options & uses AT for help
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.
Hover to view the concerns.
Customisation options did not allow for multiple quantities of an ingredient
Order status should include a specific time (e.g., 3pm) instead of a duration (e.g., 30min)
Homepage layout was unfamiliar
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.
Hover to learn about the changes I made
Wireframe
Hi-fi Prototype V1
This initial colour palette was changed due to accessibility standards. When checking colour accessibility standards, the initial colour palette did not pass, hence the decision to opt for a blue instead., which is also more calming and less jarring.
Early designs allowed for customisation but not in a way where users could determine the quantity. I also added a section for comments.
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.
Typography
Buttons
Chips
Colours
Icons
Cards
Navigation
Miscellaneous
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
Hover to learn more
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.
Takeaways
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.