UX Portfolio Case Study: Mobile
Rooms Hotel Booking App
Context
I designed the user experience for an iOS mobile app for fictional hotel booking site 'Rooms’. This project formed the coursework for my Professional Diploma in UX Design. The fictional client was a new hotel looking to create an online booking experience that was simple, accessible and based on a deep understanding of their target users.
The Problem
Booking a hotel room online should be a simple process but, sometimes it can feel complex. Users were confused by how the date selector tool functioned, how to search for a hotel in a specific location and found the pricing options difficult to comprehend with too many variables.
My Role
My job was to simplify this process and design an app that was easier to flow through, focussing specifically on the hotel booking process: how users search for and book hotel rooms online. The goal was to increase conversion rates and allow the user to easily and successfully flow through the booking process. The final part of the the project was delivering a mid-fidelity and clickable prototype that could be tested with users, along with a detailed set of annotated wireframes for handover. My strategy and approach to the process covered 4 phases...
Design Approach
Research
Competitive Benchmarking,
Online Survey, Usability Testing,
Note-taking
Concept
Flow Diagram,
Interaction Design
Analysis
Affinity Diagram,
Customer Journey Map
Design
Sketching, Wireframes,
Prototyping & Annotations
Research
My research strategy involved the triangulation of Competitive Benchmarking, Online Survey and Usability Testing. I used these research methods to validate and invalidate my assumptions, find patterns in successful conventions, identify gaps for improvement and expose major issues that needed to be dealt with.
Analysis
Analysis of the usability tests flagged the most common pain points and also identified gaps in design, these were the issues that were most damaging and occurred most frequently…
Date Selection Tool
Users found the date picker tool for selecting dates difficult to use the calendar
Hotel Images
Users wanted to see more images of the hotel, lobby, restaurant, pool, rooms etc
Hotel Description
Users wanted more information on the type of hotel and what amenities were available
Ratings & Reviews
Ratings and reviews made by previous guests played an important part of hotel selection
Local Currency
Users wanted the price to be
shown in their local currency
Search by Map
Users wanted to see where the hotel was located, making it easier to choose location
Pricing Options
Users found room pricing confusing with too many inexplicable variants
Sign-in vs. Guest
Signing in affected autofill of personal details and payment, notably in with Apple Pay
Affinity Diagram
I collaborated with 2 volunteers to review, make notes, then sort, group and sequence the research data from the competitive benchmarking, online survey and the 3 usability tests.
Design
After analysing the research, I divided the design priorities by functionality and features. These were the Top 20 ‘must haves’ for the high-level flow of the app.
Functionality
01.
Start the search on the homepage so there are fewer screens
02.
Limit the search criteria to destination, dates, no. of guests
04.
Display search results on a map, show price for the stay
05.
Search criteria visibility and edibility on every screen until booking
03.
Make date selection tool conventional & easy to use
06.
Show prices in the users local currency
07.
Payment default set to ‘payment on check out'
08.
Enable correctly coded autofill form input fields
09.
Provide feedback & validation in all forms
10.
Add a ’back’ button to return to previous steps
01.
A minimal homepage with limited task
02.
Large image on homepage to excite
03.
Multiple images of the hotel and room
04.
Hotel description, list of amenities & features
05.
Trip Advisor ratings
& reviews
Features
06.
Contact details for the hotel (email & phone)
07.
Option to make a special request
08.
Fewer room pricing options
09.
Room ‘extras’ as a step after room selection
10.
Choice to sign-in or use as a guest
Structure & Navigation
I built on the results from the affinity diagram and added structure on the analysis of the research data by creating a customer journey map. This identified the high-level steps in the journey and allowed for assessment on whether each step was a positive or negative experience for the user.
Before designing the mobile app I wanted fix the issues uncovered during the research highlighted in my affinity diagram and customer journey map. I defined the high-level flow for the app by focussing on one primary use case, this was to understand how users would flow through my design.
The next step in design was to sketch the screens and screen states for the mobile app booking process. This addressed all of the issues and user goals identified in my research and analysis.
Prototype
After defining the solutions with flow diagrams and sketches I created a medium-fidelity prototype for the app using Figma. This added more detail in the form of interactivity and allowed for usability testing. It contained enough detail and interactivity to test the high-level flow, screen layouts, text, and basic interactions of the app.
Link to the prototype.
Evaluative Testing
To refine and improve the prototype I conducted 5 usability tests. I asked the users to book a hotel room, in a specific location, on a particular date for 2 people, with breakfast included and to add a bottle of Champagne.
The users were aware that they were testing a prototype and therefore functionality of the app would be limited. They understood that the personal details entered were for a fictional user with dummy debit card details, not their personal details or payment details.
Design Adaptions
I made notes from the 5 usability tests and added them to an affinity diagram. On analysis, these were the most common pain points and therefore the highest priority for redesign:
1
Remove the arrows on the image carousels and indicate scrolling
2
Show hotel check in and check out times
3
State the cancellation policy on all relevant screens
4
Itemise prices that make up the total price on the payment screen
5
Confirm the price displayed is for the number of nights booked
6
Show that the hotel offers a cooked breakfast, serving times and price
7
Show the prices on the room extras screen
8
Refine functionality of keypad overlay so it follows convention with iOS Apps
9
Change wording on payment screen to confirm payment only taken at check out
10
Change wording / terminology on CTA’s
Deliverables
I created a set of easy-to-understand annotations to accompany the prototype, this was to define the extra details that the developer would need to build the app accurately, bridging the gap between design and development, building a strong designer-developer relationship.
I decided to make the annotations directly in to the prototype in Figma, using comments, with the intention of keeping an open dialogue and discuss what does / doesn't work for adaptions to be be made.
Metrics
I measured the success of the app by analysing the 5 evaluative usability tests. My method of measurement looked at 2 Behavioural KPIs (Task Success Rate & Time on Task) and 2 Attitudinal KPIs (Customer Satisfaction & System Usability).
Task Success Rate
I selected 10 tasks for the users to complete. All participants were successful in completing all tasks, therefore the task success rate was 100%
Customer Satisfaction
Users like the layout, design and simplicity of the app. They were delighted by the selection of room extras and that they could make special requests to customise their stay. Little touches like the illustrative drawings of the bed, room size and the booking confirmation percentage progress indicator brought joy.
Time on Task
Users took an average time of 8 minutes to flow through the app. From initial search to receiving the booking confirmation.
System Usability
Users found the app streamlined, straightforward and easy to use. They found it very clear and liked how they flowed through the booking process, they found it followed convention with other apps they have used to book hotel rooms. All users understood what each icon represented.
100%
Task success rate
I selected 10 tasks for the users to complete. All participants were successful in completing all tasks, therefore the task success rate was 100%.
8mins
Average time to flow through the App
Users took an average time of 8 minutes to flow through the app. From initial search to receiving the booking confirmation (Shortest time 5mins 8 seconds, longest 9mins 15 secs).
everything was
streamlined
that was
straightforward!
it guided you
through very well
it was a clean and
clear experience
I liked how
easy it was
step by step it
was quite simple
Conclusion
My goal for this project was to simplify and streamline the booking process, making it easier and therefore faster to flow through. I successfully achieved this which would have a positive impact on conversion rates and user satisfaction.
All users successfully completed all tasks set in the usability tests of the prototype, from searching and selecting to entering payment details and obtaining booking confirmation, taking an average time of 8 minutes to flow through, from search to booking confirmation.
I addressed user satisfaction by including more images, more room extra options and the ability to customise the stay by making requests. Users could sign in or check out as a guest and pay when and how they wanted.
Conducting usability tests initially took me out of my comfort zone, however, by the end of the project I was comfortable running them.
I really saw the value usability tests brought to the design process. The biggest improvements to the prototype and the app came from these sessions.
There were further improvements and additions that could have been made. Extra features like ‘add to favourites’ so users could save hotels, ‘compare hotels’, and ‘save search’ would allow users to continue with a booking that had been interrupted, not decided upon or yet completed.
On this project I learned that the designer’s job is not only to delight users but also to bring value to the business through increasing conversion rates. UX Design is an iterative process testing the prototype is key to refining and validating design.
