Rachel Hui| Skip the Line

The Problem

Whenever I go out to eat with my parents or just a few close friends, we don’t make reservations. It is always a last-minute decision, and we’ll look up a restaurant an hour before. However, by the time we arrive at the restaurant, there is always a huge line-up. We’ll then try to look for another restaurant, and call each one to see how busy they are. This process is very frustrating, so I want to find a solution that can not only simplify this process, but also have shorter waits.

Objectives

In this project, I was challenged to designing a mobile app. The main objectives of this app would allow users to:
- view live wait times of restaurants
- view restaurants by proximity
- join a waitlist without having to be present

Competitor Analysis

I began the project by conducting a competitive analysis with products that are the most similar to what I want to create. The products I looked at were: Yelp no wait, and Q Waitlist.

Although Yelp is a huge competitor, their high pricing creates a high barrier of entry for restaurants. They also mostly focus on the restaurants side, and are less considerate for their customer users.

User and Audience

User Research and Interviews

After learning about the market, I conducted user interviews with seven participants to learn more about their behaviour. The interview was semi-structured with open-ended questions, with lots of room for discussion. The questions were mainly about how they currently find a restaurant, and the process until they are finally seated. I interviewed people waiting in line at a restaurant, so I was able to observe their behaviour as well.

Pain Points

From the user interview, the main pain points that the user has are:
1. having to stand outside and waiting for a long time
2. having to call the next restaurant to see if they’re full
3. not knowing how long the wait is
4. not knowing a restaurant’s live status

Personas

Based on the insights gathered from the user interview, I created a persona to further understand the user. Meet Tina, the impatient foodie.

Empathy Map

An empathy map was also created to get a better understanding of how the user acts.

Journey Map

Next, a journey map was also created for Tina. This summarizes my interviewee’s emotions, thoughts, pain points, and actions. This allows me to determine opportunities that arise from their pain points.

Design Decisions

Card Sorting

To better understand each section of my project, I created an affinity diagram. I started by listing off the features that arose from the opportunities of the users on the blue stickies. I then sorted them based on the priority of primary, secondary, tertiary, and additional add-ons. I labeled these at the top right corner of each sticky note. Then they were sorted into categories based on similar features, and were labeled with the green sticky notes.

After card sorting and realizing that my dashboard will be including a lot of features, I began to question how the layout would look. I wrote down three possible methods and wrote them on the yellow stickies. This challenge was raised as I continued with the project, and will be solved later.

Task Flow

Due to the constraint of time, I only created a task flow for the main task of joining a waitlist. With the challenge of determining the dashboard layout at the back of my mind, I created two scenarios where the user would use the app. I then compared it with the persona and decided on scenario 1, which would be a map and list view.

User Flow

After creating the task flow, I expanded it into the user flow by adding pages, decisions, and interactions to it. This allows me to anticipate the actions that the user will take, and optimize the entire experience from the entry point to the final interaction.

Site Map

The user flow was then used and simplified to a site map. I removed the decisions and interactions, leaving just the pages. Other pages of the navigation bar were also added to complete the site map. These pages were determined through the affinity diagram, even though a task and user flow were not created for them.

Design Process

Rapid Prototyping

After creating all the essentials needed, I created a rapid prototype to test out the flow. I created these within 30 minutes, and moved on to user testing. While user testing, I briefly filled in the gaps of the contents of each page, and had the user “click” through each page to complete a task.

Based on user feedback, I added a few pages, and also redesigned a navigation bar and dashboard. I did this in the form of crazy eights, so I could drive myself to create more ideas in less time.

Wireframes

The wireframes were created based on initial feedback, with a redesigned navigation structure. The search bar was also put at the bottom for easier thumb access.

User Test

I conducted a cognitive walkthrough was some potential users to determine the usability of my app. This process helped me create a better user experience.

Mockups

After receiving feedback, I created high-fidelity mockups of the mobile app. The motivation behind the design is to create a clean and simple app that highlights the photos from the restaurants. A ruby red was chosen as the main theme to appeal to the user’s appetite. A grey-blue was then used to complement the red, and act as a neutral colour.

Solutions

I designed a mobile app that allows the user to view a restaurant’s live status for an estimate of how long to wait, joining a waitlist without being physically present, and joining multiple waitlists.

1. View a Restaurant's Live Status
Based on the user’s needs, I created two methods to find a restaurant and view their wait times. The main feature is to view restaurants by proximity on a map. This clearly shows the user how far a restaurant is away from where they are. However, users will have to click into each pin to view the restaurant. If the users don’t like this method, they can drag the search bar up to show a list view. This allows users to view multiple restaurants at a time, and also see their wait status.

2. Join a waitlist
After a user selects a restaurant, they will see an estimate of how long they have to wait. They can then join the waitlist, fill out their information, and slowly make their way to the restaurant. Restaurant guidelines will also be provided to remind the user that this is not a reservation.

3. Join multiple waitlist
A user can also choose to join multiple waitlists to minimize their wait time. They can then leave the waitlist if they no longer want to eat at this restaurant, or if another restaurant already has a table for them.

Reflection

From this project, I learned how to go through a design process from finding a problem, to creating a high fidelity mockup. I also learned more UX tools to better understand the user, such as an empathy map, task flow, user flow, and usability testing.
‍
In terms of the design process, I had three main takeaways. I learned that although it is good to understand the entire project, it is better to focus on the main tasks first. I was very overwhelmed halfway through the project trying to grasp the overall scope and eventually learned to focus on one thing at a time. This would be more useful when a bigger project comes around, but I should start narrowing my focus with small tasks.
‍
Another takeaway is to always think about what the user needs. During the card sorting process, I started to think of how the dashboard should look as a designer. Therefore, when I moved on to the task flow, I created two scenarios. I then compared the two scenarios to the user, and determined the best scenario. However, what I should have done was to always keep the user in mind instead of modifying my decisions after to tailor to the user’s needs.
‍
Lastly, I learned that it is hard to find the right balance between aesthetics, and accessibility. I originally chose orange as the main colour of my app. The app looked visually pleasing, but it did not pass the WCAG standard of accessibility. Since I wanted to create an app that can be used for everyone, I sacrificed a little bit of the aesthetics and chose accessibility.
‍
Reflecting on other parts of the design process, I learned to better empathize with the users. All the users have different needs, and I have to prioritize and find a solution to their needs. I also learned to get lots of feedback from the user, and to test different iterations on the user to find the most effective solution. To conclude, although I learned a lot more design tools, I still have a long way to go as a designer, and I look forward to learning more.

Next Steps

If I had more time in this project, I would like to conduct another usability test after creating the final prototype. I believe my designs are still lacking, and would like more feedback on how I can improve it. I would also like to add more features to simplify their experience eating out, instead of only focusing on the waiting part of their experience.

On the other hand, another one of my users would be the restaurant. I would like to go through the entire design process again, with a focus on the restaurant’s perspective. This half of the project would take a lot more time, as it also involves a database and content management system.

Skip The Line

User and Audience

Design Decisions

Design Process