OCTOBER 2016
LINK TO DESKTOP FILTER PROTOTYPE
LINK TO MOBILE RESEARCH BOARD
LINK TO MOBILE WIREFRAMES
LINK TO MOBILE HOTEL MOCK
LINK TO MOBILE FLIGHT MOCK
Filters are almost essential for users to find a Hotel, Car, or Flight that meets their travel preferences; however, the current implementation of them on KAYAK's desktop & mobile applications could use some improvements. Users need to be able to reduce the volume of results under consideration by targeting factors like booking providers, travel brands, preferred class of travel, and other options. On some verticals (Hotels, Cars), KAYAK may present results in a “recommended” sort order by default, in order to present arguably better results to users without the need to filter. Sorting is one part of result view, but filtering is a more targeted and user-controlled option for finding the right result quickly.
For desktop, this was an exploration of whether or not KAYAK could test filters across the top of result pages rather than the left rail. Also, we wanted to give more prominence to frequently used filters across the desktop and mobile experience. The most important (heavily-used) filters for each vertical are pulled into the main filters page, and the less-heavily used remain in deeper filter categories.
Giving more prominence to filters will promote people to use them. It's been proven that if users interact with filters, they have a higher intent to purchase, therefore is worthwhile to see if surfacing the filters higher or more prominently would work for users. It was also important to make a clear distinction between what filters had been interacted with and applied as opposed to the others that haven't been used yet.
Success for this project was measured on increased conversion and increased or neutral interaction with filter and sort options. Some risks or barriers that we knew of were we wanted to improve the Filter UX, but we don’t want to force users into using them more as a crutch for our not providing relevant, high-quality result content. We knew we should continue to focus in parallel on improving results so that filtering becomes less and less necessary.
PREVIOUS DESKTOP Left Rail Design
Currently, the exposed left rail filters on the desktop experience don't give a good representation of what's been applied and what hasn't been. For desktop, putting the filters at the top of the page allows them to freely look at the results below without having to look back and forth from the left to the right as they apply filters—they would see the results updating beneath the filters as they narrowed down their results and have an easier time seeing what filters they've interacted with and applied.
In this view, I find it hard to scan the filters as well as the results at the same time. When I interact with them, its tough to see how the filters are affecting the results.
In addition, the current treatment of filter application on desktop isn't apparent enough. You can see here, I've interacted with the Times Filter and there isn't a clear indication of what's been changed.
NEW DESKTOP hotels & flights mocks
MOBILE WIREFRAMES
LINK TO MOBILE WIREFRAMES
LINK TO MOBILE RESEARCH BOARD
The current mobile filters are somewhat hidden and they’re occasionally counterintuitive in terms of their expected behavior.
GOALS (similar to desktop):
- Minimize the number of taps required to find the Filter and Sort options, but...
- Not impede a user accessing results quickly
- Clarify for users when filters are actually applied versus relying on actions that close the filter dialog and therefore might apply filters: i.e. “See ### Hotels” or "Apply" is applying your selected filters. “Cancel” or "X" closes and cancels your filtering activity. “Reset” clears user-applied filters.
- Expose most-used filters clearly; hide more advanced or less-frequently-needed filters
- Make it clear to users when any filter(s), or any non-default sort order, are applied
Mobile Mocks
LINK TO MOBILE HOTEL MOCK
LINK TO MOBILE FLIGHT MOCK
How filters are applied:
Filters are still applied as the user interacts with them, and the result count based on the applied filters is updated accordingly. The current filters however apply immediately as the user interacts with them, but the action to close out of the filter menu pages is inconsistent and can be confusing to users:
iOS app has a “Close” in the top right to close the filter pages
Mweb has “Done” in the same position on filter pages
Android has 2 navigation options to return to results from the Filter menu: “Back” arrow at top left from main filter page, and “x” from main filter page and individual filter items
Actions inside the filter pages:
The new designs have 3 clear actions a user can take on the filters main page and details pages:
Apply (“See 45 hotels from $167/night” etc) - this is not new functionality but is now more explicit to the user and will be consistent from App to mweb on each device. This large Apply button functions like the iOS “Close”/mweb ”Done”/Android ”X” and “Back” from main filters page.
Exposed filters are all enabled by default, but visually are not filled in (outline styling).
As user taps on a filter item, it fills to show that it is selected (e.g. for Stop, a tap on nonstop would fill nonstop Orange, and 1-stop and 2+stops would change to the unselected state, gray)
If the user taps on all available items in the filter category, the items all fill orange. User can close out of the filters, and upon return to the filter, the items should still appear selected (orange).
