Designing an app to simplify dining experience for restaurant patrons: A product design case study

In this case study, I’m going to share insights on the design decisions I made while designing an app that connects restaurant and diners.

Dining out is no longer just about food; it’s a holistic experience that involves technology at its core. Customer experience is set to become the priority along with serving delectable dishes.

The restaurant industry’s digital transformation is one of the pandemic’s success stories. Eateries whose very existence was imperiled by mandatory closures adapted overnight with dramatic digital makeovers to sustain themselves through the worst of the crisis.

Since the pandemic’s disruption, moreover, the digital shift itself has evolved from a stopgap measure for survival into a proven recipe for restaurant efficiency and customer convenience. Faced with continued staffing shortages and persistent inflation driving up costs, restaurants are inventing themselves anew with ever-increasing levels of technological sophistication, including automation and robotics.

Problem Statement:

Successful restaurant brands recognize the needs of their guests, focus on analytics, and attract customers in a highly personalized way. Designing an app to simplify dining experience for restaurant patrons.

🛈 Project Information:

Context:

I completed this assignment as part of the 10k Designers Cohort 7 program.

Problem context:

Product Goals

An online solution that will enable its users tobook tables, access menus at restaurant, order food from the restaurant’s menu, and checkout.

Some constraints:

1. The app is intended for an Indian audience, mostly the urban metropolitan audience, since I didn’t want to involve too many different kinds of dining culture in the ideation for the app at this stage.
2. Some ideas assume some infrastructure on the part of the restaurants, and piggyback on apps in a related field that already exist.

Investing in digital improvements can have a tremendous impact on increasing the average check size as well as enhancing dining frequence, customer loyalty, and conversion.

Design Process :

I believe that design process is very subjective and context dependent. It changes from project to project depending upon the scope and complexity of the problem statement. Here’s my process for this particular project.

🔍 Diving deep into the problem statement / Research

Understanding the problem correctly is the first step toward the solution.

Research Goal

To learn about how customers use digital tools to order food of their choice in the restaurant without a need for a waiter. Understand the user, who they are, their lifestyle and whether would they be interested in ordering food through an online platform such as a mobile application, or not.

• Design a simple, intuitive and functional mobile interface.
• Learn more about the product and discover new ways to create a cleaner, cohesive & functional experience.
• Create agility to share and communicate with others in the food community.

First Phase — Empathize

I started in the Empathize Phase to identify issues and gain a deeper understanding of potential users.

In-Depth Interview

After getting an understanding of potential users through an online survey, I interviewed 5 potential users from the age range 18–25 who often experience problems in serving a restaurant. I’d like to know their behavior when they run into those problems by putting together the problems potential users are experienced in the form of validated issues.

🤩Competitive Analysis

I went ahead and collected screenshots of several apps to observe how they show content screens and the common patterns.

The common patterns I observed:

• Onboarding-Sign up and account setup-Profile-Search and filter-payment-reviews-reservation etc….

Second Phase — Define

I continued on the define phase after doing the empathy phase. Where in this phase I want to determine our target users based on the behavior I found during the In-depth Interview and identify the pattern of problems I found from the previous phase.

User Persona

I moved on to framing a user persona, which was the culmination of all the research that I had done prior to this step. It helped me to decide the primary features for the app and guided my design decisions.

User Journey Map

I moved on to creating the user journey map which is a visualization of the steps a user would take to accomplish a goal. I started with the user’s thoughts down to providing better opportunities that can improve their restaurant reservation experience.

Third Phase — Ideate

I continued the ideate phase to find ideas that can be used to overcome these problems. This phase requires several points of view to produce a solution. Some of the ideas that have been collected will be evaluated to find the best ideas.

Prioritization Matrix

From the user journey map, to find effective and efficient products. I plotted it into the impact-effort matrix.

User Flow

I created a user flow of an application that will be designed to show how a user performs a task in the application.

Information Architecture

I’ve designed an information architecture (IA) to visually map out how information is structured and organized on the landing page.

✒️ Wireframing

Now I go crazy while doing wireframes, and I absolutely love it. Pen and Paper wireframes are fastest way to get your ideas out and also best to try out different layouts and iterations in less time.

🎨Visual Design

After finalising wireframes, it was time to start exploring the visual style of the app. Before showing you the final designs and taking you through my moodboard process, here’s a quick behind-the-scenes look at the figma file & styleguide.

💥 Introducing ScanBite

Scan bite is an app for simplify dining experience for restaurant patrons by providing a one stop solution and maximum benefits. Its bridge between restaurant owners and diners.

Design System

