Introduction

As a fresh graduate trained in designing tangible objects, I’m excited to translate the skills I’ve learnt into the digital space. I gave myself a challenge to redesign an app along the design thinking process within 20 pomodoros (slightly over 8 working hours).

My friend recently shared with me a design exercise given to interview candidates at a reputable startup. Here it is:

Design how someone chooses the best dates for a trip.

Being an avid traveller with a tally of 18 countries, and recently finding myself booking countless of vacations (it’s grad trip season), I found that flights have always been the key determinant of travel dates because of its volatile pricing, which can have a large impact on the budget.

Searching cheap flights

A known way to find the cheapest fares is to use flight aggregators. They work by searching hundreds of booking engines, airline sites, and travel agencies, and present the results all in one page. The app of choice that 60 million people (including me) use is Skyscanner, because it consistently finds the cheapest prices with an easy to use interface.

The discovery

I interviewed 5 Skyscanner users and observed as they walked through their usual flight booking experience, with extra emphasis on understanding how they ultimately settle on travel dates.

One particular pain point stood out above all else — users search multiple times to hunt for the cheapest combination of travel dates.

Infinite loop of toggling between dates

Travelers are frustrated that this search process has to be repeated for each additional day they are flexible to fly, and become impatient when each search can take up to 20 seconds.

Additionally, users need to make mental notes and calculations of the many searched dates and prices. For some users, they transcribe and compile those figures on notebooks or Excel sheets for easier comparison.

This problem is critical to solve because finding the cheapest fares, even across dates is essential to a successful Skyscanner experience.

Travelers expected Skyscanner to not only compare the cheapest flights, but also the cheapest date combinations.

Current Alternatives

Skyscanner aims to help users select dates through these three existing interfaces.

L: Coloured Dots | M: Chart | R: Anytime Search

• Coloured Dots correspond to a price range but is not detailed enough to compare prices between days. The dots also lack visual significance (probably to avoid a cluttered interface).
• Chart represents prices with bars across 2 weeks. However, users still have to toggle between different date combinations as they are more concerned with the total price than relative height of bars.
• Anytime Search automatically suggests the cheapest date combinations within the next 3 months. However, those that know their estimated travel dates hardly use this feature.

With all three interfaces, users are wary about the cheapest fares suggested because it often comes with undesirable timing (early morning or late night) or lengthy layovers.

Users

Another thing I found out is that travelers fall somewhere along the following spectrum:

• Fixed travelers are on a tight schedule as they have a strict itinerary to stick to. They just want to get over the booking process, thus prioritise a fast and straightforward experience. Example: Business travelers.
• Flexible travelers want to go on a trip but are unsure of where or when to go. They want a booking process that helps them to discover the best deals. Example: Wanderlusters.

Skyscanner caters to Fixed travelers with a seamless booking experience and to Flexible travelers with Chart and Anytime Search.

However, the pain point of toggling between dates still happens today because of an in-between category of users — the semi-flexible travelers.

These are the people who have a general idea of their travel dates and duration, but are flexible a few days before or after. It is this group of travelers that are toggling between date combinations.

Persona of a semi-flexible traveler

Deeper insights

I interviewed more semi-flexible travelers to uncover what their concept of a perfect search is and how today’s experience pales in comparison.

L: Multiple screenshots sent to friends | R: Flight details transcribed to a notepad

• It is hard to compare prices between dates when flight details are all over. To regather potential flights in one spot, users spam screenshots to friends on messaging apps, or copy and paste individual flight details to a notepad. Users expect flight details to be compiled in one place so it is easy to make decisions.
• As noted before, users are suspicious of cheapest fares because it often comes with undesirable timing or lengthy layovers. Different travelers have different constraints (dates, duration, comfort level) and expect to be able to tailor a flight that works for them.
• Users are anxious if they had picked the best dates within their time or budget constraints. Users don’t just want to be shown the best choice, but they also want to understand why and how a choice is better than the rest.

Choosing the best dates can be a stressful situation, especially if choosing for others as well. Emotions are tense because any cost savings or loss is multiplied by the number of people involved and these bookings are often non-refundable and non-changeable.

Picking the most optimal flight days come with huge monetary savings, especially for short-notice journeys as there is much more variance in price between days. A poor booking experience causes mistakes, but a great booking experience brings cost savings and peace of mind.

How might we help semi-flexible travelers choose the best combination of dates that fits their constraints?

Introducing Table

A new experience for travelers to not only compare the best flights, but also the best date combination all in one table. It is designed for travelers with semi-flexible trip dates by a few days before or after and was born out of the understanding that each traveler has their own budget, time and comfort constraints. Use Table to find the best travel dates.

Upon entering Table, the user is presented with a grid of departure dates, return dates, and their corresponding total prices with the cheapest dates highlighted in green.

Upon clicking a Table cell, additional flight details like layover and departure timing is presented. The user can easily compare prices and flight information across dates.

