What can Skyscanner offer more?

Tina El Chaer
4 min readDec 16, 2019

--

A UX/UI Challenge: Adding a feature

The Brand

In September 2019, Skyscanner launched their new design for all of their products. The engineering team followed Backpack — Skyscanner’s design system that they describe as the codification of Skyscanner’s design language. The team has worked for a year on redesigning the logo, typeface, illustration style and colour scheme.

Personally, I am very fond of this new design; it is simple, clear and attractive. The new components in the new colour palettes, gave a new life to this brand.

The Challenge

With my training in the UX/UI Bootcamp at Ironhack Amsterdam, I had a challenge to design a new feature to an existing application. I chose to work with Skyscanner since I am a frequent user and I had a personal frustration that I wanted to solve.

Frustration

My friends and I all live in different European cities and we always struggle to find a destination for a short get-together. The issue is that we can’t find a convenient place based on our different locations whether due to proximity or finance.

Most of the travel apps or websites offer the chance to create a trip and share with friends but it is required to know the travel destination which can be, in some cases, not suitable for all the traveling individuals.

To better categorize and define my friends’ and my personal needs, I developed the Jobs to Be Done Statement.

JtBD

The main job to be done is to book a holiday trip with friends who are based in different locations.

An important functional aspect is to find an affordable and equidistant destination for all travelers.

A related emotional/personal job is the ability to spend an average equal amount of time and money for a mutually wanted trip.

A related emotional/social job is to enhance friendship bonds through reunions.

The Feature

What I developed is “Reunions”. Just like having a tab to create your own trip on Skyscanner, you can now have an option to create your own Reunion. By creating one, the user is directed to a page to input the details such as Reunion name, the intended date of travel, budget per passenger and number of passengers. Since each passenger departs from a different city, the user then has the opportunity to input each departure location for each passenger within the passenger details section.

Flow: Creating a Reunion

After providing all the information, the user can now share the Reunion with his/her friends. At this point, Skyscanner’s AI would be working on identifying locations that are equidistant from all passengers and that have equal cost on all based on the inputed data.

The locations may not end up to be top destinations to visit but why not try new attractions and promote tourism in unexplored areas?!

The user created and shared the reunion with his/her friends. They can now all access the reunions page on their Skyscanner profile on their devices. The next step is for the travelers to vote for the most preferred destinations that have been defined by Skyscanner’s AI.

Flow: Voting on Destination

Once everyone has voted, the winner destination is revealed and the travel deals are generated. A travel deal is the specific itinerary for each passenger based on his/her details; it provides the passenger with the most convenient flight options according to his/her budget and departure location.

The Process

I would say it was fun and challenging to work on this new feature. I started by deconstructing the Skyscanner interface to understand the existing grid and components of the product. I tried to match, as much as I could, the interfaces I designed with the style and guidelines of the brand. Having Backpack — Skyscanner’s design was helpful to stay in line with the design system in terms of color palette, text styles and buttons.

Hopefully, in the near future this would be available for friends to reunite in new and exciting places !

For the full design please check my website here.

--

--

Tina El Chaer

UX/UI Designer with a background in Landscape Architecture and Urban Design.