UX designer from conception to delivery.
November 2022 - February 2023
Wireframe on paper and digitally
Design low and high-fidelity prototypes
Conduct usability studies
Account for accessibility
Iterate on designs
Busy individuals waste time queueing and waiting for their food. They also want more customisation options in cases of food allergies.
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
Long waiting times and not knowing when orders are ready
Not adding ingredients to the menu means those with diet restrictions can’t freely order
Lack of screen reader technologies and translation services leave out individuals with disabilities
Membership systems to reward frequent customers
Hover to read more
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”
Wife & Daughter
Order food on the go
To be able to know what ingredients are in each food menu item
Hectic schedule that always changes
Not all apps have screen reader technologies
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.
Order in advance and know when her order will be ready through the app
Membership so she can collect points from her favourite stalls
Complex menus that confuse her
Long lines and getting the timing right when ordering large numbers of food or drinks
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.
“I don’t find being the ‘coffee girl’ demeaning, I get to connect with more people than those I work directly with”
Final Year University Student
Parents & Sister
Marketing intern at large firm
Hover to read more
‘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
‘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
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
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
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.
Goal: Order suitable food for his daughter after his shift ends
Check what daughter would like to eat
Look through menu for suitable options
Place his order
Wait for his food
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
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
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
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
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.
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.
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.
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.
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.
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.