Filter & Sort

Consistent UI is important, y'all!

UX Design

Launched 

12/18/2020

Problem

IHG's users were not interacting with the search result filter and sort functionality. Research determined a cluttered and confusing UI was the cause.

Solution

By making small UI tweaks and re-imagining the mobile experience, filter/sort interaction increased by 151% in just 3 months.

Role

I acted as lead designer on this project, with oversight from Studio manager Kathy Cahill. I was in charge of the visual implementation and UX research alongside Candra Gill m& Cynthia Horn. Architecture was done by UEA Clarke Scott with content design & input from by Ellen Forbes.

Filtering and sorting lists is a quintessential UX function, one which has been implemented in infinite configurations in experiences across the globe.

While this functionality is certainly not new to UX, it is easily one of the more complex experiences due to the many, many ways filters and sorting can affect each other, as well as the display of the page. As such, it is critical that these experiences be easy to use on all devices, for all users.

IHG's filter and sort functionality on its search results page was not easy to use on any device.

We conducted usability testing with real IHG users to try and understand where the biggest pain points were. Here's what we found:

  • Users consistently missed the map button, or preferred using a 3rd party solution
  • Users consistently opted not to use the unwieldy/lengthy filters drawer, particularly on mobile (the drawer could grow to over 3300px tall on some mobile devices)
  • Users failed to understand the functionality to display prices in money vs points, etc.
  • When asked, more than half of testers failed to locate sort functionality, which was located inside the filters drawer

Additionally, we identified several supplemental goals to consider:

  • UI should utilize a consistent display with other recent updates to the booking flow
  • UI should meet & exceed WCAG accessibility standards
  • UI should reduce any unnecessary or duplicate elements to streamline the experience (for example, remove duplicate "Apply" button")
  • Introduce new UI where possible if it would help users better accomplish their tasks
A screenshot of the filter & sort experience on IHG.com covered in various sad and mad emojis.
002

Better UI for you and I.

The first major change we implemented to solve for the aforementioned issues had to do with the clarity and display of the UI. My team and I have a working session where we identified the following as areas which needed improvement:

Selector overload

The previous design used 5 (😵) different types of selectors:

  • a toggle for price display
  • a dropdown for currency & distance (the latter having its own toggle for Miles/Kilometers)
  • multi-select checkboxes for the brand selector, with a dedicated 'deselect all'
  • a completely different type of multi-select for amenities, no 'deselect all'
  • single-select radios for sort

It was a mess.

To remedy this, we consolidated all selectors to either single or multi-select, single using radio buttons and multi using checkboxes. On desktop, where there was more room, Amenities and Brands were left open, while on mobile all fields were collapsed within dedicated drawers.

UI accessibility considerations

The most egregious offender to accessibility, besides the myriad of selector types, was the fact that most fields did not have a dedicated label, no text when there were no selections made, and various different types of selection confirmations ranging from very clear to not visible at all.

This was an easy fix. We added labels to each dropdown, standardized how selection confirmations should display, and clarified the language around empty or null selection.

We removed the confusing amenities icons from our new design, as they did not add anything to the experience. We also removed the brand-colored checkboxes, which just added unnecessary complexity, often to the detriment of our users. The new design was much simpler and cleaner, with no more than 2-3 colors in any instance of its UI.

Arrangement of elements

One of the biggest problems our users had was that they just straight up couldn't find things, or didn't care enough to look harder for them.

The biggest factor here was the 3000px tall mobile drawer, which had to go.

Implementing a new drawer that could fit the entirety of its contents on the smallest possible device was a big ask. But by condensing all the selectors into custom, scrollable dropdowns (now designed to display in the same way), we managed to make the drawer as small as digitally possible (it even fit onto our researchers iPhone 4!)

In usability tests of the responsive Webflow prototype I made for this effort, 100% of users were able to easily find the elements we had them look for. Compared to the abysmal readings we had before, this was a welcome improvement.

The old IHG Filter & Sort experience
003

Let's get this thing built.

With the research & design pieces finished and approved, it came time to develop this work.

Partnering with development team Atlas (longtime colleagues of the UX Studio), we set out to get this experience made. We had a number of significant issues which came up in development which had to be overcome in a very short period of time:

Translations

As with many projects at IHG, the new Filter and Sort would launch in a laundry list of languages. When designing, we did do some alternates in Russian and Spanish to try and gauge how problematic the layout might be. The designs for LVP and SVP looked great, but the tablet viewport had some serious issues for longer languages.

To solve for this, we developed a new system for truncation which only effected selections that the user had already made, which we figured would mean they would understand anyway. Additionally, we bumped up the viewport range where our elements moved from one row to two, just making 100% sure that there would never be any broken experiences. It didn't look as nice, but hey, that's life.

Map view

One thing that we didn't do in the old design was display a user's sorting selection when they moved into the map view. This was a) because sort was tucked away into a drawer, and b) because it doesn't affect the display of the map view in any way.

However, because the user had the potential to have made a selection there previously, and this selection had the potential to affect results if they return to list view, we opted to continue to display the sort drawer unencumbered rather than disable it in this view.

Edge cases

The dev team brought a number of edge cases to our attention that required some form or another of remediation, including:

  • Hotel searches, by default, display prices in the hotel's local currency (unless the user had previously selected a different currency to display). We needed to come up with default confirmation displays for this scenario, where there may be more than one currencies displayed
  • If a user searches for some specific criteria, for example "Australia", the system would automatically expand the distance of the search to a specific radius. We opted to display that specific radius in the distance dropdown rather than some default content
  • If a user deselected all brands and hit apply, the search would return 0 hotels (duh). We helped the dev team think through some messaging for this new problem, as well as what the user should see if they did this action.
A GIF showing the responsive prototype I made for this experience.
004

Metrics that would make anyone smile.

Three months after the launch of our updates, we reached out to see how things were going with the new experience.

Our data team was happy to report that the changes implemented had a profound effect on our users as it related to the goal of the project:

  • We saw a 151% increase in filter and sort usage post go-live (3.5% up to 8.8%)
  • Customers who filter or sort had a higher conversion rate (22% vs 16%)
  • More customers now move deeper in our booking funnel (from Search to Rooms/Rates)
  • Display Price in” is the most commonly used selection, followed by “Distance” and “Filter by: Brands”, suggesting that users are glad to have a more clear way to use their points
  • Customers using filter and sort are predominantly on IHG.com and Rewards members. We also saw that 2x as many members visit their Rewards Account after searching. This could mean members are interested in seeing what they can get for their points, then going to their Account to better plan, e.g. “should I book using my points or book a different rate so I can get closer to Platinum status?”

While these results are all very exciting and promising, these pages are constantly evolving and improving.

And while I do not expect for our efforts here to stay as they are for much longer, I do hope that this sort of low-functionality, usability-focused redesign can help IHG as a whole inform how to better improve our websites as we go along.

If this project was proof of anything, it's that small changes can make a big impact.
A bunch of people complimenting the results of our hard work!

Gallery 🎨

No items found.

Up next 🤓