Border Cafe App
This hypothetical project aims to create a reservation system specifically designed for the Border Cafe restaurant. This reservation app will let users view and make reservations, which will affect users who are trying to plan meetups by keeping them informed and saving them time. We will measure the effectiveness by counting successfully completed reservations.
Role: UX/UI designer
The Problem
Customers have to wait a significant amount of time to get a seat at the restaurant.
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
Persona
Age: 27
Education: Bachelors
Hometown: Woburn MA
Family: Single, With Roommate
Occupation: Teacher
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: 55
Education: Bachelors
Hometown: Billerica MA
Family: Wife
Occupation: Sales
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.
Competitive Audit
I did a competitive audit to figure out what direct and indirect reservation systems are doing well and what they need to improve. To the right is a shortened version of the audit
Pain Points
Time:
If the customer goes at the wrong time the wait can be very long.
Knowledge:
Harder to make plans if available times aren’t known.
Accessibility:
Some reservation platforms are hard to read.
Memory:
people can forget that they made a reservation.
Starting the design
Sitemap
When designing the flow I wanted the user to progress quickly through the app and make it easily scanable.
Wire Frames
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 swipe through the reservation times
Usability Study
Research Questions
Are there any parts where the user gets stuck?
What can I learn from the user navigating the app?Is there a feature that the user liked or disliked? Why?Was the app easy or hard to navigate?Did the user receive the information needed to make the reservation?
Participants
5 participants2 male female
Methodology
8 minutes for participantUnited states, In PersonMoteratedUsers were asked to perform task on a low fidelity prototype
Main Findings From Usability Study
Confirmation
Adding a notification before confirming will help the user feel more assured.
Back Button
The icon adds confusion to navigation.
Buttons
Users had a hard time taping on the buttons.
Text
Users had a hard time reading the text.
Refining The Design
Sticker Sheet
This s the typography/font, color, Icons and buttons used in the design.
App Design Changes
What Changed?
Deleting the back icon makes the navigation header easier to use. Adding contrasting colors allows the viewer to scan the pages quickly. I also cleaned up the spacing and grouped similar text field elements.
Before Usability Study
After Usability Study
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.
High Fidelity Designs
After Usability Study
Before Usability Study
Impact
The users enjoyed the app's simplicity and ease of use. “ I like it. It's easy to use and provides all the information I need to make a reservation.”
What I learned
I learned that it is important to keep each feature's layout in mind. Also, to think about what the customer wants to get out of the experience when choosing a certain layout.
