Fernando Seminario - Senior Designer | Sorting options on Hotwire
17560
portfolio_page-template-default,single,single-portfolio_page,postid-17560,ajax_fade,page_not_loaded,,vertical_menu_enabled,qode-title-hidden,qode-child-theme-ver-1.0.0,qode-theme-ver-11.1,qode-theme-bridge,wpb-js-composer js-comp-ver-5.2.1,vc_responsive
Product Design

Sorting options on Hotwire

Hotwire is an online travel site offering Hotels, Car rentals, Flights and Vacation packages. Their bread and butter comes from a product type known in the industry as Opaque. The customer doesn’t know the name of the hotel or the brand of car rental until they book – basically a mystery deal. This is my story about how I was summoned to simplify the sorting options.

Observation

Car rental users are able to narrow down their results in a couple of ways: sorting or filtering. On the mobile web experience, the sorting option is hidden inside the “Filters” view, which is a discoverability concern. User testing revealed that “Filter” is not the same as “Sorting”.

Hypothesis

If we make it easier for the users to discover and recognize our sorting options, we will increase engagement and conversion.

Insights

Problem solving has always a an exciting task for me, but it is more interesting and engaging if the problem is well understood and validated (at least in some way). Whether that is through analytics, customer complaints, user testing, or any past tests that could help inform the design. For this design problem, I considered analytics and a previous test.

Analytics
15%
Sorting or filtering

Engagement (all visits) + CVR lift

50%%

Sorting options only

Engagement (all sorting and filtering)

75%%

Lowest price

Engagement (sorting option)

15%%
Sorting and filtering

Engagement (all visits) + CVR lift

sorting options0%

Sorting vs. Filtering (engagement)

Lowest price0%

Most popular sorting option

Collapsed filters (previous test)

When users were forced to toggle a sort or filter option, sorting engagement dropped to 35% vs 50% on control, closely followed by filtering by car type at 34%. A huge drop-off followed for the remaining filter’s at 9% or lower. While this test was a conversion loser and therefore not productized, it did provide us a clear read on the engagement hierarchy for sorting or filtering. Lastly, we also saw the same conversion lift for the segment of users who engaged with any type of sorting option or filtering, 12% lift on variant vs 9.6% on control.

Engagement on Collapsed sort and filters

Explorations

At this point, the insights have informed me that increasing discoverability of sorting is a good conversion driver, and that if over half of engagement is sorting then it might make sense to separate it into its own component or view. There were a couple ways of going about this, one was adding a sort bar to the top of the page, another was splitting the filter button into two, one for sort and one for filter, and lastly just renaming the copy and combining sort and filter.

e1. Addition of “Sort” copy to filter button

e2. Addition of Sort button nex to filter button.

e3. Exposed sort bar at the top of the view.  Prototype

Design

After navigating through multiple design reviews with conversions about which pattern was the best e.g. outline vs. block etc, the explorations were narrowed down to three test variants. During this process we also realizing that we were using the same copy for the first sorting option the customer reviews “recommended” copy on the result cards.

Design 1 (variant)
This variant solves the problem of discoverability by explicitly stating sort options are part of the filters view.

Design 2 (variant)
This variant takes it further and solves the problem of discoverability while encouraging sort bar engagement. It includes a feature discovery animation, which triggers on load and animates left to indicate to the user that interaction is expected. The sort bar also disappears as the user navigates down the results page and reappears when they navigate back up.

Design 3 (variant)
Similar to the previous variant, except the sort bar doesn’t disappear, it stays persistently visible. The desired learning is whether showing the sort bar persistently as the user navigates down the results creates more value.

d3. User drags screen up

Test results

The second variant resulted in a 1.5% conversion lift which is strong. The third variant resulted in an even higher 1.9% conversion lift, which is projected to add over 3.2M of revenue to the car product. Engagement soared nearly 200% as users easily explored the sort options.

1.9%

Conversion lift

195%

Engagement lift

3.2m

Added revenue

Learnings

Showing a persistent sort bar created more value for the user than hiding it as the user navigates down. Also, there is tremendous value in making it easy for users to discover options that help them narrow down a long list of results. Most users don’t do more than simply see the first 8 results, but when they were presented with a sort bar that was easy to engage with, it created value for them.