The is a project to design a food ordering app for a restaurant. The restaurant I chose for this project is Handlebar, a biker bar in Singapore.
This is a personal self initiated project and is not associated with Handlebar in any way.
UX Designer, UX Researcher
Conducting interviews, paper & digital wireframing, low & high fidelity prototypes, conducting usability studies, iterating on designs
November to December 2021
Figma
Handlebar is a grungy biker-themed restaurant serving American-style food. Most of their revenue come from dine-ins. However, due to the ongoing pandemic and constantly changing government restrictions, more people are choosing to order food straight to their homes.
My goal was to create a product which will allow users to order food delivery from Handlebar easily. At the same time, I hope that this will help to improve sales and increase customer satisfaction.
I conducted interviews with 5 participants in two main categories - people who ordered food delivery frequently, and people who rarely did so. These participants were between ages 30-65 and of different gender and education background. I learnt about the challenges users face when using a mobile app to order food. These are some common pain points:
Users need to know estimated time of delivery on or before the check out page. If it takes longer than what they are prepared for, they will order something else.
Users are used to ordering quickly ever since the pandemic saw a surge in delivery services; anything more than 5 steps from the first page is no longer acceptable.
Users prefer to open the app to the menu immediately, any signing in/up for membership should be left to the checkout page
“I like things to be efficient.”
Age: 33
Family: Single, lives alone
Education: Masters Degree
Occupation: Marketing Manager
Meredith is a busy professional in a big advertising firm. She gets her lunches delivered 3x a week. As she has back-to-back meetings, she gets frustrated when there is any delay or inconvenience in the food delivery process.
“A simple life is a happy life!”
Age: 65
Family: Wife and 2 children
Education: O levels
Occupation: Retiree
Ah Huat is an easy-going retiree who enjoys getting out of the house and socialising with people. He is not very tech savvy but would consider using an app to order food if the interface and process is simple enough.
I mapped out Ah Huat’s user journey and it revealed how helpful it will be for users to have access to a dedicated Handlebar app.
I outlined a user task flow of what a basic start to finish journey looks like while ordering food or making a reservation. This allowed me to see the complete app experience at a holistic level. This includes the decisions that users may have to make (represented by diamond), and pages that have to be created (rectangle).
To brainstorm and test the initial design, I did some concept sketching on paper. This allowed for rapid iteration and is the fastest way to get ideas out. I created a basic outline of each page of the app using lines and simple shapes. This allowed me to focus on structure and function before visual elements like colour or font are added to the mix.
Next, I moved on to create digital wireframes in Figma, to create a skeletal outline of the app. I mapped out how all the elements will look on each page and how users will navigate from page to page. This let me check if elements are missing, out of order, or disorganised. Finally, I used these digital wireframes for my low-fidelity prototype.
I conducted an unmoderated usability study using the low-fidelity prototype. The goal of this usability study was to find out if the main user experience of ordering food was easy for users to complete. I also wanted to understand the complete user journey from signing into the app, to placing an order successfully. These were some of my findings.
Filling in profile information can be a hassle for new users. Generally, we want new visitors to ease into our product with little resistance. Allowing for social media logins will simplify their lives and make them more willing to use the product.
“I wish there was an option to go straight to homepage, instead of having to update my profile first.”
- Participant A
Users prefer to see the food options immediately when signed in, as the main function of this app is to order food. I added a bottom navigation bar to keep it easy for users to navigate to secondary functions like making a reservation.
“I found the menu in 10 seconds, it should have been 2!”
- Participant B
Some users were confused by the "Item added to cart" page. It is an unnecessary step which made the ordering process longer. I removed this page and created an overlay instead. This overlay can be closed easily by clicking outside.
“What is this screen for? I already chose to add to cart in the previous page. This is confusing."
- Participant D
I applied changes to my wireframes based on the feedback received during the usability study, and added visual elements like colour, typography and images to create my mockups. Then I linked all pages together to create my high-fidelity prototype.
As a regular customer of Handlebar, this app design is an idea that is near and dear to my heart. I wanted to create a design that would be helpful to current and potential customers, which may help to drive Handlebar’s sales up.
As this was my first UX project, I learned a lot during the entire process from conducting user interviews, to wireframing, prototyping and conducting usability studies. Learning to empathise with the user and understanding how people use things has helped me to create more thoughtful designs. My next steps are to conduct another usability study to determine if the implemented changes resolved the pain points I found during my first usability study, and to conduct more user research to determine any new areas of need. I would also like to look at designing a loyalty or rewards program, as this may be beneficial to customers as well as Handlebar.
