Behind of the scenes look at the design of visualizing flight data for Escape
In the last year, we spent months on visualizing flights.
How did we start?
We started with a simple question: which city is the cheapest.
But through user interviews, instead of cheapest, in fact, we are more concerned about affordability, and whether this place is worth my money.
For instance, from Singapore to Kuala Lumpur, I only want to pay up to 80 Singapore dollars (normally less than S$80), but I am willing to pay S$350 to Bali (normally less than S$170). Because I have always wanted to go to the beach in Bali, but I have little interest in Kuala Lumpur.
As we can see, behind that simple question, there’s a bunch of customized price-comparing questions.
One thing we were pretty sure in the beginning is to plot the prices on the map. It’s not only because this is a travel product, but also because of a design decision in terms of data visualization.
Data visualization for global flights
Nowadays, we are used to reviewing items in a list view. We constantly scroll the list to gain more information, because the items that can be displayed on one screen are limited. In this traditional way of reading, we receive information in a predetermined order, from left to right and top to bottom.
However, map visualization is another way to organize information. We simultaneously perceive simple visual symbols in one space and grasp general information more effectively.
In Escape, we chose the color-coded circle to present the flight price for the city. It’s a linear scale from green to red. Green represents the cheapest, red represents the most expensive. We assume, in the context of most cultures, green indicates ‘affordable’ and ‘safe to go’, while red implies ‘alert’ or ‘beyond the budget’.
But why not size? Why we didn’t use circle radius to represent price? Because our perception of size is against our attention to price. While expecting to focus on cheaper cities, nevertheless we naturally pay more attention to the bigger circle and are used to assuming that bigger circle represents a larger number.
Another reason is more practical.
The circle can’t be too big because it would cover up everything; It can’t be too small either, because it’d be hardly aware of.
However, the global price range could be S$70 to S$9800. In this case, the difference in size is much less noticeable than color.
Beyond the color: symbolizing stops
After deciding to use color as the most important visual element, I tried to incorporate the information of the stops.
I used the solid circle to represent the non-stop, and a circle with an extra outline to indicate 1 or more than 1 stop.
This symbol code is visually subtle. Because this information is far less important than price.
When filtering the cities by direct flight only, there is no difference among those circles, as only one symbol to represent. And if we only care about the cheapest tickets, it’s just better to know this information before we’re really interested in a city.
Beyond the visualization: animated connections
Once we are interested in a city, we might start asking stops. If we have been told that outbound is 1 stop and return is 2 stops, we would be curious about where the connections are.
We used arcs and pop-ups to indicate connections. However, the stop information is not only spatial but also temporal. Like the subway, the stops are in order.
In order to show the order, I used animation where the pop-ups will jump in a given sequence.
Of course, there’re many other ways to represent. Given the low importance of this information, I chose a form that is not used by other visual elements — animation, to minimize interference with others.
Data visualization of tickets
After visualizing flights on the map, we visualize the tickets.
I mainly focus on the comparison of the duration, takeoff and landing time information between tickets.
In order to compare these tickets easier, I list the outbound tickets vertically on the left and return on the right. Because we usually compare one way then the other, and unlikely compare both ways at the same time.
I used a time bar to indicate the journey process of every single ticket. The length of the bar represents the duration. The scale of length is based on all the tickets showing on the current page.
The colorful bar (price color) represent the time on the flight, while the grey bar means transfer time.
This helps us to have a sense of how long we have to spend on the plane or an airport if we take this ticket.
Interested?
Check out Escape website right now.
