Case study introduction:

The product: A mobile app for a restaurant that is targeted for end users who are high-end and they are busy with their lifestyles

The problem: The aftermath of the Corona pandemic left many high-end restaurants with facing a new problem: how to satisfy a large number of clients via a sales app instead of serving tables.

The goal: To create a user friendly mobile app to help end users order, pay, have their food delivered and review the experience while sharing it with their friends/followers. Explore additional features that would improve the USP of the app.

My role: As a generalist, I have multiple roles on the development of this product: Lead of the UX research and UX design team

Programs used for the realization of this project: Figma, Illustrator, Photoshop

I conducted user interviews in an attempt to understand the main pain points of the end users. I also created empathy maps and together with research I conveyed I came down to 4 user groups which I translated to 4 buyer personas.

Since the users are covering a wide age range, I have decided to pick both male and female users that start from the age of 28 till the age of 50.

The initial assumptions were pretty much confirmed about the pain points which were around the time dedicated to cook, the priorities that those users have during their busy week, but research also revealed that time was not the only decisive factor. Other user problems highlighted the need of people to show that they eat from a well-respected restaurant that covered their nutritional needs.

User research: pain points

• 1st Pain Point

  The time spent on deciding which restaurant is worthy of trying (when the end user was not a relevant visitor / frequent buyer)

• 2nd Pain Point

  The delivery time was taking up too much and usually warm dishes would arrive cold.

• 3rd Pain Point

  No nutritional information is shown on the existing – competitive apps creating a huge opportunity for a competitive advantage.

• 4th Pain Point

  Too many options that confuse the users are often provided. A possible value proposition could be to offer the menu of the day providing a choice to go to the history and check out the dishes already ordered.

Value Proposition

A possible value proposition could be to offer the menu of the day providing a choice to go to the history and check out the dishes already ordered. But this is something that the research showed the competitors are already using.

There were many reviews on the apps that they pointed out the frustration the end users were feeling while being promised that the food will arrive in less than 30 minutes and as it turned out, because of various reasons, the promise was not kept.

The overloading of choices indicates that the restaurant has no character and offers far too many options, and the users not only are frustrated but also unsatisfied because this could show that the restaurant has no specialties. Why order a pizza when you can order Chinese or Dim Sum? It is not only a matter of taste or preference but also of the nutritional benefits at a very frantic pace of modern life.

The research has shown an increased willingness to eat something because it is appealing due to the nutritious benefits it offers. Eating healthy and bio products is not just a trend. It is a movement and is gaining momentum for years now. Highlighting the benefits for your health when consuming a meal is something that can keep up with the KPIs of the business and offer the end user a value proposition or else a huge competitive advantage.

Buyer Persona Development

Persona: Susan Social

Problem statement: Susan Social is a busy working adult who needs to eat healthy even though she does not prepare her food herself because she prefers to socialize with her friends instead.

Persona: Andrew Arbeit

Problem statement: Andrew Arbeit is a married man with a demanding profession who needs to eat well during the day because he needs to get enough energy to go through his busy day and also keep a great prestige.

Persona: Richard Rich

Problem statement: Richard Rich is a executive professional who needs a quick and reliable solution to his eating needs because he wants to focus on his work and hobbies instead of preparing meals for one.

Persona: Lilly Loyal

Problem statement: Lilly Loyal is a high-school educated employee in a bakery shop who needs an easy way of getting her lunch because she is sick of eating bread with something and it is a small reward to her loaded day.

User journey map

Competitive & Comparative Audit

I audited industry competitors to understand how competitive apps compares.

Why convey a competitive audit and what does it bring to the design process?

First and foremost, what a competitive audit includes?

• A clear goal

• identifying key competitors,

• reviewing the products that your competitors offer,

• understanding how competitors position themselves in the market,

• examining what competition does well and what they could do better,

• and considering how competitors talk about themselves.

 It will help quite a lot by informing the design process, solving usability problems as it is an informative way of how different iterations could be formed and how those performed for the competitors In addition to this, it helps with demonstrating the expected life cycle of a product in the same market as the one in the making and most importantly it reveals the ways that current products in the market are not meeting users’ needs. This is a gap for the product in the making must address!

Having said all that, it has to be conveyed regularly even if they have their limitations.

Find out the analysis by downloading this PDF file.

Problem Statement to Goal Statement:

The sales mobile app will let users order safely and quickly their food and then have it delivered, which will affect everyone by empowering them to choose smoothly from an app which highlights the nutritious ingredients of food of their choice.

Effectiveness will be measured by the number of people who visited the website and made an order till the end via the app.

User Flow

Paper Wireframes

Taking the time to draft iterations of the screens of the app on paper wireframes is something that is indicated for addressing the user pain points. With these quick screens there is a basic user flow depicted.

Stars are used to indicate that the elements will be used in the high fidelity prototype.

Digital Wireframes

Follow this link to be redirected to the Figma Prototype for lofi prototype and for the hi-fi prototype here.

Based on the research carried out and the user feedback, the users prefer to have nutritional facts about their food, therefore a nice to have feature is already depicted in the start page of the app with the show of “Nutritional Fact“ that counts every time the app adds one. They also prefer to find easily what they wish for and if they want to spend time, they also want to be provided with this option. In fact the preferences can be chosen by a scroll down menu, as seen on the screenshot #5.

After choosing his preference the screen shows the suggested meals with some basic info about the meal: name, estimated delivery time, how many stars have people given to the specific option and the price with the addition of a reduced price in red if that is the case.

Even though one of the competitive advantages of this app is the delivery time, the user can choose the preferred delivery time and whether he wants to pick up or not.

