Mobile reservation App -
Q Lounge
UX/UI | Google Professional Certification Project | FIGMA
As part of the Google UX Design Professional Certificate, I worked on a design prompt to create a mobile reservation app for a fancy restaurant in Melbourne. Using the User Centred design process, I started with understanding the market and created a high fidelity prototype after multiple iterations based on usability testings.
Project Overview
User Centered Design Process
User Research
As part of the user research, I conducted user interviews via Zoom calls. The participants selected for the research were individuals who make a reservation at least once every two weeks, either for themselves or for another person.
To better understand the data collected during the interview, I created empathy maps. This helped in clearly listing the thoughts, feels and requirements of the users.
​
Based on the empathy maps, I was able to identify the user pain areas. Long call wait time was the key concern raised by all the participants. Also situations wherein their requests were not fulfilled on the day of reservation was a key pain area for the participants.
Call wait time :
​
Most users were placed on hold or had to call multiple times to make and/or update reservations. This was considered seen as waste of time. Hence, Need to find an efficient and easy way to make and update reservations.
Unable to determine suitable option
​
Users want to know the seating and dining options before making reservation. Since there is no seating chart, photo gallery or menu options listed on the reservation page, users are confused and spend more time talking with staff while making reservation. Hence, Need to provide user with seating and dining options.
Absence of confirmation
Once the user makes the reservation there is no email acknowledgement send. Also there is no summary of the special requests made by the user. The user is unsure if the reservation is actually done and all their requests will be met on the day. Hence, Need to connect with user after each interaction
Requests not met
​
Many users did not get all their special requests fulfilled, even after mentioning them and doing a follow up. Hence, Need to ensure the restaurant staff gets the requests and are fulfilling them.
Personas & User story
After completing the user research and identifing the pain areas, I created personas and their user story to which summarised the problems and needs of the user group.
User Journey Maps
It was important for me to understand the series of steps the user undertakes while making a typical reservation. This was particulary important as a user journey map helps in identifying improvement opportunities and also reduce any bias I may have as a designer.
Problem statement: Shannon is a busy professional who needs to be able to make changes to her reservations from her mobile phone because she does not have time for writing long emails to convey changes for her reservations.
Problem statement: Peter is a senior member of his family who needs to make frequent update to his reservations and needs to ensure that they are duly noted by the staff
2. Starting the design
-
User flow & Storyboard
​
​
​
​
User flow & Story board
Before I started to create the wireframes, it was important to have a clear goal in mind for the reservation app and accordingly have a user flow. It was really important for me know to know how excatly the users will navigate through the app inroder to make and update a reservation. This was a starting point for my app design.
Goal statement: Our reservation app will let users make and update reservations for special events which will affect users with time crunch by letting them make reservation updates from their mobile phone.
As my next step, I created 2 story boards
-
Big picture storyboard which focused on what the user needs, their context, and why the product will be useful to the user
-
Close-up storyboards which concentrated on the app and how it works
Wireframes
For this project, I started with creating paper wireframes for each screen. For each wireframe, i created a list of elements which need to be included. Then by setting a timer of 2 minutes, I created 5 versions of the structure of the page which included the important features. palcing focus on the best ideas, I combined elements to create the final version of the wireframe for each page. This formed the basis for the next version of the wireframes - digital 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. The wireframing tool used for this project was Figma.
Below are some of the paper wireframes and digital wireframes.
Low Fidelity Prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was make a new reservation and update an existing reservation, so the prototype could be used in a usability study.
​
View the Q Lounge App below :
Usability Study & Design updates
I conducted an umnoderated usability study with 5 participants. The participants were asked to perform tasks on a low fidelity prototype.
Below is the main user flow of the low fidelity prototype for Q Lounge reservation app which was tested.
​
Research questions
-
How long does it take for the user to make a new reservation?
-
Can the user locate the update option within the app ?
-
Are the users able to make updates to an existing booking easily ?
-
Are there parts of the user flow where users get stuck?
-
Do users think the app is easy or difficult to use?
Study Findings
-
Users require further breakdown on AM/PM on the booking page
-
‘Details section’ was not clear
-
Users need more information on the cost structure
​
​
​
​
​
​
Design updates based on Usability study
3. Refining the design
Design System & Mockups
A well-organized design system keeps the app design consistent, focused, and unified across designers, developers, and entire teams as they work to generate a product. Keeping this in mind, I created the below design system as my first step in creating the mock ups and high fidelity prototypes.
Early designs allowed for some customization, but after the usability studies, I added changed the time section to reflect the meal option rather than AM/PM. I also revised the design so users see only the upcoming booking for easy update from the home screen.
​
Mockup after first usablity study
​
The second usability study revealed frustration with entering the payment details again while making update to the reservation. It was an additional step. I decided to remove this step and streamlined the update process.
Mockup after second usablity study
Final mockup
High Fidelity Prototype
The final high-fidelity prototype presented cleaner user flows for making and updating reservations. It also showcased details on the cost structure as requested during the usability studies.
​
View the Q Lounge app below :
Accessibility
In the initial design, I have been able to incorporate some key accessibility considerations. For this version, I have provided access to users who are vision impaired through adding alt text to images for screen readers. Also have used high contrast colours to ensure easier navigation. There is more work to be done to make the app more accessible, which will be taken up in the next phase.
Takeaways
While designing the Q Lounge app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs. The app makes it easy for the users to make and update the reservation quickly, which was the goal of this project.
One quote from peer feedback:
“It’s such a time saver to be able to make and update reservations thru app rather than be on call wait ! I would definitely use this app.”
Next steps
Though I have met the initial goal set up, there is more work to be done. I would liek to conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed. Also there is a lot of scope for adding elements in the design to make it more accessible.