Role
Ux designer designing an app for Beer Garden from conception to delivery.
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Project Duration
December 2021- February 2022
The Problem
Busy customers want a quick and easy way to make a reservation in order to cut wait time.
The Solution
Create an app that allows users to cut wait time by giving them the ability to not only reserve a time they would like but also pre-order their meals so they can be confirmed and placed once they are seated.
Understanding the User
3
2
User Research: Summary
I conducted user interviews and developed empathy maps to deeply understand the target audience and their needs. Research identified a primary user group: working adults and full-time college students with limited time to spare.
While this confirmed initial assumptions about Beer Garden customers, the research also uncovered additional pain points, such as challenges in finding seating for larger groups.
User Research: Pain Point
1
Time
Working adults and students often have packed schedules, leaving little time to wait for table availability at establishments.
Accessibility
Platforms for making reservations are not equipped with assistive technologies
Availibility
Most Beer Garden type establishments don’t have the option to make a reservation.
Meet the Personas
Vango is a busy engineer with limited time and many responsibilities. He wants to be able to reserve a specific time at a location so that he does not waste time waiting around for availability.
Minh is an ambitious dental student part of a large study group. She wants to know if a location will accommodate for her and her friends so that they don't feel like they are aimlessly wandering or waiting hours for availability.
User Journey Map
Mapping Vangos Journey revealed how helpful it would be for users to have a dedicated Beer Garden reservation app.
Starting the Design
.png)
The Product
The Beer Garden app targets users between the ages of 21-65. The main goal is for customers to save time by allowing them to quickly make a reservation, also allowing them to pre order meals to save time looking over a menu.
Refining the Design
Mockups
Early designs allowed for users to choose a variety of option from the home screen. After the usability studies, I simplified the home screen to allow for a cleaner and more user friendly design.
During the second usability study users revealed concern with the menu being in a long list format with sub menus. I re-designed the page in order to break down the food options into more categories and into a more appealing format.
Key Mockups
Before usability study
Before usability study
After usability study
After usability study
High-Fidelity Prototype
The final high-fidelity prototype featured streamlined user flows for making reservations and pre-ordering meals. It also addressed user needs by allowing them to view and edit future reservations effortlessly.
Paper Wireframes
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized a quick and easy reservation process to help users save time.
Calendar view for easy selection process.
Option to pick number of people coming to ensure there is space for larger crowds.
Low-Fidelity Wireframes
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
Easy navigation was a key user need to address in the designs as well as being equipped to work with screen reader technology.
Screen reader friendly navigation.
Allowing users to edit their reservations at any time by logging into their app.
Low-Fidelity Prototype
This low-fidelity prototype mapped the primary user flow from selecting a reservation to pre-ordering meals, enabling its use in a usability study with users.
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 mockup needed refining.
1
2
Round 1 Findings
Users want to be able to quickly make a reservation
Users want to be able to edit future reservation
1
Round 2 Findings
There was a struggle maneuvering through the pre-ordering process