top of page


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


  • Heuristic evaluation,

  • Competitive analysis,

  • Primary & secondary analysis

  • Wireframes, UI Design & Prototyping

  • Usability Testing  


4 Weeks

Target audience

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.



Search results

Ticket details

Source: Google analytics

Redesigning filter

I adopted design thinking approach for the problem






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

Screenshot 2022-09-11 at 2.39.20 PM.png
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



All filters are scattered which creates confusion and Long scrolling



User control

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

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





1200x630wa (1).png

unnamed (1).png



Google flights




  • 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


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

Frame 8359 (1).png

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.

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


One way 

Round trip


Fig 10: Wireframes

one way option 9.jpg
one way option 8.jpg


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.
one way option 10.jpg
advanced filters.jpg


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.
Multi city option 2.jpg
Frame 117.jpg


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 
multi city.jpg


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
Sitemap Template (10).jpg

Fig 08: Sitemap_ One way

Round trip & multicity
Sitemap Template (9).jpg

Fig 09: Sitemap_ Round trip & Multi city

Basic structure of the app
Changes made
Frame 8410.jpg
The colors in the filters are brand colors. Removed the green colour from the brand since the colour is of lower contrast which is not accessible.
Frame 8414.jpg
Frame 88.jpg
Frame 8313.jpg
Frame 143.jpg
Frame 8441.jpg
Frame 8440.jpg

Visual design

Frame 8373.png
Final design

One way

one way ui expanded.jpg
image 2 (Traced).jpg

The filters CTA is chosen from the results page and navigating the user to the filters page

Pain point 1: Grouping

image 2 (Traced).jpg
image 2 (Traced).jpg

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 

4one way ui minimised.jpg

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 

MULTICITY ui expanded.jpg
advanced filters.jpg
image 2 (Traced).jpg
Roundtrip ui minimised.png
image 2 (Traced).jpg

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

image 2 (Traced).jpg

Design elements and important features

Frame 8374.jpg


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 is designed as a slider because elements that need not be very accurate a slider is the best approach. 

Frame 164.jpg

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.



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

Frame 0151.png

Empty state

Frame 165.png

when clicking

Frame 166.png

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

Screenshot 2022-09-11 at 2.39.20 PM.png
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.

bottom of page