Finding and booking holiday accommodation often takes time and a lot of energy, especially if a user is trying to do it on a mobile phone.
In this project I explored how we could improve this experience and make it fun and engaging as opposed to tiring and mundane.
Hyper Island project for experimentation module
Project was done from start to finish in 6 weeks time
I’ve started with comparing multiple hotel booking apps to compare the user experience of choosing a holiday accomodation option. There were slight differences in terms of filters and the one can view images of the property. Apart from that user experience was quite similar in all of them.
And in order to understand the problem better (and see if there is actually a problem) I’ve created a survey that aimed at collecting both quantitive and qualitative data. Main audience were adults of both genders between 27 and 38 years old. The data below is based on the responses of 15 users.
9 out of 10 users browse holiday accomodation on mobile
before booking it
Percent of global traffic by device (as of Jan 2022)
Some of the answers from the same survey:
I like to open many tabs and compare the hotels or place i might book. Often i also open Google Map on another tab to see what is around.
I believe it is easier to get a good overview
I prefer to see the images and details on a bigger screen and I like the possibility of opening available hotels on multiple tabs so I can compare the options. I find it's also quicker to complete the booking form and payment details using a keyboard.
I like to have better overview, it is more comfortable. A bigger screen.
Although I am a software developer it's very hard for me to use mobile phone (I do not see well and I always have my laptop with me so I choose comfort). I use mobile phone only if my laptop is not with me (which never happens when I travel).
I find it harder to check that my details are correct, feel more confident I am seeing the website as its intended on a desktop.
To get a better understanding how the user gets from opening the app to booking a hotel, I’ve created a user journey map.
Turns out it takes the user 9 steps to just get to the point of viewing one of the accomodation options, considering they use filters.
The journey to actually booking a hotel itself is not linear since often a user wants to compare multiple options before making the decision.
Each new attempt to find the “right” hotel (find the image of a hotel in a list, view the photos, read the reviews etc.) takes 6 steps.
And the user needs to repeat them over and over again until they finally find the accomodation that they like and are ready to book it.
Some of those steps might be frustrating as they can take a lot of time (e.g. going through all of the property photos in order to find a specific one - for example see pool photos) and there is currently no good way to minimize the amount of steps.
Our user
Key takeaway
Most respondents browse holiday accommodation on a mobile but make a final choice and complete their booking on a desktop device
Pain points
Due to a limited space on a mobile screen it is difficult to get a good overview of available properties
Users prefer opening available options on multiple tabs on desktop browser in order to compare the available options
Checking billing details and contact info when booking a property is more difficult on a mobile phone screen
Wireframes
I’ve created multiple wireframes to test out several ideas of how the final product could look like.
Though the initial idea applies to all of the wireframes: trying to overcome the limitations of a mobile screen and help the user view and compare multiple holiday accomodations in a short amount of time.
After I have tested wireframes 1 and 2 with a couple of users and recieved feedback that I have implemented in the next iteration of wireframs:
show how many hotels are being compared
make more clear how hotels are compared (e.g. by photos of various hotel amenities)
how many steps are left/how far the user is in the comparison process
After completing a couple of user tests, I’ve made a decision to continue with the 4th wireframe idea and developed it further into a hifi prototype.
After the hi-fi prototype was doen I ran a usability testing where I received feedback about the colours of the buttons - they were hard to distinguish for colour blind users. Therefore I’ve changed them to blue and red, the colurs that have high contrast and are easier to distinguish for colour blind people.
Before
After
