Restaurant App
A mobile app that enhances the customer experience for Al-Qamar fast food restaurant.
My Role
Solo UX/UI researcher & designer
Tools
Figma
Project Duration
Three weeks
Overview
A popular restaurant in my hometown has yet to establish a digital presence in the form of an mobile app. In today's digital age, having a restaurant app can greatly benefit both the business and its customers. I saw the opportunity to design an app for this restaurant to address this gap and enhance the customer experience.
Problem
The restaurant lacks a digital presence, causing inconvenience for customers who wish to view menus, place orders, and track the status of their orders. This can lead to a less satisfactory customer experience.
Goal
Provide a convenient way to browse menus, place orders electronically, and track order status in real-time to improves the customer experience.
Solution
Primary Research
To gather insights and understand the needs of local customers, I conducted few informal interviews and created an empathy map.
- Difficulty accessing restaurant information and placing orders
- Limited knowledge about food options and dietary restrictions
Through the development of a restaurant app, I aimed to address these pain points by providing features such as the ability to view menus, place orders, track order status, and learn about food items and dietary restrictions.
Personas
User Flow
Wireframe
Usability Studies
- It was observed that 3 out of 5 participants were interested in learning about how other users would rate the food items. This means that participants value the opinions of other users when deciding what to order.
- It was observed that 4 out of 5 participants wants to see all the available categories without having to scroll down. This means that participants want an easy and convenient way to browse all available categories.
- It was observed that 2 out of 5 participants are accustomed to seeing automatic search results as they type in the search bar. This means that participants expects a search bar to provide real-time search results.
Home Screen
It became evident through the usability study that users were seeking a simpler way to browse all available categories without the need to scroll down. In response, I added a category section featuring a vertical scroll and grid view, a popular section to minimize overwhelming users, and a promotion section to highlight special offers. These improvements not only addressed user needs, but also significantly enhanced the overall user experience.
Search Screen
Two out of five participants were accustomed to seeing automatic search results as they typed in the search bar. This indicates that these participants expected real-time search results from the search bar. In response, I added search suggestions, filter options, and real-time search results. These enhancements enhance the overall user experience by providing users with the search results they expect and desire.
Order Screen
The order screen originally had an overwhelming amount of information and a lack of hierarchy in the design and layout, causing confusion for users. To address this issue, I made improvements to the design by only including necessary information and adding hierarchy to the layout. These changes enhance the overall user experience by making the order process more clear and intuitive for users.
Cart Screen
During the usability study, users raised concerns about not being able to see the total price on the cart screen. In response, I made an improvement to show the calculated total price on the cart screen before users proceed to checkout. This change allows users to have a better understanding of the total cost of their order before moving forward with the checkout process.
Checkout & Track Order Screen
To make checkout process more convenient for users. The app will track their location and save their address, so they don't have to enter it every time they make a purchase. I also created a tracking screen that shows a map view with the delivery location and estimated arrival time, so users can stay informed about their order status and know when to expect it to arrive.
High-fidelity Prototype
Inclusivity & Accessibility Considerations
- Multi-Language: Consider including multi-language support to accommodate users who do not speak English.
- Dark Mode Consider offering a "dark mode" theme for users who prefer low light environments or who may have light sensitivity
Takeaways
What I learned
Through this project, I gained valuable skills in time management and prioritization, as well as a deeper understanding of the importance of usability studies in the design process. I learned how to gather user feedback and insights to inform the design and create solutions that meet the needs of my target users. This experience was extremely rewarding and helped me grow as a designer, expanding my horizons and giving me the confidence to tackle future projects.
Next steps
- Usability study II: Conduct another round of usability studies with users to gather feedback and ensure that the current solution effectively addresses their pain points.
- Refine design: Based on the observations and feedback from the usability studies, further refine the design and add more interactive features to enhance the user experience.
- Propose solution: Propose the app solution to the restaurant owner and offer my assistance in development to bring this app to fruition and significantly improve the customer experience
Let’s connect!
If you have any feedback and constructive criticism, please send me a message, email or connect via Linkedin; any and all feedback and criticism will be highly appreciated.
Thank you for taking the time to read the case study.
