IHG's users were not interacting with the search result filter and sort functionality. Research determined a cluttered and confusing UI was the cause.
By making small UI tweaks and re-imagining the mobile experience, filter/sort interaction increased by 151% in just 3 months.
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.
In a moderated research session with current IHG members reviewing the entire booking flow, the search results page was identified as a particularly difficult experience, with filter and sort functionality identified as the key pain point.
I followed up on that session with a usability test to try and understand what the biggest pain points were. Here's what we found:
Additionally, we identified several supplemental goals to consider:
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:
The previous design used 5 (😵) different types of selectors:
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.
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.
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.
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:
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.
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.
The dev team brought a number of edge cases to our attention that required some form or another of remediation, including:
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:
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.
