top of page
13 mockups.png


El Rancho is a Mexican street food vendor conceptualised for my Google UX Design certification course.

Tools Used:

  • Figma

  • Jamboard

Experience my prototypes here:

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


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”







Bachelor's Degree


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

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


  • 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

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. 

Rectangle 28_2x.png

Ashley Uwir

“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

Empathy Maps

Hover to read more

Rectangle 26@2x.png





  • ‘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

Rectangle 28_2x.png





  • ‘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

Persona: Nathan

User Story / Scenario: (Big picture) Use a food menu app to order from a street food vendor

Storyboard scene_2x.png
Storyboard scene_2x-3.png
Storyboard scene_2x-4.png
Storyboard scene_2x-1.png
Storyboard scene_2x-6.png
Storyboard scene_2x-5.png

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

Group 53_2x.png
Group 55_2x.png
Storyboard scene_2x-2.png
Group 56_2x.png
Group 54_2x.png
Group 57_2x.png

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


Check what daughter would like to eat

Look through menu for suitable options

Place his order

Wait for his food

Collect 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

  • 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

Group 200@2x.png

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



Group 201@2x.png

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.




Group 202.png


Group 203.png


Group 198.png


Group 200.png


Group 199.png


Group 201.png


History Card.png
Search Bar.png
Text Box.png
Component 2.png

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.

iPhone 12 Pro-2.png
iPhone 12 Pro-4.png
iPhone 12 Pro.png
Arrow 4.png
Arrow 6.png
Arrow 3.png
Arrow 5.png
iPhone 12 Pro-1.png
iPhone 12 Pro-3.png
iPhone 12 Pro-5.png
Arrow 1.png
Arrow 1.png
Arrow 7.png
Arrow 8.png

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.

iPhone 12 Psro.png

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.

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.

bottom of page