HOTEL PAGE
UX REVIEW
My work
.png)
-
Even though these adjustments were made on all devices, the Desktop version performed better in most cases.
-
Mobile has a different gallery & summary component, so nothing was changed in both cases.
-
We proved that displaying a search bar increases the traffic to the search page, however, in some cases users misunderstood the expected behavior.
-
The summary proved to be helpful for editing faster the date & guest information, however, it had a lot of misclicks and some users didn't get how the main CTA works. So, we decided to test it in the next release a different version of the page without the summary but with the data/guest input field placed in another area.
Final thoughts
Problem statement
The Hotel page is the most valuable to the business and the user. For this reason, some optimization changes were made so the experience within the page becomes as objective as possible, since it was observed in the old version, that users had difficulties navigating, and basic but crucial actions, such as selecting an offer, weren't done in the best way.
Project goal
As mentioned, minor visual changes were made with the aim of optimizing the user experience on the hotel page, such as:
Start new search
Inclusion of the functionality to start a new search so that users coming from external traffic could start a new search directly from the hotel's page.
Gallery button redesign
Changed the design of the “view gallery” button, so that users could better visualize the fourth image and centralize clicks in a single area.
New summary component
Inclusion of a new component, so that users could change dates and guest information more quickly, as it was common for offer availability to change from time to time.
Room component redesign
Visual change of the component of the room, to better inform about the details of the rooms and to accommodate more number of offers in the same area at the same time.
Filters
Inclusion of the functionality to filter offers, so that users can quickly view the offer that best fits their needs
Map redesign
New map component design, which provides better navigation and more details of the hotel's location.
SUMMARY
Project
eCommerce responsive website
Role
Product Designer
Skills
Data analysis, design documentation, user-behavior observation, data report, UX review
Tools
Google Analytics, Hotjar, Data Studio & Miro
Target market
Portugal, Spain, Italy and Brazil
Process
1. Collecting data
I start by collecting the available data, which was previously set up together with the Data Analytics team, so that we have a real base for the analysis. Data were extracted from Google Analytics, heatmaps, and recordings from Hotjar.
2. Comparing performance
Before starting the evaluation, I created a dashboard in DataStudio with the GA data so that we had a focused view of the metrics that mattered to our team. Metrics like: Users, Sessions, Avg. Session Duration, Bounce Rate, etc.
3. Observing behavior
I spent a couple of days watching Hotjar recordings to understand real user behavior on the page while saving and commenting on the ones that stand out. Finally, I downloaded the page heatmaps to add to the analysis.
4. Documenting the result
After collecting and analyzing the data, I moved on to the phase where I describe the result and documented everything that is important for the team. From performance details to learning and adjustments for the future.
Performance indicators
Start new search
MAIN GOAL
Reduce the need for external traffic to drive more sessions to the search page.
PERFORMANCE
Traffic to the search result page increased a few percent, but not the expected value.
LEARNINGS
The UI confused users who were expecting an "edit search" action and not a "start new search".
Gallery button redesign
MAIN GOAL
Accurate clicks focus on what the user really wants. See the image or see the gallery.
PERFORMANCE
Clicks are more spread over the gallery component and not focused on an image like used to be.
LEARNINGS
Changing the design didn't affect the gallery's performance, it continues to be the most interactable component.
New summary component
MAIN GOAL
Users can easily edit date and guest information and check the reservation resume.
PERFORMANCE
Data shows that users interact a lot with the functionality of editing information.
LEARNINGS
We found problems within CTA like clicks and no action, confused labels, and complex UX to add a room.
Room component redesign
MAIN GOAL
Reduce miss-clicks, display more room information, and show room images.
PERFORMANCE
Clicks are more focused on items that have interaction, but the lack of room information is still a problem.
LEARNINGS
Without enough content, the miss-clicks continue to happen.
Filters
MAIN GOAL
Give the option to filter offers and see faster the best room that affords better the user's needs.
PERFORMANCE
After the gallery, this became the most interacted component on the page.
LEARNINGS
Free cancellation was one of the options and turned out to be a decisive factor for conversion.
Map redesign
MAIN GOAL
Give users the option to navigate on the map, directly from our page. With no need to go to google maps.
PERFORMANCE
Many clicks around the hotel card show us that this component is performing really well.
LEARNINGS
Users open the modal expecting to see more details, but we don't show more information.