After concluding the order there is a Thank-You message where the user is offered the opportunity to save a discount for a future order or to share this discount to a friend. This way, more sales could be succeeded with this incentive, while more and more people could get notified that they can use this discount when they did not even know that this app exists. This feature can be adjusted by the editor and no additional discount can be offered but only a simple referral to a friend.

A bit more about the user flow: The user opens the app, and finds an interesting fact about nutrition. He could in fact, browse through the facts, but ideally that is not what we want the user to do. This is to take the pressure off the user of buying and add to his experience of getting knowledge about the important ingredients he needs to consume. Then he has the choice of selecting his meal or he browses through in case he needs to see meal proposals. In this user flow example, he picks “lunch” and he chooses from a roll over menu “chicken”. He then chooses from the same frame the “chicken curry” and moves to the next frame where he is asked if he has concluded his order. He decides to add a salad and he goes to “check out”. He reviews his delivery time and he chooses “delivery” over “pick-up”. A Thank-you message is finally displayed where he can choose to save his discount or share it with his peers.

Usability Study

Short Project Background: to create a product that is competitive, helps with the conversion rate and people get to know about it from their peers.

Study Details:

Research Questions:

1. How long does it take for a user to select and order using the app?

2. Is there a complete user flow from login in to the app till the check out? Is there a step where the users are stuck?

3. What is to learn from the steps and missteps the users took?

4. Is the login process easy for the customer? What happens if he wishes to update his data or refer to a friend this app?

Participants: 5 participants, between the ages of 18-50 who reside in the city center (not suburb areas). Participants order minimum once a week take away.

Methodology: unmoderated usability study, took place in Germany, remote, users were asked to login and check out with an order of their preference.

Themes:

LOGIN:

1. It was observed that 3 out of 5 participants found it irrelevant that they first had to login to enter the home page. This means that the user who enters the app first needs to be able to browse through without a login required.

SELECTION OF A MEAL

2. It was observed that 4 out of 5 participants required a bigger variety of meals per day. This means that the app has to show 3-7 meals per day with an option of "load more/show more" CTA.

PROFILE EDITION

3. It was observed that 3 out of 5 participants would like to provide their personal data like address on the check out option (if not already filled out their profile). This means that the app has to recognize whether the user has logged in and provide the option of signing up even at the check out process.

GENERAL

4. It was observed that 2 out of 5 participants liked to have the drink that goes together with the meal as an additional information. This means that the app can offer the suggested drink option to each meal.

5. It was observed that 4 out of 5 users would like to make the less effort when it comes to populating the fields of finishing a task like checking out. This means that the app has to ask only for verification and not again the address. A last frame could show a question with the delivery address and in case the user wants to change it, because he has recently moved or because he is at his office or at his friend's house, he can then edit the delivery address.

6. It was observed that 2 out of 5 users would like to choose between meals that are made by ingredients that are in season and from their area.

Insights & Recommendations:

Insight #1: Time is crucial, Recommendations:

• Use of pre-populated forms

• Do not show a lot of options (also known as “choice principle”" according to Dan Brown)

• Easier login management by revisiting mobile app sitemap and include Homepage, Product Features, User Settings, Contact Us (?), Help and User Profile

Insight #2: Nutritional Benefits and food combinations that offer energy, Recommendations:

• Addition of insights from the foundational research especially about the nutritional benefits per meal not just generic facts that only offer a nice to have feature at the very beginning of the homepage

Insight #3: Menu of the day, Recommendations:

• Seasonality is something used in Germany almost at every restaurant. Fresh dishes and a combination of nutrition ads to the USP of the product

Prioritized Insights Template

Priority 0: -

Priority 1: Insight #1

Priority 2: Insight #2, Insight #3

Updated User Flow after Usability Testing

Find here the updated user flow in Figma.

Accessibility considerations

There are four major types of disabilities – blindness, and that includes low vision and color blindness; hearing; cognitive; and motor impairments.

Low-vision users using screen magnifiers to like three, four hundred percent magnification, and a lot of those tools, those magnifiers have a screen reader in them. Keyboard and screen readers cover those issues. Alt-text and alt tags to all images is one key-way to solve this problem, too.

Color blindness is another form of a barrier. If we take a scenario where a mistake is identified only by changing the text color to red, for example, it does not make sense, as people need to see a message accompanying the possible color change.

One important statement is that accessibility is based on good clean coding. Along my product design journey, I have learned firsthand that easy interactions, the fact that everything works across devices; interoperability baked right in; helpful way-finding (meaning clear navigation) and the use of other important landmarks like a clean footer and easy to identify next steps (like CTAs) go a long way.

Lessons learned

Building a restaurant app is quite easy. This was the misconception I had because I thought that there are so many apps build lately that it would make it easy on my to find sources of inspiration. On the contrary, it made it even harder to find a competitive advantage and this something more that every app has to offer to succeed.

I also figured out that the interaction with the testers helped me a lot with the understanding their expectations. I understood they demand a lot of things and when they do not get it right away, they will turn to the next offering. This pointed out the fact that the user flows have to be completed and offer a delight from the very first version of an app.

I understood the importance of running lots of user tests even after the launch of the product and even if the app is doing relatively well. Keeping an eye to the existing users and to new apps helps better the user experience. In addition to this point, it is important to include micro-interactions within the whole user flow. Either user or product initiated, micro-interactions offer delightful moments and help communicate better the tone of the brand. Moreover, they help with preventing errors and they actually encourage engagement. The reason why animated reactions help create seamless experiences has to do with the fact that in any given moment the user who is interacting with the screen can see the different states of the component. It is a flow of action and reaction. It is as if the user is being understood and the system responds to what the user intents to do.
I tried to not overdo it with those small interactions, but in the future I will definitely use (micro-)interactions while designing user flows.