Border Cafe Reservation APP
Border Cafe is a cajun chain restaurant based on the northeast coast. They want their customers to feel comfortable and at home at their restaurant. The goal is to create a restaurant reservation app for this restaurant.
Role: Lead UX designer for hypothetical product
The Problem
Customers plan to go to a restaurant only to realize that the restaurant is busy.
The Solution
The goal is to provide information to the user that will help them make a restaurant reservation for Border Cafe.
UNDERSTANDING THE USER
User Persona
Sarah is a busy full time teacher who needs information from the restaurant to make a reservation because the planning process can take a lot of time out of her day.
Age: 27
Education: Bachelors
Hometown: Woburn MA
Family: Single, With Roommate
Occupation: Teacher
Dave is a middle aged man who needs to reserve a table in advance because he doesn't want to wait a long time to get seated.
Age: 55
Education: Bachelors
Hometown: Billerica MA
Family: Wife
Occupation: Sales
Pain Points
Research Summarization
I conducted interviews to get a better picture of the users that I’m designing for. After the interviews, I mapped out their usual process when making a reservation. The main consensus I got is that people want a product that can save them time and be simple to use.
Starting the Design
Site Map
When creating the site map, I kept in mind the user's needs and made the app a mainly linear progression.
Paper Wireframes
When wireframing, I kept my research participant's wants, needs, and pain points in mind. I put together a list of features and objectives to keep in mind when sketching the paper wireframes. My main focus was giving the user the most useful information without overloading the screen.
Digital Wireframes
For all the screens, I made sure that the most important information was placed at the top of the screen. When you first open the screen, the default times are set to the present day. If the user wants to see the reservations available, all they have to do is look at the reservation times.
Low Fidelity
To prepare for usability testing, I created a Low Fidelity prototype to show how a user will go about making a table reservation.
key Pages
Page 1: Used to sign in
Page 2: Used to make a reservation
Page 3: A calendar used to pick far out reservations
Page 4: Used to input user information
Page 5: Created to double check reservation
Usability Study
After creating wireframes and a prototype, the next step was to do an unmoderated usability Study. I asked 3 participants to complete different tasks in the app. From the test, I gained valuable information that helped me improve the APP.
Main Findings From Usability Study
Adding a notification window before confirming will help the user feel more assured
More descriptive placeholder text
Users need the smaller text to be larger
Get rid of table count Feature
Refining Design
Sticker Sheet
This s the typography/font, color, Icons and buttons used in the design.
Mobile Design Changes
What Changed?
Deleting the table count helped me reorganize the layout to make the page cleaner and less busy. Also, making the font larger allowed for easier visibility.
Before usability Study
After usability Study
What Changed?
I added more descriptive placeholder text to help guide the user. Adding the Contrasting colors also helps guide the user through the app.
Before usability Study
After usability Study
Phone Screen
High Fidelity
This video visually demonstrates how a user would interact with the APP/Website.
Impact:
The users enjoyed the app's simplicity and ease of use. “ I like it. It's easy to use and seems to provide all of the information that I would need to make a reservation.”
What I learned:
I learned that it is important to keep an open mind when designing. It’s important to be open to changing things like features and the layout, in order to enhance the user's experience.