Mobile Search Results: Order by and refine feature

Posted 12th February 2017, in UX Design

Qualitative research, design and AB test, resulting in +10.7% conversion uplift, improving the clarity and overall user experience of SuperBreak's order and refine features on their hotel search results pages.

SuperBreak hotel search results, order by and refine feature


  • Conception
  • Competitor Analysis
  • Qualitative Research
  • Design


Previous order by and refine feature before redesign

The idea spawned from general, ongoing, mobile conversion rate optimisation, looking in Google Analytics at our highest traffic pages and in this case, looking for opportunities through improving the usability of our hotel search results page.

I identified a potential usability issue with the order by and refine features on the page.

The colour and positioning of the ‘refine’ button made it look like a button that activated the selected order by item.

As well as the colour and positioning of the order by drop down.

I believed that this may lead to frustration, confusion or completely missing the order by feature. Making it hard for a user to find a hotel they would be interested in.

I believed the combined effect may lead to abandonment, damaging conversion.

By improving the clarity of the features, more users would be able to complete their goal; frustration would be reduced; and overal user experience would be improved; increasing conversion.


I first analysed competitors and found that many opted for seperate buttons and used icons to reinforce the button’s function.

I then benchmarked the clarity of the existing design against my new design, using a ‘Clicktest’ on I used icons, improved wording, layout and opted for a blue colour which we had been using as a secondary action colour across the website.

Benchmarking Clarity of Designs

In each test I asked 20 users, over 30 “Where would you click to change the order of the results?”

click test of previous order by feature


50% of users clicked the ‘refine’ instead of the order by drop down. Average response time: 10s

usability click test of SuperBreak hotel search results order by and refine feature


The new design did significantly better with all but one user clicking in the correct place. 95% of users clicked the correct feature.

SuperBreak hotel search results order by and refine feature

AB Test and Conclusion

Following the qualitative research and design, I recommended that we should conduct an AB test via Optimizely to measure the impact of the change to conversion. The usability benchmarking showed that it would be likely that the new design would have a positive impact to conversion. Measuring the impact in an AB test would statistically show the impact to conversion and revenue to bring certainty and also help justify any cost of development.

I have designed and developed many AB tests, though in this case, one of my designers developed and ran the test.

The AB test resulted in a +10.7% uplift in conversion and was rolled out across all of our hotel search result pages on mobile.