UX Design for a Hotel Booking App
The client is a large hotel chain looking to create an online booking experience that is simple and accessible
The task
This case study formed part of my project work for my diploma from the UX Design Institute, where my task was to focus specifically on how users search for and book hotel rooms online. This industry can really benefit from UX: the hotel booking process should be simple, but sometimes it can feel complex.
The project goal was to design and build an interactive prototype ready to be tested with users.
My role during this project was to research, define, design and validate a creative UX design solution.
The process
To understand the problem and define my design goals, I initially researched similar products and performed a competitive analysis. This helped me determine the best processes, strategies and techniques to achieve the desired business objectives through a set of metrics.
Conducting user surveys and interviews, and by observing how people use similar products during usability tests, helped me to empathise with users and understand their goals and behaviours. It also provided rich insights into what delights and frustrates them.
Then by taking all this research data and organising and interpreting it through affinity diagrams, I developed customer journey maps which then guided my design concepts.
By sketching out these design concepts and flow diagrams, I generated ideas and explored design solutions quickly.
Through mid-fidelity wireframes I developed the interaction design, and defined the design specifications and UI.
I produced a prototype in order to conduct a usability test and iterate on a final design solution.
<span data-metadata=""><span data-buffer="">What are the competitors doing well, and what can be improved?
I choose four hotel booking apps to benchmark against, noting which areas provided a good user experience, which areas needed improvement, and most importantly, the negative experiences and pain-points.
I captured each of the steps involved in choosing a hotel and booking a hotel room in each app, marking up each screen with colour-coded notes.
<span data-metadata=""><span data-buffer="">What are they doing well<span data-metadata="">
- The search function is given priority and is highlighted
- Allowing users to continue their previous searches (to pick up where they left off). This saves time and effort
- Showing the user the different prices by date and availability, highlighting the cheapest dates
- The search destination and dates are constantly visible (helps to avoid errors)
- Large images and plenty of them
- Star ratings, and user ratings and reviews give a quick and useful impression of the accommodation (saves time and effort). Using a third party review feature such as TripAdvisor helps establish trust
- An option to search and view the results by map is an important feature, and keeping the user easily informed about hotel locations helps avoid errors
<span data-metadata=""><span data-buffer="">What can be improved<span data-metadata="">
- Be careful of ambiguous language and icons. Use text with icons for clarity
- Don’t overload the user with irrelevant information, such as travel articles, etc. Give the user the option to view more information if and as they need it
- Don’t hide useful information behind small and unclear buttons (improve discoverability)
- Keep the price information consistent and clear throughout, don’t cause confusion and make the user have to think
- Don’t force the user down too many steps with an overcomplicated flow (time and effort)
- Use geolocation to find the user’s location and local currency
<span data-metadata=""><span data-metadata=""><span data-buffer="">Understanding the user’s goals and behaviours
To try to understand and empathise with the potential users, I conducted user surveys and interviews help learn who the users are, what their experiences are like, and what they need, value, and desire.
Conducting and observing the usability tests helped me to understand the user’s mental models, what they ‘think’ they know about the booking process, and what they expect from the process. It gave me first hand experience of the user’s pain points during the experience.
<span data-metadata=""><span data-buffer="">UX survey<span data-metadata="">
I began with a UX survey as a quick and relatively easy way to get data about the potential users. I used a mixture closed and open questions, to get both quantitative and qualitative data.
The goal of the survey was to gain insights on how users interact with hotel booking sites and apps, the top competitors they use, and what their requirements are. I used Google Forms to ask eight questions, and after two days received 38 responses.
Some survey results
<span data-metadata=""><span data-buffer="">Survey insights<span data-metadata="">
- 81.6% of responders had visited within the last 6 months, making their feedback up-to-date
- 84.2% of responders used a mobile device, meaning a mobile-first design is relevant to users behaviour
- The top two reasons are to book a hotel room and check prices, and both got 50%
- 14 out of 36 responders said booking.com
- Three responders wanted to be able to save their searches/view previous searches
- The responders said Price and Location are equally the most important
<span data-metadata=""><span data-buffer="">Comparative usability testing with interview<span data-metadata="">
I began with a user interview, to learn about their experience with the hotel booking process, their needs, goals and the context of use.
The goal of the interview was to discover what apps and sites they most commonly use, and why. What is the important criteria for choosing a particular site or app, what’s their criteria for picking a hotel, and how they ultimately decide.
<span data-metadata=""><span data-buffer="">Needs & goals<span data-metadata="">
- Easily search and book hotel rooms for himself and partner/friends
- Search first by location and then by price
- Find specific information about insurance and check-in times
- Share and discuss details with travel companions before booking
<span data-metadata=""><span data-buffer="">Behaviours<span data-metadata="">
- Starts his search in Google
- Then searches on a few websites to compare
- Usually books hotel accommodation online with a site that offers lots of hotels like booking.com or Airbnb, whichever has the cheapest offers
- Use his mobile device and laptop
I then conducted a remote comparative usability test with the user, observing them interacting with two competitor hotel booking apps. I gave them two clearly defined tasks to follow, and recorded the session.
The goal of the comparative usability test was to observe their behaviour and learn their mental models. And to gain insights into the positive interactions and the pain-points experienced.
For the purpose of the testing I provided the user with two different tasks for each app, and I guided them through the process, encouraging them to think out loud as much as possible:
Comparative usability testing notes examples
The results of the comparative user test I conducted, along with two other provided user tests with which I performed in-depth note-taking, helped to identify some problems and friction in the booking process:
<span data-metadata=""><span data-buffer="">Comparative user test insights<span data-metadata="">
- The user seemed confused when searching for a suitable hotel close to the sea, and went back and forth searching for a way to filter the results
- He found the calendar date selection frustrating: ‘a bit slow…I’d rather go to the specific date…rather than have to click through every month. If I could spin through, rather than clicking.’
- The user mentions TripAdvisor a lot, and how important reviews are to him when making a decision
- The user didn’t like that there were no ratings for the hotel, ‘there was nothing to say this is reviewed…again, I would have to go do my homework before booking.’
- The user says the room rates and offers were confusing, and couldn’t understand why the advance pay option with no breakfast included was dearer. This could damage the users trust in the app
- Didn’t like the login ‘walls’ to get the best deal/offer
- A negative according to the user, was the hotel search results listing hotels in different locations when he searched for ‘Barcelona’, ‘I don’t really need to see about the hotels in Morocco…I typed in Barcelona…it was unnecessary’
- He liked that you could add on extras, which is something you can’t do through booking.com ‘it’s more of an experience you’re adding to the already nice experience.’
- The user commented that he didn’t see any information about the hotel, it went straight to the room
- He would have liked to have seen more information at the end about the pricing structures or offers, seems to have finished feeling a bit confused as to whether he got a good deal with the offer he picked
<span data-metadata=""><span data-buffer="">Organising and analysing the data<span data-metadata="">
Now I needed to take all this raw data and analyse it and identify patterns.
I used affinity mapping as a process of collecting, organising and grouping qualitative data to create an affinity diagram:
- I reviewed all the research data (benchmarking, surveys, comparative usability testing) and begin to make concise notes on colour-coded sticky notes
- Emojis were used to highlight positive and negative interactions
- The notes were first organised into groups
- Then I created subgroups: make the groupings as granular as possible and then labelled them
- I summarised the groups and key themes from the research
Summary of the key themes from the research
The next step was to create a customer journey map, to help paint an overall picture of the most common user experience, highlighting the negatives and the positives.
Using the affinity diagram groupings as a starting point, I mapped out the steps in the user journey, defining the high-level steps in a chronological way through the booking process.
I then listed the actions and tasks, grouped into sections such as Context, Behaviours and Goals, Mental Models, Positives, Pain points.
I graphed the journey using emoji’s to highlight the positive and negative interactions, and enriched this with user quotes where relevant.
Customer journey map
<span data-metadata=""><span data-buffer="">Needs & goals<span data-metadata="">
- Find hotels quickly and easily
- Find the best deal/offer
- Book a hotel room at the best price
- Have ratings and reviews for the hotels
- Have clear and concise information presented to them
<span data-metadata=""><span data-buffer="">Behaviours<span data-metadata="">
- Users prefer a simple user interface with large imagery
- Users like to view and search the location on a map
- Users want to be able to compare different hotel options easily
- Users want to filter and sort the search results
- Users will become frustrated with a complicated date picker
<span data-metadata=""><span data-buffer="">Mental models<span data-metadata="">
- Users have an expectation for clear and concise information
- Users want to find the best deal/offer
- Users wants the search to be as simple and straightforward as possible
- Users expect transparency and don’t want hidden costs
- Users want flexible payment and cancellation options
<span data-metadata=""><span data-buffer="">Determine the high-level booking flow<span data-metadata="">
I took the customer journey map I developed and attempted to create the user flow diagram for my hotel app along the ‘ideal’ or ‘happy’ path. The flow has one focus: booking a hotel room.
Quickly sketching out flows using basic shapes helped determine the information architecture, without being distracted by the screen design. I then built on these sketches in Figma, creating basic wireflow diagrams.
I used the flow diagram to address any potential issues that arose during the research stage (frustrations with the date picker, difficulty determining hotel locations, price inconsistencies). Before this process I wanted to include the user’s search journey when using the ‘Map view’ feature, but this overly complicated the ‘happy’ flow. With more time I would like to explore this flow also, as being able to search for hotels using a map was a popular option for users during the research stage.
<span data-metadata=""><span data-buffer="">Designing the screen states and interactions<span data-metadata="">
Building on the wireflow diagram, I began sketching each screen and state in detail. This helped me to work out how the user will interact with them as they journey through the app, from the home-screen to the booking summary screen.
Sketching allowed me to quickly iterate through my design ideas, to concentrate on the movement without getting distracted by the aesthetics.
Through this process I tried to refine the complexity of the flow down to as few steps as possible. I went back through the competitive benchmarking research to help implement good design conventions and best practices. With more time I should have done some user testing at this point, to help confirm my design decisions.
<span data-metadata=""><span data-metadata=""><span data-buffer="">Testing and validation
I used Figma to translate the sketches into a digital interactive prototype, to test and validate my design decisions.
I created a mid-fidelity prototype focusing on the interactions and UX journey, using real content to design the layout and visual hierarchy. The goal of the prototype was to test it with a potential user and validate the design.
To ensure the logic of my design is clear for everyone who will review the product, I included a document of the wireframes with detailed design specifications. These notes detail the functionality and behaviour of the product, to help reduce guesswork and potential errors.
<span data-metadata=""><span data-buffer="">User testing insights<span data-metadata="">
- The user felt there was too many steps involved in using the search form, ‘Why does it bring me back to the home screen after each form field is populated?’ My logic behind this design choice was to help with ‘forgiveness’, for the user to confirm they input the correct information before moving on to the next search criteria. But this created at least two unnecessary steps
- When observing the user journey through the date picker I felt unsatisfied with the calendar design. This was a very important feature that caused a lot of frustration in competitor apps during the comparable user testing
- The user wanted to search for the hotel using the ‘Map view’ feature, and was disappointed that it wasn’t available in my prototype as part of the ‘happy’ flow
<span data-metadata=""><span data-buffer="">Improving the design using user feedback<span data-metadata="">
With the valuable insights from the user testing, I wanted to improve my design.
It was important to reduce the steps involved in completing the search form, improving redundancy in the app.
I went back through my research and questioned ‘did my calendar design provide a good user experience, or could it be better?’ The date picker is a very important part, so I took the time to iterate more design solutions.
<span data-metadata=""><span data-buffer="">Final reflections<span data-metadata="">
This project was an ideal scenario, a new product without restrictive business requirements, stakeholders, tight deadlines, etc. But even so, by working through the UX design process I feel I’ve gained true experience.
My main lesson learned is that UX design is not a linear process, and though i was working through it step-by-step, it became very clear that a more agile approach is better. Testing my design choices provided the best insights, and if I was doing this project again I would have tested my design solutions earlier (at the sketching phase).
I’m happy that after testing my first prototype I took the time to iterate more design solutions, and evolve my ideas. I feel I improved my design with the user feedback, and this is an important lesson to carry forward.