Hourglass

An app that provides real-time restaurant wait times.

Product

Mobile App
Original Concept

Role

UX/UI Designer, User Researcher

Tools

Figma, Miro, Zoom

Hourglass is an app that provides real-time restaurant wait times to make dining out stress-free and enjoyable without reservations.

Overview

The goal was to create an app that allows users to see real-time wait times for restaurants, eliminating the need for constant communication or guesswork. Dining out can be stressful without reservations, so I wanted to provide a platform that helps users plan their dining experience more efficiently.

THE PROBLEM

Life gets busy, and booking a reservation in advance for a dinner out isn't always possible. However, it is frustrating for diners to find real-time wait times. Without accurate information, diners often face calling restaurant to restaurant or being turned away at the door. This leads to a time-consuming and stressful dining experience that lacks efficiency.

THE SOLUTION

I created an easy-to-use, UI-friendly platform that provides real-time restaurant wait times. Users can search for nearby restaurants, view estimated wait times, and filter by their dining and party preferences. The app lets users view multiple restaurant wait times in their area simultaneously, eliminating the guessing game and making it easier to choose the best option, all with a simple tap on their phone.

The Design Process

In developing Hourglass, I combined Lean UX with the Double Diamond UX method. Lean UX allowed for rapid iteration and continuous user feedback, keeping me aligned with user needs. The Double Diamond method provided a structured process with four key phases: Discover, Define, Develop, and Deliver. This combination ensured thorough exploration of the problem, clear goal definition, innovative solution generation, and refined final product. The result is a user-centered, efficient, and iterative design process, making a seamless and effective app for real-time restaurant wait times.

Gaining Empathy

Secondary Research

To start my "Discovery" phase, I conducted secondary research to explore the pain points of diners "walking in" without a reservation. While the specific issue wasn't directly addressed, it highlighted that waiting itself is a major pain point, and perceived wait times can be mitigated regardless of the actual wait.

This gap led me to focus on primary research to uncover specific user insights. The research emphasized the hassle of calling multiple restaurants and the potential for an app to provide instantaneous answers, laying the groundwork for interviews and user testing to shape a user-centered solution.

"Walk-in wait times for restaurants can turn into a phone game of calling restaurants back to back to find out how soon you can get a table."

bonappetit.com

"Waiting can reduce customer satisfaction, induce boredom, and lead consumers to abandon services or avoid them in the future."

researchgate.net

Screen Shot 2024-03-31 at 3.11.06 PM.png

Screen Shot 2024-04-05 at 12.36_edited.j

“To be able to have an answer without being there physically is a lot nicer than waiting out in the cold..."

"...on a Friday night will have to bounce from 2 or 3 restaurants..."

Primary Research

Now comes the fun, let's start talking to real users. I started off by conducting a screener survey to narrow down my potential users for my one-on-one interviews. The criteria was genuinely pretty loose for who qualified, as I wanted to get people from different demographics to see which pain points overlapped.

The users had to:

1. live in a metropolitan city

2. dine out at least once a month

3. have a smartphone

Once I gathered my top 5 users, I conducted my semi-structured interviews via Zoom. I wanted to understand why people don't/can't make reservations and how this affects their dining experience when trying to eat out. The insights I gathered went pretty hand in hand with my hypothesis: Without access to real-time wait times, diners face frustration and inefficiency, often resorting to calling multiple restaurants or experiencing unexpectedly long waits. On the left, you can see the general feelings I gathered from my users on the affinity map and some quotes that stood out to me.

Who Is My User?

Now that I understand my user a little better, it is time to start defining. I created user personas from my understanding of the different wants/needs and the pain points that overlapped from my interviews.

Screen Shot 2024-07-17 at 2.23_edited.jp

Empathy Mapping

I used empathy maps to visualize user needs and behaviors, bridging the gap between personas' thought processes and emotional responses.

Alleviating the Pain Points

