Overview
The idea of this project was to ultimately to build a hotel booking platform that performs well in terms of functional, aesthetic and experience design. To do so I worked through each phase of the UX design process to research what user's want, what user's need, their behaviours, their context and their painpoints. Each project built on the work from the previous to ultimately come up with a great digital experience.
Research
Competitive Analysis/Benchmark
My first step was to conduct some competitive bench marking to get some context around what many users are currently interacting with and give me some extra context to support my survey and user testing.
Objectives
-
Learn how websites and apps solve the
-
Problems we are trying to solve
-
Understand the conventions we should follow
-
Highlight best practice that we should emulate
-
Highlight potential painpoints.
Summary
Industry Standards:
-
Main CTA on home page is to pick a location and date to begin a booking.
-
Often a banner image takes up a large portion of the homepage.
-
There is a button in the top right for your account and/or to access an existing booking.
-
Users can create an account, log in or checkout as a guest.
-
Chatbot in bottom of the homepage for bot or customer support or a contact us button/page.
-
FAQs section.
Considerations:
-
The websites do not seem to prefill the users location like some transport websites. Eg. Ryanair automatically chooses the departure as Dublin based on cookies/account info.
-
Allow users to flexibly search dates if they wish.
-
Allow flexibility with currency, can be very important as many booking will be from abroad.
-
Proper and helpful error recovery.
Full Analysis
Survey
Objectives
-
Learn more about the goals of people that use websites and apps to view and book accommodation: what they are trying to do, whether anything is preventing them from doing it, and what other features they would like to see.
-
Learn about their past behaviours and preferences.
Key Insights:
Device Usage:
-
Mobile phones are the primary device for accessing accommodation websites/apps.
Purpose of Visit:
-
Users mainly visit to book a room, check prices, and availability.
Task Success:
-
Most users successfully complete their tasks, but a few face challenges with website clarity.
Overall Experience:
-
Overall experiences are positive, with an emphasis on ease of finding information and customization options.
Likelihood to Reuse:
-
Users are generally very likely to use the specific website/app again.
Payment Preferences:
-
Credit/debit cards are preferred, with digital wallets like Apple Pay/Google Pay also used.
Payment Timing:
-
Most users prefer paying at check-in, followed by immediately upon booking.
Improvement Suggestions:
-
While many users are satisfied, improvements can focus on website layout, pricing clarity, and the booking process.
Cancellation/Refund Information:
-
Users value clear cancellation policies and refund information.
Specific Challenges:
-
Users faced challenges with spa bookings, cryptic information, and confusion when checking existing bookings.
Note Taking - Usability Test
Objectives
-
Watch and review 2 usability tests (2 users 2 websites each).
-
Take notes throughout, rewatch the recording and go through notes to make sure they make sense.
-
Focus on the users goals, behaviours, context, positive interactions and pain points.
-
Present these findings back in high detail, visually highlighting the screen and specific part of the UI the note is referring too. This is important as without the visuals it can be hard to fully understand what the note is referring to.
Key Insights:
-
Photos are crucial to users when choosing a hotel or room. We should ensure we have plenty, high quality photos of rooms. Potentially even with a 360 view or a video tour etc.
-
We should give the user flexibility in terms of cancellation and make it clear whether a rate has cancellation included or not.
-
We should use a calendar to allow users to select their dates, and possibly consider adding prices to that calendar as well as allowing users to select a month/year from a dropdown rather than clicking through monthly.
-
We should allow users to customise their stay with add ons such as breakfast etc. But we should not force it on them straight away and allow them to come back later to add them on. Users seem to be overloaded with options at the time of booking.
-
Maps should be used throughout the website. If we have 4 hotels in Barcelona we should build a Barcelona location/landing page where users can compare hotels and see all of their locations on an intractable map.
-
Image slideshows on the homepage work well to show the hotels and locations, but we need to make sure there is enough contrast especially for accessibility.
-
We need to ensure our website is bug free and loads in good time. Both users came across slow load times that they said could drive them to find alternatives.
-
Users can be overwhelmed with choice, ie. no. of hotels, no. of rooms, no. of rates, no. of amenities etc. They do not like having to scroll through lots of options as this can cause information overload.
-
Users are familiar with standards from aggregator websites which are very transparent about prices, amenities, add ons etc to easily compare. To compare if hotels have breakfast, cancellation, pool and so on.
-
We should ensure users have options on when to pay, such as up front or when they stay. As people have different preferences.
-
The size of the room is very important to users, however the measurement in meters squared don’t seem to mean much to users and they prefer to visually see the size of the room in photos.
Usability Test
Objectives
-
Recruit a user.
-
Find suitable websites to test.
-
Prepare the session, the questions, the tasks.
-
Learn about the context of use of people that use websites or apps: what are they trying to do, who are they with, where arethey, what devices are they using?
-
Learn about the goals and behaviours of customers when
Usability Test Script
Usability Test Recording
Analysis
Affinity Diagram
Time to make sense of all this raw research data I've gathered.
Objectives
-
Review your research, taking notes as you do. Use those notes to create an affinity diagram
• Learn how to put structure on qualitative research data
• Learn the power of collaborative analysis. -
I did this activity with a colleague of mine to harness collaboration and find deep insights.
Key Insights/Focus Areas:
-
Images of hotel, local attractions and specific rooms. Good quality, prominent and plentiful.
-
Clarity around pricing, incl. member only pricing, and cancellation options
-
Make it easy to compare hotels and rooms in a compact easy to digest layout, without too much scrolling to not overload users.
-
Consider using icons where possible, especially for amenities and room features.
-
Ensure we provide a comprehensive booking summary throughout to reassure users they have the correct room, dates, prices etc.
-
Provide users with extras and information on their pricing/availability during booking but do not force them to book here and allow them to add them on at a later date.
Customer Journey Map
Now lets us all of this valuable research data to map out the potential user journey.
Objectives
-
Map out the journey our users will take.
-
Highlight goals, positive interactions, painpoints and behaviours.
-
Assess whether each step of the experience was positive or negative. Where relevant, add some direct quotes from your customers to help bring the journey map to life.
Flow Diagram
Lets go a step deeper to each screen and screen state the user will have to flow through to complete their task.
Objectives
-
Define the high-level booking flow for your mywebsite.
• Address all the issues highlighted in my customer journey map
• Lay the groundwork on which I’ll build my designs.
Interaction Design | Sketching
Now its time to bring the flow diagram to life in the form of sketches. Considering the screens and screen states the user will interact with. Starting to consider what the UI will look like, especially layout.
Objectives
-
Build on the flow diagram you created in the previous project and sketch the screens and screen states for users flowing through your desktop app
Mid fidelity prototype
This is where the hand drawn sketches become digital. Using a wireframe kit and greyscale. At this stage the designs can become a prototype using Figma's prototyping capabilities. This is great for testing with users or sharing internally with stakeholders.
Objectives
-
Use a wireframe UI kit.
Developer Annotations
Before these designs are developed I need to annotate them for developers. This will include information on interaction, functionality, input types, rules and feedback.
Objectives
-
Define the extra details that developers need to build the product accurately.
-
Some more detailed annotations (specifically with colours and spacing) will follow the high fidelity design.
High Fidelity prototype (In progress)
At this stage I want to take the mid fidelity design and prototype and turn it into a high fidelity one. I will be using a design system, much like you would at most organisations. To keep both design and development consistent. This should provide a very close example of what the final product should look like and will be ideal for user testing.
Objectives
-
Use design system to build a detailed high fidelity prototype.
High fidelity
prototype
Usability Test (In Progress)
Once the high fidelity prototype is finished I will then run another usability test to really validate my designs before sending it to development.
Objectives
-
Validate and challenge my designs.