Filters
How can we improve the filtering experience and enable users to find the best flight for their preferences.
Why
Problem & Opportunity
During a user research session led by Google on the topic of finding a flight through Google Search, it became apparent that we have many opportunities for the search experience, focusing on the filters' usability. In sessions, users were struggling to narrow down their search by using filters.
From the research sessions I've identified this as a potential problem space to tackle, that can bring value and by setting a strong foundation for searching and filtering experience enable quicker scaling. I have worked with the Product Managers and Engineering Leads to bring this project to the teams' roadmaps.
My role
Leading projects from the design side, while collaborating with copywriters, designers, product managers and engineers to map needed changes and lead them to implementation
Worked on creating an implementation strategy that spanned across 2 phases of a project and considered two different team setups (Native apps and Web are separate teams at Flights)
Lead collaboration with other teams within Booking.com to introduce new filtering navigation on native apps
Regularly looked for feedback from my peers and stakeholders, by hosting design reviews and asking for feedback from internal channels
Created experimentation strategy, where I collaborated closely with Data Engineers to ensure we are measuring the right metrics
Create hand-off documentation that supports the multi-team setup
Time
Q1 2021 - Q1 2022
Team
Designer (me)
Product Manager
UX Researcher
UX Copywriter
FE Engineers
BE Engineers
Scope
Web implementation (desktop & mdot)
Native apps implementation (iOS & Android)
Current state
How
Quantitative data
First I looked at quantitative data, looking at different tools we had for analytics to see where some of the problems lay and set some baseline metrics.
Insight 1
Significant drop-off rate from Search results to Flight details, which could mean users aren't finding the right flight for their needs.
Insight 2
Low filter interaction on mobile devices, could result in filters being hidden behind a sheet.
Insights 3
High rate of users over-filtering and receiving 0 result screen, which results in them dropping off.
How
Qualitative data
To better understand the base problem, I also looked at qualitative data - rewatching videos from user testing Google did for us and looking through user feedback data we are getting weekly through the feedback form on our website and app and from CS.
Insight 1
In user testing, we saw that airlines and flight times filters are hard to use, and users were struggling when applying them.
Insight 2
After applying some filters on the native app, quite some users got an error screen, informing them too many filters were applied.
Insights 3
Users in our feedback form were very vocal about missing filtering options for baggage, flexible ticket and budget.
How
Problem definition
After getting a good understanding of the problem space, I've narrowed down my insights into 3 main HMW questions that encapsulate the biggest user struggles.
I tied these with expected business metrics, to define what metrics of success would look like. An overarching theme (as in the majority of e-commerce products) is an increase in conversion, which we measure with flights booked. But to better understand if we are solving each of the defined user problems, I ensured to also define secondary metrics.
HMW help travelers find the best flight for their situation
Primary Metric
Increase in flights booked
Supporting Metric
Increase in intent to book
HMW prevent our travelers to not get any suitable flight options
Primary Metric
Increase in flights booked
Supporting Metric
Decrease in over filtering
HMW help travelers on native apps and mobile web discover filtering options
Primary Metric
Increase in flights booked
Supporting Metric
Increase in filter usage
How
Competitor analysis
To better understand the industry standards and what our travelers are used to seeing when booking a flight (or other travel product), I performed a competitor analysis.
I looked at what filtering options are even out there and where we have room for improvement, compared to competitors. And next to that I also looked at what kind of pattern is even used for each of the filtering options, to gather some inspiration.
How
Explorations
Firstly I started sketching out different filters on paper to decide the main functionality and interactions; then, I started exploring in Figma by creating visual artefacts. After I created the first design proposal, I presented it in the UX weekly review to gather others' feedback.
Interaction design exploration Flight Times filter
Before
Hard to use and very fiddly
Can cause very limited choice by over filtering
Hard to understand what this filter does at first
Option 01
More human times
Fewer choices for users
No space for more times in the horizontal timeline
Harder to scale
Missing some times
Option 02
Radio selection is hard to click on mobile devices, illustration and bag overview is a pattern we don't use anywhere.
Option 03
Radio buttons felt like a good option for mobile and desktop devices. Still included and not included as separate sections.
How
Implementation
After going through the exploratory process for every filter, I've created the final designs. The changes included improvements to existing filters, the introduction of 5 new filters and changes to an entry point for filtering on the flight's native apps platform.
As there are lots of changes, I've worked together with engineers to split this into 2 phases - first doing changes only to existing filters and second introducing new filters. This was also reflected in the handover documentation.
Besides the implementation documentation, I've to lead also the creation of an experimentation strategy where I worked closely with product managers and data scientists to create an experiment setup.
How
Entry point changes
Hard to find the entry point
Not clear what filtering options exist without clicking on it
Once open, a lot of decisions for a user to take
How
Working with Design System and Vertical teams
I worked very closely with the design systems and app core teams to create a proposal on how other products could move to this pattern in the future if it turns out to have a positive impact.
When working on a proposal I also paired with designers working on other products, like hotels or car rental, and worked with them to create an unified proposal for how vision of filtering could look like.
As flights is a lot smaller in terms of traffic than our hotel's product, we were perfect test bunny to try something like this and gather valuable learning.
Outcomes
↑
Flight bookings
HMW help travelers find the best flight for their situation
↓
Empty searches
HMW prevent our travelers to
not get any suitable flight options
↑
Filter usage
HMW help travelers on native apps and mobile web discover filtering options
My impact
Improved search and filtering experience for users, by increasing flights booked and increasing intention to book.
Better user experience when filtering with counts and active disabling of filters, that prevents user to over-filter and get No results available screen.
Created a strong foundation for filters upon which smaller experiments can be run.
Lead collaboration with Design Systems, App Core (team owning shell for our app) and Team working on filters on Attractions, Cars and Stays to propose new filtering bar, that enables progressive filtering.
Working closely with engineers throughout whole process gave wide sense of ownership to whole team and enabled easier transition into development phase.
Detailed documentation made my transition to new team easier, as this project can continue by other designer.