Optionally, users can tailor their flight with Skyscanner’s powerful filtering options and remove deal-breakers.

Design process

Based on the insights gathered, the key design explorations are:

1. How might we compare flights easily?
2. How might we tailor flights to fit each individual’s constraints?
3. How might we include this feature into existing Skyscanner app?

With each iteration, I conducted user testing with 3–5 semi-flexible travelers.

1: How might we compare flights easily?

Sketches of ways to compare flights with clarity

This table format offered the clearest comparison of total price among different date combinations. Moreover, seasoned travelers are accustomed to this interface as some airline websites (FinnAir) already utilise the same format.

However, there are some concerns that will form the basis for further exploration.

1a: How much detail to display?

A key challenge was finding ways of representing the huge amounts of data in a clear manner that would not overwhelm users. Starting with just the essential information, the priority of data which users needed to know at this point is: Axis Meaning > Date > Total price > Relative price.

Explorations of ways to represent data clearly and clutter-free

I managed to minimise cognitive overload and reduce visual clutter by chunking information into equal spaces, relying on visual cues from spreadsheet software (Keynote and Excel) and creating visual hierarchy through typography.

1b: How can we navigate beyond?

I initially explored scrolling along the two axis with arrow buttons and sliders. After testing with users, I found out that users already assumed that they could navigate by scrolling the dates, rendering those visual cues unnecessary.

Improving reachability when navigating the table

It was then I realised that the scrolling area (highlighted orange) was a stretch for the thumb, especially for right handed users on larger phones. I increased reachability by expanding the scrolling area (highlighted green) to also allow users to scroll anywhere on the table.

Explorations of navigating the table

I encountered two distinct paths that caused lots of internal debate. The design on the left could hint and guide users to dates beyond the table, while the design on the right could only compare the dates within the table.

When faced with this difficult design decision, I looked back at the main goal, which is to design for semi-flexible travelers to narrow down their choices and ultimately choose the best combination of dates within their time constraints, and not to encourage further exploration of more dates. Hence, the design on the right was chosen.

It was also at this juncture that I realised how easy it is to lose track of the trip duration when scrolling between dates, thus requiring the display of number of trip days to serve as a landmark for scrolling.

2: How might we tailor flights to fit each individual’s constraints?

Cost may not always be the definitive factor in choosing dates. Different travelers have different constraints (dates, duration, comfort level) and expect to be able to tailor a flight that works for them. But before users can know what to filter for, they need to know more information about the flights.

Based on research, the 2 deal breakers for cheap flights are 1) lengthy layovers and 2) bad timing. Starting with just these two information, I needed to strike a balance between level of detail, limited screen real estate and clarity.

Iterations of ways to show more flight info

The solution was to hide the flight information underneath the price tile, which is easily accessed and toggled with a tap. To tailor the perfect flight, I relied on Skyscanner’s existing powerful filtering capabilities.

3a: How might we include this feature into existing Skyscanner app?

The most straightforward solution is to include Table as an opt-in feature, which can be accessed among Calendar and Chart as that is where users are selecting dates.

3b: How might users understand the value of Table?

Julie Zhuo wrote about how common it is to design how a new feature will work, but the hard part is to design the beginning of how people will discover that feature for the first time.

The easy way to introduce Table is to launch a pop-up announcement or educate during onboarding tutorial. However, it is hard for users to understand the value of Table those times. Taking the easy way out also risks causing confusion among other types of Skyscanner users (fixed travelers and flexible travelers).

Instead, a more meaningful introduction is to target semi-flexible travelers when they are toggling between dates on the results page. It is much easier for them to understand the value proposition of Table when they are experiencing the pain point.

Takeaways

After 5 years of experience in Industrial Design, I want to transition into the digital world. I figured that the best way for me to learn is to just throw myself with both feet into a project.

Some powerful things I learnt:

1. Designing software can be similar as designing hardware. Delivering a great experience is still the end goal and users remain at the core of the process, but the tools and materials are different. At the end of the day, design is applying the right technology to solve problems.
2. Don’t try to boil the ocean. I wanted to revolutionise everything and it costed me more than 20 pomodoros. In the words of Basecamp: Never change deadlines, but change the scope. Given more time, I would explore motion design and dig deeper into the psychology of how to inspire confidence when making a choice.
3. The more I learn, the more I realise that there’s so much more to learn. Product design moves at lightning speed of technology and covers a wide scope from applying research methods to employing data analytics to keeping up with design trends. Learning never stops.

Thank you Alvin Juano, John Teo, Sheng Juen, Jia Qi, Ying Ling & Hsiao Fong for this wouldn’t happen without you guys ❤

Feel free to drop some feedback below. I’m always open to meeting passionate and curious creatives, please get in touch with me at [email protected].

I’m currently seeking for a great company
in Singapore to join as a product designer.

Portfolio | Say oi!