Before going to the hi-fi stage, I decided to organize a small design system for UI consistency. Apart from this, the design system has its advantages. Like saving designer time and developer.

🔥 Onboarding

• Onboarding introduces users to key features, reduces the learning curve, and increases engagement.
• Onboarding also demonstrates the app’s value and how it can benefit users.

📱 Sign up & account setup flow

My thought process while designing the sign-up was to keep it simple and easy to navigate. Users should only enter relevant information and not be ambushed with input fields and asked to provide non-relevant information.

The sign-up flow has two main options for users to get to the home screen:

1. If the user is new to the app, they should create an account by entering their mobile number, and subsequently completing the account setup flow.
2. If the user is already registered within the app, they just need to enter their registered mobile number and enter the OTP sent to that number.
3. Signing up through Google, Apple, and Email.

📱 Home screen and food ordering flow

After passing through the opening and login stages, the user will be shown the home screen display. On this screen, users can find many features starting from the top, they can see options to book a table, scan a qr to get their menu, checkout their rewards , restaurant promos, and last orders.

In addition, users will also find a navigation bar containing home, search, activity, and profile. The navigation bar will appear on other screens, including the search, activity, and profile screen.

1. Afterscanning the QR, the user will be shown a restaurant home screen. On this screen, users can view all available menus and place orders by entering simple data as desired.
2. The user will be shown a summary of the food choices, the amount to be paid, the discount, and the choice of payment method. The method used can be an online wallet, virtual account transfer, or cash payment.

📱 Payment flow

After paying off the bill, the user will get a queue number and wait according to the estimated time listed on the screen. User can send their compliant for the food condition or the service.

During user research, payment process becomes confusing when they dine in with co workers or friends. Users encounters difficulties when splitting te bill after finishing their meal. To address this, the app offers two options: “ Split evenly” and “Split by amount”, which helps users resolve this situation.

This review feature is extremely important so that the restaurant can up their game and also from a customer point of view it provides them details of the accumulated ratings given by diners.

📱 Table reservation flow

Another main important flowof this app is the table booking reservation. The app can suggest users categories like nearby, what’s new, highly recommended groups. Fine details like distance, pricing, location , cuisine and rating are categorised according to priority in the restaurant cards.

Highlights like filling fast, available today are shown to make users make more better decisions and show them the urgency before hand to avoid disappointments after skimming through the process.

When using the app to book a table at a restaurant, users want to know in advance where the table will be and what the atmosphere will be like. Based on interviews with users, they have been disappointed in the past when they arrived at a restaurant and didn’t get a table they had expected to. Users also prefer having this information easily accessible on the screen where they choose a table, similar to the “ Book my show” app. This app includes these features so that users can select their preferred table without any difficulty.

📱 Rewards and scanbite circle

The goal is to not only simplify the dining experience but also to create a more engaging and rewarding relationship between the restaurant and its patrons. This encourages customer loyalty, word-of-mouth marketing, and a positive overall impression of the dining establishment.

1. Loyalty Points:

• Point Conversion: Points can be converted into rewards, discounts, or free items, providing an incentive for repeat business.
• Customization: The app can allow restaurants to customize loyalty programs based on their preferences, such as offering bonus points during special events or happy hours.
• Tiered Systems: Implementing tiered loyalty programs where users unlock higher benefits as they accumulate more points.

2. Rewards Referrals:

• Referral Bonuses: Users receive rewards for referring friends or family to the restaurant through the app.
• Trackable Referrals: The app should track successful referrals, attributing them to the right users to ensure accurate reward distribution.

I have gone a little further bydesigninga few screens on the restaurant owner end like login, order, menu availability and business analytics screens to explain how all of this is connceted with the diner end.

🏁And that’s a Wrap!

Hope you enjoyed reading the case study. I had a great time working on it!

If you have any feedback, feel free to drop it in the comments, and I will surely look into it.

Thank you for your patience and time.

Learnings and Takeaways

• Recognizing user psychology and showing empathy towards user challenges is crucial. It is only through this understanding that you can create a solution that effectively addresses the underlying issues.
• The greater the investment of time in crafting user flows and information architecture, the smoother the process of designing visuals becomes.
• Designing tiny cards and understanding the Information Architecture to present the data points was challenging.

What are the next steps?

• Usability test of the prototype with potential users
• Research and improve user flow
• Realization of ideas into business concepts
• In-depth research on related features

🤝I am looking out for opportunities as a Product Designer. If you’d love me to be a part of your awesome design team, do reach out to me on Linkedin . I’d love to have a conversation with you!

PS: If you long hold the clap button, you can give up to 50 claps on Medium