SORT/MAP/FILTER OPTIMIZATION CASE STUDY
Hidden functions, poor UX
At Rocket Travel, we specialized in a white label product, building customized booking platforms for our many enterprise-level partners and their customers. Our team optimized all aspects of the user’s journey— from the Search results page to post booking for the hotels, flights, rental cars and activities verticals of our business.
During user testing, we realized mobile users were overlooking the sort/map/filtering functionalities or having difficulty finding them. Considering our white label partners with primarily mobile customers, our aim was to improve the experience by making these functionalities more obvious and accessible from anywhere on the Search Results page.
After assessing how users prioritized these functionalities in their booking experience, I set about designing the most ideal experience— but not without running into some minor technical constraints. After achieving alignment with stakeholders, we were able to implement low lift, high impact changes that not only required fewer support tickets, but also increased conversion for one of our largest partners.
After assessing how users prioritized these functionalities in their booking experience, I set about designing the most ideal experience— but not without running into some minor technical constraints. After achieving alignment with stakeholders, we were able to implement low lift, high impact changes that not only required fewer support tickets, but also increased conversion for one of our largest partners.
ROLE
Experience Designer
PROCESS
Discovery, User Surveys, Ideation, UX Design
DELIVERABLES
Wireframes, Clickable Prototypes, Hi-Fi Designs
IMPACT
📈 1.7% increase in overall Conversion
📈 1.15% lift in Total True Margin for T-Mobile
DURATION
2023
STATUS
Live
Out with the old (UX) 👎🏽
On the search results page, the map and filter buttons sat under the search bar at the top, but easily got lost once the user started scrolling. Additionally, sorting was embedded into filtering, so it wasn’t the easiest to find.
CHALLENGE
Searching for hotel rooms is cumbersome when the sort/map/filtering functionalities are inaccessible when scrolling on mobile.
HYPOTHESIS
Enabling the user to more easily sort, filter and access the map will improve the mobile user experience.
DESIGN SOLUTION
I implemented a floating sticky widget for sort/map/filtering when mobile scrolling is enabled.
Discovery & analysis
I wanted to take a look at how online travel competitors and different brands incorporated sorting, maps and filtering into their mobile experiences to identify common design patterns and see how they solved for easy access of these functions.
hi
User surveys & insights
In order to design a better experience, I also needed to understand how our users prioritized and utilized these functionalities when they searched for hotels. With the help of our Senior Researcher, I sent out a survey to our Rocket Insiders, an exclusive group of our own customers, 96 of who responded.
I got some interesting responses from our participants, and these insights helped me identify how much these functionalities are valued, why and how often they're used based on priority.
*Full survey synthesis linked here
What can we improve?
SORT / FILTER
• make the sort feature more obvious (currently hard to find)
• make sort and filter functions easily accessible from anywhere on the page while scrolling
MAP
• emphasize the map (it’s easily missed in current UX)
• make the map easily accessible from anywhere on the page while scrolling
• make the sort feature more obvious (currently hard to find)
• make sort and filter functions easily accessible from anywhere on the page while scrolling
MAP
• emphasize the map (it’s easily missed in current UX)
• make the map easily accessible from anywhere on the page while scrolling
Design treatments
After looking at online OTAs and food delivery experiences, I tried a few different approaches taken from similar patterns I observed. Based on survey responses, I wanted to make sure I was considering what users are most familiar with.
SORT, MAP & FILTERING
ACCESSIBILITY ON SCROLL
New designs
After multiple rounds of internal review, combining different ideas together and accounting for technical constraints, we opted for this design iteration:
Testing
In the QA phase of these new improvements, we performed a smoke test to make sure there were no critical issues with the fundamental features. Afterwards, we felt confident in conducting an A/B test against the control. The new variant won.
Results
The results of our test were promising…but a bit skewed. This was a purely mobile experience, primarily meant for our T-Mobile customers. Due to unforeseen technicalities, our experiment was set up to record desktop sessions as well. Desktop performed poorly, but the numbers we tracked for mobile weren’t the most accurate or significant, even if they were positive.
For this partner, where we had over 95% of mobile users, we saw a 1.7% increase in conversion along with a 1.15% lift in Total True Margin per session 📈.
For this partner, where we had over 95% of mobile users, we saw a 1.7% increase in conversion along with a 1.15% lift in Total True Margin per session 📈.
Final shipped experience
The intent was to make these functions more obvious and accessible, enabling users to find their desired hotels much faster. We strongly felt that the newer designs provided a much better UX, regardless of the skewed results. Therefore, we proceeded with launching the variant as the default experience on our site and across our white label partners like American Airlines, Flying Blue, Emirates and many others.
Minor tweak: Map CTA was changed from Map View to Show on map, and icon was removed.
Pictured: live on aadvantagehotels.com
Minor tweak: Map CTA was changed from Map View to Show on map, and icon was removed.
Pictured: live on aadvantagehotels.com
Key takeaways
Solving for this allowed me to dive deeper into user behaviors and preferences around our booking platform while also utilizing design patterns that are both common and familiar. I was very surprised by the different ways users use these functions, particularly sorting, and it made me realize we should opt to make it more prominent.
Due to technical constraints around sorting and filtering, the combined button made the most sense here. However, for future iterations, I noted the possibility of exploring a more straightforward way for the sort functionality to live on the search results page, allowing users to interact with it there rather than in the filters modal.
Due to technical constraints around sorting and filtering, the combined button made the most sense here. However, for future iterations, I noted the possibility of exploring a more straightforward way for the sort functionality to live on the search results page, allowing users to interact with it there rather than in the filters modal.
