An app to make making restaurant reservations more efficient for diners.
Role: UI/UX designer
Time length: 2 weeks
Problem statement: Users want the ability to easily make reservations at a local restaurant so I designed an app where users can make and manage reservations with an easy UX flow.
The Idea
Smokehouse is a restaurant whose target customer is ready for a special dining experience. The restaurant specializes in grilled cuts of steak, premium seafood, and classic bar entrees. The owners want to improve the process of making reservations at the restaurant by creating an app. In addition to the ability to book a reservation, the owners also want the app to include the restaurant menu. With the app, the owners have a target audience made up of new and returning diners.
The Problem
Diners who visit the restaurant often have a long wait for a table without a reservation and the process of making a reservation needs to be improved.
The Goal
The goal was to design an app that diners can easily use to make a reservation at Smokehouse and view the menu.
User Personas
To help understand who this project is for, I created user personas using demographic details of people who may use a restaurant reservation app. Below you will find the two user personas, Xiomara and Shawn:
Lo-Fi Designs
These are some of the paper wireframes to represent the homepage for the Smokehouse app. I also created paper wireframes for the reservation screen and other screens. There were elements that I wanted to include on the homepage, including images and navigation. I thought that those elements would be helpful for users to complete.
I then transferred the elements from the paper wireframes to digital wireframes. This is a version of the homepage represented by a digital wireframe. I wanted the two main tasks of booking a reservation and viewing the menu to be at the top for users to easily find.
In addition to the homepage, I created digital wireframes to represent other screens including a version of the reservation screen. I wanted the buttons to be organized so that users can complete the tasks.
Hi-Fi Designs
This home screen was my first mockup design. I wanted to mostly stick to the digital wireframe to see how it would come together. I played with colors, typography, shadows, lines, images, and other elements to start designing a useable prototype.
For the second home screen mockup, I wanted to add more contrast with the colors. When designing this screen, I had just learned how to add app bars and navigation menus. I added a floating action button to help users complete the task of booking a reservation. I also added an image carousel made up of dishes from the menu for more engagement.
Accessibility Considerations
For the app, I used a color contrast checker which checked the color contrast of visible text objects. For text readability, all important information was 16px or more and less important information was no less than 14px.
Link to Prototype
Here is a link to the final high-fidelity prototype for the Smokehouse Bar & Grill reservation scheduling app.
What I Learned
Designing the Smokehouse app was a valuable learning experience. Some aspects connected to concepts that I already knew – such as wireframes to blueprints and typography to choosing a typeface and point size for a document. Other aspects were completely new to me, such as competitive analysis and user personas. I learned the importance of following a framework or process so that the end product is useful, usable, intuitive, and accessible.
