Designing a better dine-in experience
Concept Case study • May 2021
Problem
The food ordering process at regular dine-in restaurants is inefficient and often lacks behind in modernization.
Goal
Design a mobile app for restaurants that allows digitized, contactless food ordering.
Solution
A web-based mobile app that allows customers to carry restaurant menu in their pockets. It can be accessed instantly from their restaurant tables and provides quick, delightful and contactless food-ordering experience.
Personal Concept Project | May, 2021 | 2 weeks
Roles: User Research and Interviews, Ideating, Wireframing, Prototyping, User Testing, Iterating, Mockups and Documentation.
Empathizing
User Research
For the user interviews, I selected those people who went to restaurants at least twice a month. I wanted to learn about their experiences with waiting for the table, choosing what food to eat, dining, paying, takeout and advanced booking. I analyzed the responses to try and identify their pain points and opportunities for improvements.
Although I asked about several stages of the restaurant experience, I later decided to narrow my scope to only the ordering process for dine-in foods.
Meet the Users
Based on the interviews, I focused on two types of fictional user personas for my design. Each of them has goals and pain points that I aim to tackle.
User Journey Map
By analyzing the path taken by people to order dine-in food at restaurants, I could identify areas of opportunity for improvement. The ideas were prioritized based on the value to the users.
Defining
The Problem
Diners at restaurants are often frustrated by the inefficient management of waiters resulting in bad experiences like orders being mismanaged and requests being ignored. When waiting for their food, they have to repeatedly call the waiter to know their order's status, leading to frustration. Even the last stage of asking for a bill and paying it can get frustrating when the waiters are busy.
Solution Goals
I aim to design a mobile-web app that can be quickly accessed by customers when they enter a restaurant, providing:
Goal 1
A seamless and quick dine-in food ordering process.
Goal 2
A delightful and engaging experience to the customer.
Ideating
I analyzed other apps and services that provide similar mobile/tablet based service of ordering food at restaurants. I identified the common patterns in those services that I could include in my app.
I then tried to identify features that these services don't address well and tried to come up with solutions. The Crazy Eights exercise and the How Might We's exercise helped me in this case.
Customer Storyboard
Ideating for features
Lo-fi Wireframes
Sketching wireframes helped me to clear the user flow of the app and rapidly put down ideas for evaluation. The ideas I liked at this stage helped me to create digital wireframes.
Prototyping
Digital Wireframes
The digital wireframes helped me to design the interactions of the user and to lay a foundation of the final prototype.
Initial wireframes to figure out the process that a user follows to order the food
User Testing
I reached out to some participants to try out my prototype on Figma and share their views. The main purpose of this test was to optimize the food ordering process.
Refining the designs
I used the user testing insights to solve issues with the food-ordering process. I also added other features inspired from competitive analysis and from the general need of Indian diners.
To get new users started quickly and solve for usability insight 4, I can use the theme color and clearer button text to guide the users for a successful journey.
Final Mockups
App Features
Watch the kitchen
I figured that customers could be bored while waiting for their order. I provided a way for users to watch their food being cooked. This is similar to a Dhaba or a Food Cart where customers are excited by the food being cooked in front of them. Apart from killing boredom, customers could also be informed that their food was being prepared, which can replace the scenario where customers repeatedly ask the waiters about the status of their order.
Recently Served
Through user interviews, I discovered that sometimes people would be impressed by a food item that other people had ordered and would try to find the same in their menu. Recently ordered displays the food items ordered by other customers, which lets users order dishes that are being loved by people.
Food Ordering
To improve the efficiency and speed of ordering, I took inspiration from a general restaurant. The orders there are usually sent in small batches, wherein the customers will order a 'set' of meals and the payment is made in the end.
This model has several advantages:
Less Commitment
The customers don't have to commit to their choices - knowing they can easily try other meals later.
Knowing the restaurant's strength
Customers can try out the foods at a new restaurant and can re-order what they liked, based on their previous 'set' of orders.
Reduced food wastage
Since customers will not order all food at once, they are less likely to order more than they can eat.
[Assumptions based on experience]
Categorized items
Through my own experience with food-ordering at restaurants, I was aware that most Indian meals consist of pairings of food like Rice with Daal and Sweet, Breads with Curry, etc. This is also how most Indian restaurant menus are designed.
Therefore, I sorted the food into category tabs so that customers can easily jump from one to another. This is more efficient, as a customer is more likely to order one or two items from one category and jump to another for its pairing.*
e.g. A customer chooses a starter, then jumps to daal, then jumps to curry, then jumps to bread, finally jumping to a sweet. To make this list scrollable meant a lot of wasted time. The alternate idea of showing only top 4-5 items from a category would hamper discoverability.
*[Assumptions based on experience]
Final Thoughts
With this case study, I have attempted to design a web-based app that removes friction from regular dining orders. The solution offers unique and exciting features like "recently served" and "watch the kitchen". The digital menu is easily updated by the restaurant and can offer customers a better insight of the food items through images, description and reviews. The solution also reduces the expenses of restaurants and creates a more efficient digital system that can reduce manpower.
There were several ideas that can be incorporated to make the web-app more efficient and valuable. In the real-world, based on common behaviors of customers, we can optimize the interface and add other useful features like a personalized recommendation system or an audio chatbot from which customers can ask about food suggestions and request services.
Key Takeaways
In this project, I tried to properly apply design thinking and identify the "real" user problems. This gave me lots of insights into how we can leverage the users to find the solution.
Focus on what is important
If you just listen to the users' pain points and suggestions, the number of problems to solve can get huge. Therefore, it is important to narrow down the problem space, identify trends among the user pain points, and focus only on the most important and most impactful problems.
'Cooler' is not always 'better'
I was tempted to add very interesting features that I found in other apps and from my ideations - to make the web-app "cooler". But that can increase clutter and can take us away from solving the main problem of the user.
The purpose isn't to add 'more features' - it is to add 'more value'.
A project like this is even better when more people are involved for contributions and bringing different perspectives to the table.
If you liked this project and would like to discuss a future collaboration or just wanna have a quick chat, feel free to reach me out on LinkedIn.
YOU'VE REACHED THE END OF THE ARTICLE!