Design an engaging booking journey

Design brief


Airasia wants to redesign their booking journey for travellers on their website. Their aim is to make it highly usable, engaging and easy to maneuver by:

  • Organizing and categorizing information in a structured manner
  • Applying hierarchy to content
  • Creating a navigation paradigm that will be intuitive to use
  • Making content contextual, engaging and exciting

The task is to design a responsive solution for mobile and desktop that will allow customers to quickly navigate and find the information that they require to perform a flight booking (eg. travel dates, prices, etc.)

Audience

Travellers who are interested in looking for a budget flight for a short weekend getaway.


Problem/pain points


This case study is aimed to the specific target audience given in the design breif. Most budget travellers will always look for the cheapest option first and flight booking websites might be too complicated for users to handle. This problem may lead to questions over the phone for the flight company’s customer service and oftentimes, users will just opt for going to the physical ticketing office instead.

These budget travellers more often than not already know where to fly to even before they check flights on a booking website. Either they already visited an aggregator website and found the cheapest airfare or through the company’s marketing efforts, price really is their deciding factor. Users spend a lot of time searching for the cheapest options and they should be able to identify the company’s brand and skip the process of comparing.

Customers who book flights online mostly prefer them to be done on their desktop mostly because of the expected amount of data displayed is better viewed on a bigger screen. Booking flights on a mobile view of the responsive website is often times difficult to navigate. This is a missed opportunity since more and more people are using mobile phones to connect to the web.

Security for purchases and essentially just how to pay for services or products online are one of the worries and problem of users—not only in this industry but in almost all online businesses. There are still people who are “unbanked” who want to experience booking flights but are unable to once they see the credit card option.


Research


The rising middle-class population and changing consumer spending are key contributors to the growing air travel market. The Asia-Pacific region is seeing dramatic growth driven by economic development and more airports being built1.

Social media plays a very role in the global rise of air travel. Millenials travel more often now because of trends in social media and spending thru travelling experiences.

Design Process


Competitor research

A competitive research/analysis is one way to ideate about products/services in the marketplace. Doing this highlights each strengths and weaknesses of their service/product. This will give us insights in making more informed decisions about your product strategy.

Most airline websites start off their booking journey by making the user fill up the “From” and “To” / Departure and Arrival fields. Depending perhaps on their business requirements that either there will be a “Hero” banner having promotions that the user can easily click on to “book” or simply having a visual element/background to display the customer the feeling/experience of flying in their airline.

The main booking interface also includes other booking options besides Flight (Hotel, Car rentals).

From searching to checking out to pay, most sites have a standard number of steps (5-6 for guest/non-guest users). Some sites ensures the user of important notes by having a “modal” window displaying the important message before continuing their booking journey.

Regarding the experience in desktop and mobile, most desktop sites are responsive to view in mobile but most are expected to have limited features/information omitted in its mobile view because of screen space limitations.

image
Challenge

After doing some competitor research, the Air Asia website already have the essential flight booking elements that may already work for them. Applying some of the user feedback gathered, the booking journey should help users book and find their cheapest fares faster. Designing a new approach and execution but still keep the relevant tools for its guest or registered users.

(By the time I am doing this case study, their website is currently updating and probably doing split testing)


Solution

Looking back at the given brief, one solution of making it highly user friendly and engaging is to have a more trendy user interface on the desktop landing page, a leaner layout for mobile that is arranged in proper heirarchy of components form the most relevant to the least relevant.

Current website is already attempting to highlight logging in and becoming a member to get more discounts on prices. This should be noticeable but not too obtrusive.

Policies and important messaging should be clearly displayed for travellers booking international flights since each country may have specific requirements to different nationalities.

Filtering/search results to sort on the cheapest price first rather than the time on the selected day schedule.

Checkout gateway to focus on secure transactions and present other payment options for first time travellers doing their first attempts of booking online/people without credit cards.

All these mentioned solutions are in part touches on the pain points of the user personas developed as well.


DoGo Mapping (Flight booking journey)

“Do”-“Go” mapping provides perspective on the overall system combined with the functionality of each page. It blends the overall view of a site map with the detail of a flowchart in order to visualize how a system fits together. Since the current website already has its IA built, this map will only focus on the flight booking aspect and attempt to see if the solutions above will need other map “nodes” to be created.

Wireframes/Sketches

Sketching out ideas to see how to integrate the formulated solutions into the current flight booking journey. Did some hand drawn wire frame sketches and rendered to digital layouts using Sketch App for desktop and mobile screen sizes.

Did a quick usability test to a few random people (friends and only on mobile view) if the layout work and tweaked/iterated based on their comments and suggestions.

Some desktop elements may be hidden on the mobile view to maximize screen real estate but still have all the essentials of the flight booking site features.

After doing all the competitor research, I opted to have the elements of the landing search page aligned in the center, to give the user more focus on finding which flight to go to rather than focus on the bigger promo images and background. Basing from surveys, the numbers are leaning towards users already knowing where to go instead of just looking around. Users expect to check the lowest price after they selected their desired destinations.

sketches

Quick wireframe sketch layout ideation

do-go-mapping
UI trend research/moodboard

Created a quick moodboard to experiment the website’s brand style as well as plan visual hierarchy of a project. In this case, I will be limited to the already existing brand colours but used a minimal style in choosing simple font styles, creating borders and shadows of shape elements. I also referenced colours from their current mobile app.

moodboard

Moodboard trend research

Prototyping/Usalibilty testing

I opted to create hight fidelity screens for better user usability testing. Colour affects user behaviour, as well as creating animations that makes the eye follow certain actions. Created a simple prototype of the steps from searching a destination until the payment step.

hifi-prototype
High-fidelity screens
hifi-prototype hifi-prototype
Invision prototype links:

Desktop | Mobile

Let's Chat

I like to work on interesting projects with great people. Let's connect.