Halla a Menu In-House Order Menu/Payment Mobile App
Halla app is an in-house order menu/payment mobile app for restaurants. Aiming to help people place an in-house order by using their mobile phones.
The Product
An in-house order menu/payment mobile app for restaurant.
The Duration
May to July 2021
My Role
UX designer designing an app for restaurants in-house orders menu/payment.from conception to delivery.
Responsibilities
Conducting interviews and surveys, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
The Problem:
Menu has disappeared from all restaurants with the pandemic, many countries sat up new regulations. Therefore many restaurants start using QR code that leads to PDF file in a cloud services which is not an ideal experience as viewing a full A4 size menu in a mobile screen hasn’t been a great idea ever since smart phone were invented. menu/payment app has become an essential part of the hospitality industry if there is a chance of a fast economic recovery within the next three years.
The Goals:
Our Halla App will let users brows food menu order and pay for an inhouse experience which will affect how people enjoy their time outdoors by providing a fast and contact free food ordering experience. We will measure effectiveness by tracking QR codes URL and user app review as well as the number of order.
Understanding The User
User Research: Summary
I conducted interviews and created empathy maps to understand the end-user needs. A primary user group identified through research was working adults who enjoy dining experiences outdoors with friends and family yet find navigation through the paper menu and the classic way of ordering food to be frustrating given the pandemic regulation.
The same user group confirmed initial assumptions about potential digital menu app users, and it confirmed that hygiene was not the only factor limiting users from enjoying an outdoor dining with their loved ones. Hygiene was not the only factor limiting users from using digital menus. Other user problems included accessibility and information architecture related issues, which made it difficult for many users to navigate through small food picture apps or pdf menu that was hard to read in smaller screen like mobile phones.
User Research
Pain Points
Hygiene
Adults were too afraid to return to restaurants for dining duo to the pandemic.
Accessibility
Traditional paper menu were considered to be a high threat as it might contain viruses which can be avoided in digital form.
Information Architecture
Small pictures app and pdfs menus are often difficult to view and order from.
Problem Statement
Ahmed is a full-time employed engineer that enjoy weekends dining with friends who needs a better restaurant menu experience to order and pay because the less time he spent in ordering the more time he has to enjoy and so the less anxious he will be.
User Journey Map
Mapping Ahmed's user journey show how such menu app might help him get a better and less anxious dining experience with his chosen company.
Starting the Design
Paper Wireframes
To ensure that the elements that made it to digital wireframes would be well-suited to address users pain points. I prioritized a quick and easy ordering process including big visuals, to help the end-users accept the new safe normal when it comes to food in-house orders.
Digital Wireframes
The goal was to design a simple and familiar user interface. the first page of the app is inspired by the use of camera in SnapChat which is the top social media used in Saudi Arabia followed by twitter.
Main Page
The goal is to make everything visible to the user in one page as this is about spending less time ordering so they can focus on enjoying their time.
Lo-Fi Prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was ordering a meal, so the prototype could be used in a usability study.
Affinity Diagram
Usability Study Findings
Two rounds of usability studies were conducted; The first study findings helped guide these designs from mockups design to wireframes. The second study used a high-fidelity prototype and revealed what aspects of the mockups required refining.
Round 1 Findings
Users wish to be able to pay right from the app before/after enjoying their meal.
Users want more customization options.
Users wants to access their favorites food at their profile page.
Round 2 Findings
The lack of the back button has confused users navigations
Users want to be able to choose their table number at the beginning.
Refining The Design
Mockups
Early designs missed the a clear add buttons, the usability studies lead to adding an additional option to Add the quantity number. The rating design were minimised so users can focus more on the big meal visuals when they first land on the screen.
The second usability study revealed frustration with the navigation flow. to organise this flow, a back icon were added instated of the map icon at every page including the home page, and the chosen restaurant logo were aligned in the middle of the top bar for easy and clear UI.
Key Mockups
Hi-Fi Prototype
The final high-fidelity prototype presented cleaner user flows from scanning the chosen restaurant QR code to order and checkout. It also met user needs for a paying later option as well as choosing the table number.
Accessibility Considerations
Used Hardware such the phone camera to save users from entering website address or searching the app stores.
Used detailed Big visual of food to help all users better understand the designs.
Provided access to users who are vision impaired through adding alt text within the meal nutrition info card for screen readers.
Going Forward
Takeaway
Impact
The app makes users feel like they can have their favourite restaurants menu accessible through their mobile phones at anytime they check in.
One quote from peer feedback:
“I would definitely use this app as a go-to for menu in house order as I am really tired of PDFs menu navigation on my phone screen.”
What I learned
While designing the Halla app, I learned that how our own biases can influence the work we do without realising it, methods like design thinking and usability studies and end-users feedback influenced each iteration of the app’s designs.
Next Steps
Adding search location Functionality As it would give a wider users more choice of accessing the service.
As this solution would help navigating through the location for drivers and will make the user experience better for everyone.
Search the ability of people of disability to access the app.
You Have a Project Idea in Mind?
Email Me at BaMukaideh@gmail.com