Case Study 2:
Restaurant Reservation Responsive Website
Project overview
The product:
Using Adobe XD, we’re creating Quick Reserve responsive website 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:
August 2022 to September 2022
The problem:
Busy workers lack the time to wait in line for restaurants.
The goal:
Design a responsive website that allows users to easily book tables of nearby restaurants.
My role:
UX designer designing a responsive website 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
Sitemap:
For the responsive website, I used the following sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.
Paper wireframes:
Taking the time to draft iterations of each screen of the website 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.
Paper wireframes with screen size variations:
As a responsive website, I took into account different sizes (mobile, tablet, and desktop). Here I drew wireframes for tablet and mobile.
Digital wireframes:
Following the sitemap and the paper wireframes, I designed digital wireframes, prioritizing users' experiences and a clear interface.
Digital wireframes with screen size variations:
As a responsive website, I created digital wireframes for different screen sizes.
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 and editing reservations, 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 and concisely.
Users need to have a clear typography and meaningful icons.
Users need to have a better sense of how good a restaurant is (by introducing grading).
Refining the design
Mockups:
Based on the usability study, I adjusted typography and made the key information stand out. I also added some icons to different categories for better navigations.
Early designs included too many words in the introduction of the restaurant, which is too heavy on text. I reduced the amount of words with a "more" button for further reading, added more visuals and grading. I also put "reservation date" and "group size" in a box with a different color.
Mockups: Original screen size
Mockups: Screen size variations
High-fidelity prototype:
The final high-fidelity prototype of the responsive website presented cleaner user flows for reserving a 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:
The responsive website offers possibilities for using it across different screen sizes.
Used icons to help make navigation easier.
Using high-contrasting color and clear font size to help all users use the website in a more sensible way.
Going forward
Impact:
The responsive website makes users feel like reserving tables easier and faster. Here is one quote from peer feedback: “The website has a clear interface with bright colors. It feels delightful to reserve tables!”.
What I learned:
Since designing the Quick Reserve responsive website is right after designing its app version with Figma, I refined the design and learned to use a new software, Adobe XD. I also learned the importance of designing with different screen sizes in mind.
Next steps:
Polish the design across different screen sizes and test it transitions smoothly from one size to another.
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Conduct more user researches to determine any new areas of need.