top of page

About

📱Project overview

This restaurant reservation app strives to allow users to make a reservation at a restaurant easily. It offers a wide spectrum of restaurants to choose from. The app targets customers like workers, students, and families who makes reservations to go out and eat.

🤔 Problem

Busy worker and students lack the time to wait in line at the restaurant until their queue.

🎯 Goals

Design an app that allows users to easily book a table and go during their time reserved.

💪 My Role

UX designer designing an app for this reservation app from conception to delivery

👩🏻‍💻 Responsibilities

Conducting interviews, paper and digital wire-framing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

🛠️ Tools

Figma, Adobe Photoshop

⏰  Timeframe

July 2021

foodappmock.png

User personas

peep-standing-16.png

Susan

House-wife

Susan is a house-wife in the capital city of Korea, Seoul. She spends most of her day at home, preparing for meals, or finding places to go out and eat as a family. Susan sometimes encounters difficulties when some restaurants only allow walk-ins, and she’s scared a big family like hers won’t get a table. She would love to explore the new foods her city has to offer!

peep-standing-14.png

Lily

Full-time student

Lily is a full time student in her 4th year currently working on her Thesis. This technology makes it much more convenient for her to book a reservation when her parents comes to town, but due to the system, she finds herself spending a lot of time trying to navigate through the app.

User flow

Screen Shot 2564-09-07 at 12.49.04 PM.png

Paper Wireframes

Taking the time to draft iterations for each screen of the app on paper allowed me to come up with a number of different possible solutions based upon my research. This sped up the process and I was able to refine my ultimate choice much more quickly. The stars we used to indicate the elements of each sketch to be included in the initial digital wireframes.

paper wireframe.png

Digital Wireframes

As the initial design phase continued, I made sure to take account the paint points discovered following user research.

digital wireframe 1.png

Quick, smooth and easy navigation was a key user need to address in the designs.

digital wireframe 2.png

Low-fidelity prototype

The low-fidelity prototype connected the primary user flow of building and making a reservation, so the prototype could be used in a usability study with users.

Low fidel.png

Usability study: parameters

usabiility parametrs.png

Study type

Unmoderated usability study

Participants

5 participants

Location

Thailand; Remote

Length

15 - 25 minutes

Usability study: findings

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

findings.png

Round 1 findings

Round 2 findings

Users wanted to rebook restaurants easily

Users were surprised there’s no confirmation page before booking

Users think having a tab bar would be more convenient

Users mentioned there was no page to see upcoming reservations

Users mentioned there was no option to see how much the deposit was before clicking the reserve button

Mockups

Early designs allowed for reservation history bookings, but after the usability studies, I added upcoming reservations. I also revised the design so users can click to find both their past and upcoming reservations easily.

mockup1.png

The second usability study revealed frustration with the reservation flow. I decided to add a “Booking Details” screen before the confirmation screen. I also added the add special request option to this screen. 

mockup2.png

Design guide

Color Palette

Restaurant reservation app.png

Icons

Restaurant reservation app.png

Typography

MacBook Pro - 2.png

Main navigation

Restaurant reservation app.png
MacBook Pro - 3.png

Buttons

Restaurant reservation app.png

Takeaways

Impact

What I learned

This app make users feel like the reservation app really thinks about how to meet their needs.

While designing the reservation app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each interaction of the app’s designs.

Next steps

Screen Shot 2564-09-12 at 9.06.35 PM.png

Conduct another round of usability studies to validate whether the pain points user experienced have been effectively addressed.

Conduct more user research to determine new areas of improvement, and listen to feedback to imporve accordingly.

User research: summary

I conducted interviewed and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was families who like to go out and eat.

This user group confirmed initial assumptions about Restaurant reservation app users, but research also revealed that time was not the only factor limiting users from going out to eat. Other user problems included obligations, interests, or challenges that make it difficult to reserve a time slot.

User research: pain points

3 main user pain points I conducted from my interview were:

Screen Shot 2564-09-07 at 12.18.59 PM.png

TIME

Students and working adults are too busy to spend time waiting at a restaurant

Screen Shot 2564-09-07 at 12.22.20 PM.png

ACCESSIBILITY

Some restaurants only allow walk-ins. In addition, platforms for reservation are not equipped with assistive technologies

Screen Shot 2564-09-07 at 12.25.03 PM.png

IA

Text-heavy descriptions in app are often difficult  to read and select from

bottom of page