top of page

Design a mobile app - Problems people faced while dining out Case Study

Design a mobile app - Problems people faced while dining out Case Study 

Overview:

This an individual project from General assembly class. I was given a list of industries to pick and I  picked a topic regarding Food and beverages to try to solve problems people faced when dining out. I am required to design a mobile app, for the project I get to decide on the high-level problems and work from there.

Timeline:

2 weeks

Tools:

Adobe XD, Mural

Roles:

Sole UX/UI Designer

phone mock up.png

Finding the problem

To understand what my users would go through I went on to do 8 interviews to find out more about their experience when dining out alone and with a group of friends.

I then compiled it into affinity mapping to find out the common points of the users, and the few key problems the users faced for example:

  • They end up having to queue at the restaurant due to the peak period.

  • Does not know how long is the wait.

  • they like to dine with many companions.

  • Have to find an alternative place to save time due to being hungry or have other plans

  • do not want to waste time to travel and end up having to change location due to long queues.

 

There was also feedback that they would prefer to use an app with multiple functions rather than having an app to serve 1 purpose. With the findings in hand I created my persona.

p1 persona.PNG

Busy Brit is someone who doesn't like to wait aimlessly in the queue while she dines out with her friends. She would prefer to have a clear view of how things are going to be like when she plans an outing with her friends.

The Problem

I focused on the goals and needs that Brit has, which she feels frustrated about wasting her time while waiting to get into a restaurant with her friends but unable to gauge how long is needed to wait at the restaurant.

Solving the problem

I believe that by creating live traffic of the restaurant and estimated time to be served for Brit will help people like Brit to maximize her time and plan ahead.

User flow, Sketches and Wireframe

With the problem statement in mind, I have created a User Flow to give me a rough idea of what the users would go through.

From the user flow I went on to sketch out an idea of how the page should look like taking into consideration the user flow and how the users will interact with the app.

userflow.PNG
mobileapp.jpg

The reason why I used sketching is because of the initial stage, and I am able to do changes to the sketches quickly and efficiently. Once I am satisfied with it, I proceed to convert it into Low - Mid Fidelity prototype

Usability Testing

I gathered 6 participants to do Usability testing for my prototype to find out if 

1: they are willing to use this app.

2: does this app provides a way to solve *Brit’s problems.

The task given was to at a place near you to dine out with your friends this weekend, make a reservation.

I compiled the findings and feedback into Plus/Delta where it allows me to see what went well, what could be improved, and also the suggestions.

UT affinity mapping.PNG

The Findings:

  • Homepage does not auto-zoom into a location which causes users to be confused about what to do next

  • Does not know what does the red boxes means

  • Does not know that the Restaurant names are clickable

  • No clear indications that I am able to make reservations

  • “Where am I” icon too small 

  • Due to the initial page being unclear 80% of participants could not complete the task without help

 

Feedback:

  • Clearer indication on the clickables (adding a reservation button would be good)

  • Brief intro of the restaurants

  • Review of the restaurant

Design iterations

I would want to focus on those that could be improved and the feedback as it would help me improve the app. I reviewed every single finding and feedback and went to do Design iteration to help solve their pain points better.

protytpe v1-1.PNG
protytpe v1-3.PNG

The problem with the initial prototype was:

  • Initially, users are required to click on the GPS button to reach here

  • Users do not know what does the red boxes mean.

  • Does not spot the “Where am I” icon

After iterations:

  • Added Auto-zoom into the current location from the home page

  • Changed to food icon to help users understand that it is a food heatmap

  • Colour represents on average how crowded is that Shopping/Hawker center with green being short waiting time and red the long waiting time.(currently, it would only show on average how crowded it is in a shopping mall/ hawker they will have to click in to check individual shops. )

  • As of now only participating restaurants will be featured. 

The problem with the initial prototype was:

  • No clear indicator that Restaurant is a clickable button

  • No indication that users are able to make a reservation which results in users stopping at this point

After iterations:

  • Added boxes behind Restaurants to indicate that it is a clickable item

  • Highlighted to a different colour if selected to show a clearer selection

  • Added reservation button to prompt users to make a reservation if they need to

In order to solve Brit’s planning. This page allows her to gauge the crowd at a certain restaurant.

The problem with the initial prototype was:

  • No information about the restaurant.

  • No name input

After iterations:

  • Added photos of the food from the restaurant. To show what kind of food they offer

  • Added name to the booking details for easier identification of reservation

Feedback from UT

For people who have no prior experience with that restaurant. They would not know what kind of food they offer, and the price of the food.

protytpe v1-8.PNG

What's next?

  • Do more rounds of Usability testing and Design iterations to see if there are improvements and adjust according to the user’s needs. 

  • Review participant’s feedback/Suggestions(add Review 

       section and price, booking page)

  • Develop remaining functions and area of the app

  • Built high fidelity prototype for further testing.

Thank you for reading!

Have any questions?
Feel free to contact me here!
bottom of page