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
Customers plan to go to a restaurant only to realize that the restaurant is busy.
The goal is to provide information to the user that will help them make a restaurant reservation for Border Cafe.
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
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.
When creating the site map, I kept in mind the user's needs and made the app a mainly linear progression.
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.
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.
To prepare for usability testing, I created a Low Fidelity prototype to show how a user will go about making a table reservation.
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
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.
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
This s the typography/font, color, Icons and buttons used in the design.
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.
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.
This video visually demonstrates how a user would interact with the APP/Website.
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.”
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.