REDESIGNING FILTER
Search hundreds of travel sites at once
FareFirst is a metasearch engine based in India. By filtering relevant deals, its technology-driven approach finds the best deals globally and intelligently picks the best ones for users
Contribution
-
Heuristic evaluation,
-
Competitive analysis,
-
Primary & secondary analysis
-
Wireframes, UI Design & Prototyping
-
Usability Testing
Duration
4 Weeks
Target audience
Frequent traveler's between the ages 18 and 50 years old
Problem
67%
The dropout rates are very high at the search results page
The most important section is the search where the user finds the right flight for them. The dropout rates are very high here. One of the reasons stated for this is the filters which are very complex and confusing. The filter has not been updated since the app was first launched and the theme does not match the app's design system.
Homepage
Search results
Ticket details
Source: Google analytics
Redesigning filter
I adopted design thinking approach for the problem
Define
Ideate
Prototype
Evaluate
Conducted an unmoderated usability study with 5 participants and recorded the observations and calculated the System usability scale score Developed insights from these observations.
Insights​
-
All the slider touch points are small and difficult to slide.
​
-
The clear all and results button doesn't feel like a CTA and when clearing the data it is taking the user back to search results which is annoying.
​
-
There is no consistency throughout the application
​
-
Some of the terms are not very common to the user so they found it difficult to understand those terms​
​
-
Applying the filters and getting 0 results is annoying for the users.
​
Fig 03: Usability testing
System usability scale
SUS Score: 65
Scores below 68 point to issues with the design that need to be researched and resolved. So the SUS score of the filter according to the usability testing is 65 which is less than the average value 68 which points to the need of rethinking about the filter design.
Fig 04: SUS Acceptability Score
Heuristic evaluation
Conducted a heuristic evaluation in order to identify the pain points
Visibility of system status
The design should keep users informed about what is going on through timely feedback. But when changing the time in the slider, the chips in the bottom is not automatically changing to morning day or evening
Match between system and the real world
The design should speak the user's language. The terms outbound and alliance are not commonly used terms. so users find it difficult to understand these terms
User control and freedom
Users just have a global clear button at the bottom, and they are not able to clear separate sections. clear all is also an indication that a filter is applied
Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. here airlines and alliance are feeling like the same words
Flexibility and efficiency of use
The slider approach will be difficult in certain cases like choosing time. for everything slider approach cant be used
Recognition rather than recall
Aesthetic and minimalist design
Minimize the user's memory load
by making elements, actions, and
options visible. Here the applied filters are not shown to the user or not indicated even if the filter is applied inside the accordion
Interfaces should not contain information that is irrelevant. Select all is an irrelevant information if only one option is there. it might confuse the user
Recognise, diagnose, and recover from errors
Help and documentation
The indication that there are 0 results for the filters applied are not very catchy so it may not be easily recognizable by the user
It may be necessary to provide documentation to help users complete their tasks. so here some terms are very confusing so it should clearly state what they mean and what happens when the user clicks them.
Fig 02: Farefirst app Screens
Pain points
1
Grouping
All filters are scattered which creates confusion and Long scrolling
2
2
User control
Users just have a global clear button and they are not able to clear separate sections.
3
Results
After applying the filters the number of results are shown as 0
4
Consistency
There is no consistency or visual heirarchy in the design which is confusing
Competitive analysis
I analyzed the products of competitors who offer similar products which gave me a well-rounded foundation about the market the product will enter. View competitive analysis
Skyscanner
Momondo
.png)
Kiwi.com
.png){kind=small}
Ixigo
Google flights
Kayak
Insights
-
The filter that is given the most priority among all the competitors is the no of stops.​
​
-
The applied filters should be indicated, selected sections should be highlighted.
​
-
Clear all should not only be a common element but should be accommodated in grouped filter sections
​
-
The interaction of each filter type could be identified from the competitors
-
Price- slider
-
time- slider
-
No of stops- Check box
-
Layover duration- slider
-
Airline- check box
-
Refundable tickets- switch
-
No of bags- Number
-
Layover airport- check box
-
Booking site- check box
-
Payment method- check box
-
Currency- check box
-
Carbon emission- switch
-
Aircraft model- radio button
-
Alliance- Check box
​
-
Basic filters on the main page and clicking them takes the user to the advanced filters page, which helps in giving the user a better idea of what are the different filters, but that makes the page a bit cramped with many contents
​​
Fig 05: Competitor logos
Survey
Created a survey to understand which are the options that are most important to a user when booking a flight ticket in order to list down the most and least important features
.png)
Fig 06: Bar diagram
Insights
From the insight from the survey identified the frequently and rarely used options and that helped in identifying the importance of each option
Fig 07: Table
After careful consideration alliance and payment methods were removed because none of the users were using alliance and we did not have enough data to provide payment options because payment happens on the companies page and not in the farefirst app so gathering that data would be difficult so removed these from the existing filters and decided not to add any new features like carbon emission, or aircraft model that are seen in the competitors due to the lack of data available, also the more choice options there are, the more time it takes for a person to select one which would increase the time in choosing filters and buying the ticket.
Goal statement
My goal is to simplify the user flow and increase the conversion rate. The effectiveness can be measured by the number of ticket purchase ,user reviews and key performance indicators
Wireframes
One way
Round trip
Fig 10: Wireframes
1
The filters were just listed instead of grouping them which creates the feeling of infinite scrolling.
so grouped filters for ease of use. grouped time and duration together.
2
The accordion for layover was later brainstormed and removed because the layover contains airport and duration which can be categorized into time and duration and airports group. so adding a new accordion is more complicated.
3
Designed it as tabs, but the approach will only work for two-way tickets and not for multi-city since it can have up to 8 trips which are difficult to achieve in tab format.
Divided the trip into different sections which is scalable and works even for 8 trips and filters are grouped inside each trip
4
In no of stops four options any, direct, 1 stop and 2 stop+ were changed to 3 options any, direct, and up to 1 stop.
Direct and up to one stop is the most critical selection which is always chosen by users so all options above 1 stop are categorized into any.
Fig 11: Digital Wireframes
One way
.jpg)
Fig 08: Sitemap_ One way
Round trip & multicity
.jpg)
Fig 09: Sitemap_ Round trip & Multi city
Basic structure of the app
Removed
Changes made
One way
.jpg){kind=small}
The filters CTA is chosen from the results page and navigating the user to the filters page
Pain point 1: Grouping
Time and duration are in accordion which contain travel duration, travel time and layover duration
Pain point 3: 0 Results
The apply button is placed at the bottom for more visibility and is the main CTA Button. it shows the results also so that the user is clear about the outcome and not getting frustrated getting 0 results
Pain point 2: User control
Provided global clear button and separate clear button for sections so that user gets the freedom to clear a single section at a time. Clear all is also an indication that the filter is applied
Round trip or Multicity
In round trip and multi-city users have an option to plan their trip within multiple cities so the filters are categorised based on each trip. Price range and stops are common filters and travel duration, travel time and layover duration are specific to each trip
Advanced filters include airline, airport and booking site which navigates users to different pages when clicked one each due to the long list of selections available in each of the options, if taken to a single page that would create long scrolling that would be difficult for the user
Search option is added so that user can easily search without the need of scrolling and choosing the options
Design elements and important features
Stops
Radio buttons, Direct and up to one stop are the options
Travel duration
Travel duration min time is set considering the min time the flight takes and not 0.
Price
Price is designed as a slider because elements that need not be very accurate a slider is the best approach.
Travel time
Travel time is divided into four times a day as chips rather than sliders for easy decision making and in the slider approach, it is only possible to choose one range. here multiple selection is possible
Layover duration
In Layover duration, a range is fixed at min and max duration.
Night stopover is a switch button.
​
Travel
In travel, it is clearly indicated what happens when the user clicks each trip.
The 3 states of choosing a filter can be seen here
Empty state
when clicking
Filter applied
Fig 12: UI Designs
Conducted an unmoderated usability study with 5 participants and recorded the observations and calculated the System usability scale score.
Thoughts from the users
"I like the look of the filter, it is much clear"
The visual clues are better.
"The filters are made so simple, easy to use and I could also see if my filters are applied or not"
"The grouping is good. Airline, Airport and Booking sites are nicely placed in the advanced filters"
" The search bar in the airport is good so I can easily search without scrolling multiple times"
System usability scale
SUS Score: 85
Scores above 80 show that the design is good. So the SUS score of the filter according to the usability testing after the redesign is 85 which is a good improvement from the existing filter and the filter has become more simpler and usable now.
Fig 13 : SUS Acceptability Score
Learnings
-
It is possible to increase the conversion even with the simple act of adding filters. By fixing issues with filters powerful results can be achieved. Filters may seem like a small and insignificant part of a product. But in reality, it’s the filters that provide a seamless experience to the user
​
-
Critical realization is that even though the primary purpose of the filter is to reduce the number of results and help choose the perfect one, the filter in each use case has to be approached very differently. just to call out in the case of an e-commerce website where the filter is very dynamic, attribute that user wants to filter, when it comes to travel, replication is not possible.