So how do we alleviate these pain points and focus on making the gains a reality? I compiled 5 How Might We Statements to organize my goals before I started designing.

How might we make the walk-in process of a restaurant less time-consuming?

How might we shorten the perceived wait time of waiting for a table at a restaurant?

How might we help make the walk-in process of a restaurant feel more organized?

How might we help restaurant goers feel more confident wanting to eat out last minute?

How might we help walk-in guests find current wait times for restaurants?

I realized that there is more than one “core” issue and these problems were divided into smaller “sub” issues that can separately be addressed to then alleviate the core issue.

Competitive Analysis

Heuristic Evaluation

From scoping around for competitors, I came to the conclusion that the market for reservation-based apps and restaurant reviews is mature, but there is a gap in providing real-time wait time information.

To deepen my understanding, I conducted a usability heuristic analysis based on Norman & Nielsen’s principles of good interaction design. This helped me identify the strengths and weaknesses of competitors' design.

The following analysis focused on apps with similar features for exploring restaurant wait times and dining options. I paid special attention to their search functions, the ability to view wait times, and their aesthetic/simplicity.

Yelp

Yelp navigates the competitive restaurant app market with a comprehensive approach to crowd-sourced reviews and business information.

Provides clear back buttons and exit options, offering users freedom to navigate and manage their interactions.

Despite efforts to label functions and subpages, Yelp's interface can feel cluttered and overwhelming due to inconsistent themes and intrusive ads.

Sponsored ads within content streams distract from the user experience, potentially hindering users from efficiently achieving their goals.

Open Table

OpenTable is a popular platform that facilitates restaurant reservations, offering users a streamlined way to discover, book, and manage dining experiences at various establishments.

The app strikes a good balance between minimalism and content, offering a clean interface with well-defined elements and sufficient negative space.

Clear accessibility options such as back and cancel buttons enhance user freedom and control throughout the app.

Lacks responsiveness in some touchpoints, such as selected time buttons for restaurant reservations, which can confuse users about their actions.

Resy

Resy is a reservation platform designed to simplify the booking process for dining out, focusing on providing users with efficient and straightforward reservation management at restaurants.

Maintains a clean and straightforward interface, minimizing distractions and focusing on the reservation process.

Clear navigation and control options allow users to manage reservations easily, including quick cancellation features.

While efficient, the app's interface could benefit from more interactive elements to enhance user engagement and satisfaction.

Early Ideation

User Flow

After gathering what the current competitors lacked in terms of walk-in wait time information, I started to piece together the main key task flows. I did so by creating user stories that I deemed critical and not so critical.

This allowed me to come up with two major user flows.

1. The user wants to view the wait time for a specific restaurant.

2. The user wants to browse restaurant wait times in their area.

Link to User Flow

Mapping it Out

At this stage, I began to develop the product and visualize what the user experience would need to entail.

Creating a sitemap allowed me to understand that less is more for my users' goals and that the users want to find their answer quickly after launching the app due to the more than likely rushed state they'd be in. This being said, I avoided creating too many subpages and wanted to keep the experience minimal.

This led me to create my sketches to start bringing my ideas to life. I intentionally made the app with few screens and a minimal aesthetic due to the straightforward concept.

Link to Site Map

Clear wait times

Categories picked based off wait and distance

Clean and minimal

Initial Guerilla Usability Testing

Following the Lean UX method, I wanted to gather early and continuous feedback, so I conducted guerilla usability testing. My main goal was to validate that the screens made sense as a flow and individually. I wanted to see if there would be a need for additional screens to be able to accomplish the tasks given to the users. I gave the users the following tasks and gathered some insight on the usability:

1. Sign up for an account.

The flow from the welcome screen to account creation seemed logical and clear.

The steps to enter the phone number and email were straightforward and easy to follow.

A user indicated that there should be a clear way to navigate back at each step.

2. Browse restaurants using a map.

