Redesigning a search summary
component for Skyscanner

Designing for a 40 million monthly user base is a large responsibility. While working at Skyscanner, I was tasked to redesign and code a search summary UI component for their official site. Developed solution has been successfully integrated and available online at www.skyscanner.net

Skyscanner UI assets

"Preparation phase for UI component redesign"

The challenge

Skyscanner is a global flight search engine attracting over 40 million visitors every month. The product is available in more than 30 languages and it is known for taking a rapid lead in the industry.

When I joined the company in February 2015, the team has been redesigning user interface and I was briefed on a search summary component. For that, I had a sole responsibility to deliver solution while considering what redesigned component has to achieve:

  1. Mobile first approach.
  2. Include multi-city scenarios (up to 6 flights).
  3. Follow the new brand guidelines.
  4. Achieve consistency across all Skyscanner services (hotels, car hire).
  5. Consider localisation. Solution has to work in different languages.

Designing for the worst case scenario

The plan was to design a prototype for a mobile view, with a maximum number of flights (6 with multi-city option enabled) and do it for a large group. Also, to make sure that chosen airports have long names and 'Premium Economy' option is selected.

Coming up with a solution for the most complex scenario first should take care of the simpler ones, as it is easier to scale down the elements than force the new ones.

Worst case scenario

"Available options in the booking process"

After spending a little time sketching UI, I was able to move on and design a high fidelity prototypes in Sketch and presented them internally. The idea of sharing GUI at the early stages has its own benefits, as it is much easier to communicate concepts and get a better feedback in a large organisation.

Examples below explore different approaches to solve the problem. I selected different elements and scenarios, while focusing on the new multi-city option.

Old search summary component

"Old search summary component"

Redesign - version 1

"Redesign - version 1"

Redesign - version 2

"Redesign - version 2"

Redesign - version 3

"Redesign - version 3"

Redesign - version 4

"Redesign - version 4"

Selected

"Selected design"

Redesign - version 6

"Redesign - version 6"

Save space and ease the attention

Displaying every option back to the user can be harmful due to unneccessary cognitive load and directed attention from the booking.

Selected design has a lighter impact and gives wider view for flight information. Multi-city option with 6 flights selected can be displayed with the first and the last airports and supplemented with a total number of flights. Airport names can be listed as airport codes to save space in a mobile view.

Condensing the elements for mobile users was a mandatory task to accomplish, but it was also important to improve experience on a devices with wider screens.

Solution 1
Solution 2
Solution 3
Solution 4
Solution 5
Solution 6
Solution 7
Solution 8
Full solution on a Macbook

Delivery

I have coded the component in HTML5, CSS3 and jQuery and then tested it internally to approve responsive behavior. Solution has been successfully integrated across Skyscanner network shortly after the completion.

The company continues to improve experience for its users. Lately, the search summary component has been improved by introducing a new feature, where user is able to switch between months and look for better deals.

The breakpoints have been simplified to suit the solution too, but the developed foundation remains the same.