I designed a map-based flight search website that empowers Qantas travellers to browse flights based on their budget and desired travel times. The primary goal of this product is to show Frequent Flyers where they can go with their points.
Let’s say that you’re a Qantas Frequent Flyer and you’ve saved up a whole heap of points (lucky you). How can you see where these points could take you? I guess you could do a bunch of separate flight searches to specific destinations and browse through the list of flight prices, but that’s a pretty arduous task. The inability to easily see where your Frequent Flyer points can take you was a common problem amongst Qantas travellers. This problem provided a significant opportunity for us to help travellers while in turn increasing flight bookings for the business.
It was already pretty clear from customer feedback that there was a need for Frequent Flyers to be able to see where their points could take them and that the current tools on offer weren’t ideal. The tricky part was to figure out the specifics of what they needed.
We didn’t have much time, so we immediately started talking to Qantas travellers at the airport to get a better idea of how they currently made their travel plans and spent their points. What apps and websites did they use? How long did they travel for? When did they travel and how did they decide on the destination? We talked to both Frequent Flyers and casual travellers and sent out a survey to the Frequent Flyer community to get some additional data to play with. I also conducted a bunch of desktop research and found several large studies (some charts and statistics featured above) that really helped shed some light on how travellers planned their trips online.
I like to use Trello (screenshot of my board above) to organise my research as it makes it easy to share and collaborate with other team members. The discovery phase really helped us define the needs of Frequent Flyers. We also discovered that casual travellers would love to be able to browse destinations within their budget and time frame.
I think it always helps to look at competitors and learn from their mistakes. There were a bunch of existing flight search products out there that I had a play with to get some initial ideas. Some of them were based on a map search with various filtering options which we thought made sense. We put some of these products in front of Qantas travellers to get their thoughts and feedback and to help validate our assumption that a map search approach could be a viable option for us. It goes to show that you don’t even need to create your own prototype to start getting useful feedback from customers.
Now armed with useful insights into travellers needs and behaviours, I sketched out some initial ideas for what this product might look like. I knew that it primarily needed to cater for Frequent Flyers looking to use their points. The secondary users were casual travellers looking to plan a trip within a budget and time frame. Most travellers had an idea of how long they wanted to travel for and needed to quickly compare destinations that met their search criteria. I sketched the interface components on paper, cut them out and stuck them onto a larger sheet of paper with Blu-Tack (as seen above). This allowed me to quickly chop and change UI components and also aided team discussions and stakeholder meetings.
Once we were happy with the basic concept, I moved into Sketch App to add some fidelity to the design so that I could create a clickable prototype. I built a quick prototype in HTML (screenshot seen above), which gave me the flexibility I needed to create the required layout. We tested out the prototype in the Qantas lounge on multiple occasions, iterating on the designs based on feedback from each session. The concept had four main parts: a map of destinations, a list of destinations, a way to filter these destinations and a bar chart to compare flight prices for a destination over time.
With the basic concept validated, it was time to make sure that we could actually build this thing. Qantas customers can use cash, points or both to purchase flights. The fare breakdown is quite complex and includes taxes in some cases, so it was quite tricky to display the cost of flights on the various parts of the product. We also had to cater to different currencies which made the filter and bar chart especially difficult to design in a way that was easy for customers to understand. I mocked up concepts for all of the different states of the flight fares on the map, list and bar chart (seen above) and shared them with the development team. It’s important to get your developers across things as early as possible to ensure that the design is technically feasible in the given time frame.
These days, I’m finding that more and more people (including designers) are trivialising the importance of visual design. I hear statements like; “just make it look pretty” and “colour in the wireframes” all the time and I think they demonstrate an ignorance towards what visual design actually is. Sure, some elements of visual design are purely decorative, but if a design is done well, every visual detail will have a logical reason behind it that improves the usability of the product. Many of the products we use nowadays are basically a bunch of pixels that we see and interact with on a screen, so the visuals make up a large part of the product. I’ve seen many examples of how purely visual design changes to a product can dramatically improve its usability and desirability.
I tried to keep the design of this flight search tool as simple as I could, but it was difficult as it’s quite a complex product. The home screen can be seen below where travelers are able to browse a map of flight destinations worldwide.
In addition to being able to filter flights based on their budget, travelers can also apply advanced filters as seen below. This allows them to choose their preferred travel class, define when they want to travel and also set the duration of their trip.
Once a destination has been selected, travelers can compare flight prices for their trip on different departure dates using the bar chart below. Once they’ve decided on their departure date, they can book their flights and start getting excited about their trip.
