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
Primary & secondary analysis
Wireframes, UI Design & Prototyping
Frequent traveler's between the ages 18 and 50 years old
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.
Source: Google analytics
Conducted an unmoderated usability study with 5 participants and recorded the observations and calculated the System usability scale score Developed insights from these observations.
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
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
All filters are scattered which creates confusion and Long scrolling
Users just have a global clear button and they are not able to clear separate sections.
After applying the filters the number of results are shown as 0
There is no consistency or visual heirarchy in the design which is confusing
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
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
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
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
Fig 06: Bar diagram
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.
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
Fig 10: Wireframes
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.
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.
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
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
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
Radio buttons, Direct and up to one stop are the options
Travel duration min time is set considering the min time the flight takes and not 0.
Price is designed as a slider because elements that need not be very accurate a slider is the best approach.
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
In Layover duration, a range is fixed at min and max duration.
Night stopover is a switch button.
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
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
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.