Role
Status
Shipped
Year
2023
I redesigned the way users access sort, map and filtering functions across Rocket Travel sites. Rocket Travel by Agoda is an online travel agency specializing in building customized white label booking platforms for its many enterprise-level partners and their customers. The goal was to make these functions more obvious, thus making it easier for users to access them from anywhere when they were browsing hotel options.
Problem
During user testing, we realized mobile users were overlooking or having difficulty finding the sort/map/filtering functionalities on the search results page; these functions only existed at the top, so they got lost once someone started scrolling. This was especially bad for our white label partners with primarily mobile customers.
Solution
After observing other sites and assessing user feedback, my team and I collaborated to implement a multi-functional sticky widget at the bottom of the screen so the functions were readily accessible when scrolling. I also elected to change the simple Map button at the top of the page for a static image preview that was a lot more conspicuous.
Scrum Team
1 Product Owner, a small group of developers, 1 designer for occasional support, 1 Design mentor
Process
Discovery, User Research, UX Design, Visual Design, Prototyping, A/B Testing, Dev Hand-off
Impact
📈 1.7% increase in conversion
📈 1.15% lift in Total True Margin
Duration
2023
These changes were especially significant for one of our largest partners, T-Mobile, where over 95% of their customers were mobile users. We saw a 1.7% increase in conversion along with a 1.15% lift in Total True Margin per session. 🙌🏽
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.
Poor visiblity & accessibility 🙈
Sort, map and filtering functions lost on mobile
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.
Surveys
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.
*Complete survey synthesis linked here
Results & Insights
Here are responses from some of our most loyal customers:
What can be improved here?
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
These findings indicated what our users wanted and I was able to easily get buy-in from my team.
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 were most familiar with.
Sort, Map & Filtering
Accessibility on Scroll
Final Designs
After multiple rounds of internal review and combining different ideas together, 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 of course, but the numbers we tracked for mobile weren’t the most accurate or significant, even if they were positive.
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
The combined sort/filter button, static map preview and sticky widget were successfully implemented on mobile across all partner sites, garnering the most significant conversion and margin from T-Mobile customers.
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.
At one point during exploration, I’d proposed a conversation around a more straightforward sort function that wasn’t combined with filtering. This function could live on the search results page, but this proved to be way out of scope, so we focused more on a solution that was low-lift, high impact, resulting in a combined sort/filter button with fewer support tickets.
However, my PO and I agreed to revisit future iterations where sorting lived separately on the search results page, allowing users to interact with it there rather than in the filters modal.