Case Study 1:
Restaurant Reservation App
Project overview
The product:
Using Figma, we’re creating Quick Reserve app to help people book and reserve tables of restaurants nearby, so they can avoid making phone calls to reserve tables and skip lines of restaurants.
Project duration:
June 2022 to August 2022
The problem:
Busy workers lack the time to wait in line for restaurants.
The goal:
Design an app that allows users to easily book tables of nearby restaurants.
My role:
UX designer designing an app for reserving tables from conception to delivery
Understanding the user
Target audience:
Adults and students in their 20s, 30s, 40s who don’t have time to cook meals and don’t want to wait in lines for nearby restaurants.
Key challenges or constraints:
Time: Working adults and full-time students are too busy to spend time waiting on lines for restaurant.
Text: Text-heavy menus are not friendly for people who have visual impairment.
Research study details:
After interviewing dozens of people and making empathy maps for the project, I better understand their needs, goals, and frustrations.
The user group is consistent with the initial assumptions about the users, but research also showed that other issues such as not being able to read menus, visual impairments may also affect the users’ experience.
Starting the design
Initial design concepts:
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 table reserving, balanced with clear interface and visual appealing, to help users save time.
Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.
Digital wireframes:
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
Clear interface to reserve tables with visually appealing images and without burdensome texts is an important feature of the app.
Low-fidelity prototype:
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was reserving tables, so the prototype could be used in a usability study.
View Quick Reserve low-fidelity prototype
User testing results:
Users need to read texts of the information clearly.
Users need to click relevant buttons efficiently.
Users need to find relevant buttons in relevant pages.
After checkout, users want to have the option to see the reservation.
On my “reservation” page, users want to be able to edit the reservation.
Refining the design
Mockups:
Early designs allowed too many time options, which makes the font too small and difficult for users to click correctly. I spread out the time buttons and increase font size overall.
The second usability revealed some frustration with the checkout flow, specifically, the ability to edit the reservation. I add the button to allow users to edit the order.
High-fidelity prototype:
The final high-fidelity prototype presented cleaner user flows for reserving table. It also met user needs for editing existing reservation as well as for a more visually appealing layout.
View Quick Reserve high-fidelity prototype
Accessibility considerations:
Provided access to users who are vision impaired through adding alt text to images for screen readers.
Used icons to help make navigation easier.
Using high-contrasting color and clear font size to help all users use the app in a more sensible way.
Going forward
Impact:
The app makes users feel like reserving tables easier and faster.
One quote from peer feedback:
“The app made it so easy to reserve tables! This app’s layout is great. Many pictures. Easy to navigate. I would definitely use this app as a table reservation app.”
What I learned:
While designing Quick Reserve app, I learned that accessibility is really important in designing the app, which would benefit all kinds of users. Usability studies were a great way to test the prototypes.
Next steps:
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Conduct more user research to determine any new areas of need.