Role
Sole Designer
Team
PM + Engineering + Design mentor + design support as needed
Process
Discovery, User Research, UX Design, Visual Design, Prototyping, A/B Testing, Dev Hand-off
Duration
2023
Status
Shipped
Problem
Customers struggled to assess hotel options, leading to more drop off and even less bookings.
Impact
📈 1.7% increase in conversion
📈 1.15% lift in Total True Margin for T-Mobile
Mobile searches were underperforming due to poor filtering, so I partnered with product and engineering to lead a redesign of our filtering logic on the search results page cross 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. If we could improve how mobile users browsed hotel options, we could increase booking conversion by helping them move through the funnel a lot quicker.
Problem
During 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 customer feedback, I designed a multi-functional sticky widget in collaboration with product and engineering so the functions were readily accessible while 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.
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 customers prioritized and utilized these functionalities when they searched for hotels. I partnered with our Senior Researcher and 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 customers 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 people were most familiar with.
Sort, Map & Filtering
Accessibility on Scroll
Final Designs
After multiple rounds of internal review and combining different ideas together, my PM and I agreed on this design iteration:
Testing
In the QA phase of these new improvements, a smoke test was performed 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, the 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 increase conversion by making filtering more accessible so customers could book much faster. We strongly felt that the new filtering logic helped them do so, 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 these functions were used, 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 PM and I agreed to revisit future iterations where sorting lived separately on the search results page, allowing customers to interact with it there rather than in the filters modal.