All users went directly to the map icon in the bottom bar navigation.

Users seemed to understand they could select restaurants directly from the map to get more information.

A user commented on appreciating the use of the different map icon colors.

3. View a restaurant's details.

A user commented on liking that there were collapsable items on the restaurant page like a menu.

Multiple users commented that the drop-down menu screens felt "cluttery".

Piecing It Together

Wireframes

After completing my initial sketches, I transitioned to creating more detailed wireframes to solidify the app's structure and design. These wireframes served as a blueprint, enabling a more concrete visualization of Hourglass' user interface and a chance to conduct further usability testing before creating my high-fidelity screens.

Flow 1: User wants to view the wait time for a specific restaurant.

Home page. User can search and edit party size at the top. User can scroll through related categories of restaurants.

User has option to edit party size. Wait time results will vary depending on how party size is edited.

Once user hits search, they come back to the updated home page.

In order to search for the specific restaurant. User hits the search bar and inputs the restaurant name and keeps location at “current location” upon assuming location preferences have been accepted.

Restaurant result is loaded and the user then clicks on the restaurant.

User can view restaurant’s page and related information.

Flow 2: User wants to browse restaurant wait times in their area.

User opens app and starts at home page upon logging in/being logged in.

User hits the Map tab at the bottom bar navigation to view restaurants via pins on a map.

User can edit party size to update accurate wait times for their party.

User comes back to the updated map page and taps on a pin to view a snippet of a restaurant’s details.
If desired, user taps back on the map to exit out of restaurant snippet view.

If user wants to keep browsing, they can tap the Map tab or hit “Back”.

User selects a restaurant from the map and views the restaurant page and related information.

Key Challenges

One of the key challenges I faced during the design process was maintaining a user-focused approach and resisting the temptation to incorporate flashy, unnecessary details. Unlike Yelp or OpenTable, Hourglass has a specific end goal: providing real-time wait times for restaurants. It was crucial to remind myself constantly that this app's primary function was to alleviate the pain points of users looking for immediate dining options without reservations. As a result, I often found myself omitting features that, while visually appealing or interesting, did not directly contribute to the user's primary objective. This disciplined approach ensured that Hourglass remained straightforward and efficient, enhancing user satisfaction by focusing solely on delivering the essential information quickly and clearly.

Testing the Design

I conducted another round of usability testing to further validate that I was going in the right direction, and if not, to steer me into new directions for my final iterations. The following were the insights gained:

Positive Feedback:

Users understood and appreciated the preference selection on Screen 4 in Flow 1.
Users enjoyed the category titles and felt that it would make browsing restaurants easier.
Users made note of the wait times being front and center as well placed.

Negative Feedback:

Users would have liked to see the map pins have more context.
Users felt that there could be refinement for the preference selection.

High Fidelity

Reshaping the Design

Throughout the process of creating my high-fidelity designs, I made multiple iterations of my designs, spanning from color palette choices to fully redesigned screens. Most of these iterations came from the consistent use of usability testing.

Usability Testing Round #1

From my first round of usability testing for my high-fidelity screens, I made the biggest jump in changes to the screens from user feedback.

Positive Feedback:

Clean, straightforward design
Use of categories
Good use of negative space and primary colors

Negative Feedback:

Back button not working as intended
Preference selection needing refinement
Map pin colors are confusing

Implementation: navigation fixes, slider bars, map legend

Usability Testing Round #2

For my second round of usability testing, I wanted to validate the new implementations and possibly spot any new patterns in usability flaws.

Positive Feedback:

Use and navigation
Interactive UI elements
Map current location icon
Clean feel

Negative Feedback:

Legend took too much space
Blue and green colors held the same weight in value
Pills looking like buttons

Implementation: wait time colors, UI “pill” fixes, no legend

Final User Interface

These final designs reflect a user-centric approach, seamlessly integrating the core functionality of reducing wait times while providing a straightforward and enjoyable user experience.