Skyscanner
Helping people discover

2018

UX Case Study

View full case on Muz.li

How can Skyscanner help its visitors to get inspired when planning their next trip? The search engine’s mission is to not just enable people to book their trips, but also to inspire them through clever search options.

Imagine you have a long weekend and decide to make a short trip within set dates. Searching with ‘Everywhere’ as your destination, you are able to discover and compare destinations and base your decision on whichever criteria are most important to you.

But what if the opposite is true — you know your destination, but not your dates? Which option would be the most suitable for you? Answering this poses a couple of problems for the user. There is no option to search within a date range, neither is there a way to define the length of your stay.

This case tries to solve that problem by proposing a new way of searching: one where the traveller finds the best options within a customised date range and trip length.

Problem definition: there’s currently no easy solution offered for scenario 3.

In order to do that, the user needs to be able to perform a set of tasks, such as adding one or more origins and/or destinations, specifying their trip duration, as well as the range for departure and return they want to search within. 

User flow — outlining only a single flow (what happens if a user chooses option 1).

1. General homepage improvements

Starting from the Skyscanner landing page, I’ve made a few overall improvements that help the user focus and avoid distraction.

Grouping — All alternative searches, such as searching with the map or looking for hotels or cars, have been placed in the upper navigation menu. By increasing the color contrast between active and inactive, these different options become more clear.

Imagery & colours — Imagery is an important element that helps people to get inspired. However, when people have their mind set on searching for a flight, images should not compete with the search functionality to get the user’s attention. That’s why in the suggested solution, image usage is restricted to the space below the search area.

Discovering — To help people refine their search for the perfect destination, a few holiday categories have been added, such as ‘Sun & beach’ and ‘City trips’. These can be refined according to further research.

Current

New

2. Search area

Clustering — to help guide the user through the search process, a clear distinction has been made between primary input and secondary options. Trip type, passenger numbers, cabin class and ‘direct flights only’ have been clustered together above the main search area.

Below that, highlighting the active field will catch the users’ attention and encourage them to start. The entire search bar is reduced from five to three fields, in order to streamline the flow and make it feel less overwhelming. The departure and return date inputs have been reduced to a single field.

Current

New

3. Search flow

Components — Clicking on each of the fields triggers a corresponding component. When that happens, a light overlay will cover the background in order to focus the user’s attention. Options corresponding to that field (such as “include nearby airport”) have been included in the component rather than on the page itself, in an attempt to minimise clutter.

Flexible dates — the key interaction in solving the user problem is the new option to select flexible dates. This is solved in the following way:

• Additional to ‘specific dates’ and ‘whole month’ a third option is added: ‘flexible dates’.

• When selecting this option, the user is prompted to specify their trip duration. This can be set to ‘any’, or a specific number of days.

• Finally, the user selects the range within which they want to search and clicks ‘apply’.

Note that while a user interacts with the component, any given input is immediately updated in the ‘dates’ input field.

Search flow components

4. Results page

When the user finally clicks the search button, a selection of most suitable options is displayed.

No redirection — in the new flow, users are not being redirected to a new page where results are loaded. Instead, the search area is reduced in height, as results are loaded below. This also leaves the chance for users to ‘go back’ and change any of their search criteria, without leaving the page.

Flight information — the displayed flight information is similar to when a user searches for specific dates. The only variable that now needs to be prominently present, is the flight date itself.

Additional filters — these have been collapsed in an attempt to avoid clutter. Further research needs to show the possible up- and downsides of hiding these filters.

Current

New

Final thoughts

Due to time constraints, the pain points that were highlighted are based on my personal experience with Skyscanner and the assumption that this is a wider problem. Further research needs to show whether it actually is a common struggle among users. And of course, additional testing needs to be conducted in order to refine and validate the solution.

Looking into many different flight search engines — Google flights, Hipmunk, Kayak, etc. — some of these attempt to make the ‘flexible dates’ case easier. However, there is not a single smooth solution yet. Possibly, technical constraints of search algorithms might have a part in this and need to be taken into consideration, too.