It’s useful to keep an eye on the checkouts of high volume traffic sites as typically they receive a lot of CRO attention and are in a state of constant refinement, providing useful insight. Travel is a vertical where frequent change is evident and airlines have a key challenge in translating a relatively data intensive process (for non-registered flyers anyway) into a high quality UX that is optimised across devices.
For this blog I’ve been doing a high-level review of the online checkout experience to identify potential barriers to purchase and have focused on four airline companies:
I hope you find this a useful insight.
Navigation through checkout steps
There are two common navigation errors that I’ve seen increase exit rates and kill conversion rates:
- Moving backwards and forwards providing an inconsistent experience
- Browser back/forward buttons breaking checkout forms
The image below shows what happened in the Ryanair checkout when I tried to navigate back from ‘Flights’ to the flight selection form – a really poor UX. However, this doesn’t always happen; I tried the process 5 times and got this error twice.
Step 1 – Select flight options
Step 2 – use browser back button to change flight selection
On one occasion, I was presented with a generic browser error message:
The only way I was able to proceed through the checkout again without any issues was to clear all my cookies and browsing data for the domain.
I tried to access the mobile site but was left with a hanging loading page. I checked if this was a connection issue my end but the other mobile sites loaded correctly, indicating Ryanair was having mobile performance problems. I tried on three consecutive days with no success.
I had a lot of issues trying the mobile checkout for Easyjet and Virgin Atlantic as well. I thought perhaps I had a local phone issue, so checked other retail checkouts and had no problems getting to the order confirmation. It seems I’ve tested mobile airline checkouts on bad technology days but it’s not inspiring me with confidence. Unfortunately BMI isn’t mobile optimised, so trying to book a flight on a mobile device is a no-go. Hopefully they’re primed to launch a mobile friendly site very soon, otherwise the poor UX and conflict with Google’s mobile update (and Bing’s impending move) will impact them commercially.
While it may only have been necessary to cater for desktop users 5 to 10 years ago, the rapid growth of mobile and tablet device usage means that retailers need to optimise for users of all devices. Google’s recent algorithm change means that websites will need to optimise for mobile devices in order to achieve the best mobile search rankings.
From this point on my review focuses on the desktop checkouts, for obvious reasons!
Persistent basket summary
Airlines used to be criticised heavily for hidden charges in the checkout and a lack of transparency on cost. However, I think online order summaries are much improved and provide users with a clear visual cost confirmation.
Easyjet is a good example. The summary includes the following useful information:
- Destination airport
- Currency (can be changed)
- Outbound and inbound flight details
- Cost of each flight
- Extras added
- Final price (showing different costs for each card payment type)
It’s interesting that only Ryanair and Virgin pin the persistent summary so that it follows you down the screen as you scroll. It may seem a minor point but I’ve worked with retail clients who have AB tested this and seen click through improvements as a result. Why force users to scroll to the top of the page to continue the checkout?
BMI adds a nice touch, splitting out the actual flight cost from the airport taxes. This is important, as there has often been a lack of clarity about how much of the total cost is allocated to taxes.
Although Virgin has a clean enclosed checkout, the order summary is disjointed; the flight details are clear at the top but the cost is buried at the bottom in the billing section, which is below the ‘continue to payment’ button and could be missed. It would be useful for customers to have the cost info alongside the flight summary for easy reference.
In general, the more steps and greater complexity of options within a checkout, the greater the likelihood of exit (backed up by data from most retailers I’ve worked with). The travel sector is highly competitive with lots of brands selling direct as well as specialist online aggregators and marketplaces like Lastminute.com and Trivago.
It’s imperative to provide a well-structured checkout that is easy to use and quick to complete; a poor UX will drive people to competitors. It’s one of the reasons my default choice for flight booking online is British Airways (though the recent intrusion of a survey lightbox when I’ve only just entered my flights details isn’t well thought through).
All of the airlines use good practice techniques like enclosed checkouts and customised progress bars, although some are clearer than others. For example, the BMI breadcrumb is quite subtle and easily missed as the tool tip text dominates.
The flight selector is also intuitive and visually clean. You just need to select the date and then the available flights appear below with associated costs. A simple badge is used for the lowest fare.
This is contrast to the Virgin selector that provides a lot of information but made it hard to pick out the most relevant flight option. It wasn’t until I had moved to the next step that I realised I was flying in and out of different airports, though the website does inform you of this via a pop-up.
Ryanair has a really poor UX on its Services step, where you have to explicitly state you don’t want travel insurance to continue without paying. However, finding that option is tricky; you’re asked ‘please select “Don’t insure me” in the drop-down box’ and the drop down box is a list of countries where ‘don’t insure me’ is buried in the alphabetical order section below Denmark. For me this is really poor and comes across as a deliberate attempt to make it hard not to pay for insurance.
Form structure and validation
Completing web forms can be a source of frustration for online shoppers and it’s important that forms are optimised to avoid any problems customers may have in completing the checkout.
In addition, common customer questions and issues should be anticipated and text should be used to explain how to complete certain fields, or why some information is needed. It’s good practice to use the minimum number of fields possible to speed up the process for customers.
Not all of the checkouts I reviewed indicate which fields are mandatory or use any tool tips or text next to any form fields.
In the Virgin checkout, I was able to enter invalid details in all the payment fields with no error being flagged until I submitted the form. The website didn’t even notice that I’d entered an invalid format for the security code (5 letters). It’s imperative that checkout forms make life as easy as possible for users and flagging errors as they happen; using front-end validation is proven to increase form completion accuracy.
Reassurance is an important psychological technique to help tackle potential conversion barriers. Retailers like AO.com do this well using social proof, providing validation of their quality and popularity by surfacing customer reviews and Facebook likes. British Airways has a nice trick when a page is loading, displaying an interstitial message that explains part of its core value message and helps differentiate against budget carriers:
Trust is an important issue for conversion and airlines historically had a bad rep for throwing hidden charges onto customers. BMI Regional displays a prominent ‘Bags fly free’ banner.
Virgin also lets unregistered visitors know that they can earn airmiles and loyalty points if they sign up, which can be done after the booking id made to avoid disrupting the checkout.
It’s interesting to see that all the checkouts ask users to select the card type they want to pay from. However, it’s possible to automate this based on the number the user enters in the field, removing one step in the payment form. This can then default the field forms based on the card type. The jQuery Credit Card Validator is one option.
Virgin does support PayPal, which is convenient for users who don’t want to enter billing details and instead just log in to their PayPal account.
I find it odd that neither Easyjet, Ryanair nor BMI use an address lookup and validation tool to help users quickly add addresses, whereas Virgin does. Especially in the UK, there is an expectation that the site will look up your address and automatically fill out the form fields for you. Every client I’ve worked for that has used an address validation tool has seen improvements in address accuracy and form completion.
Many retailers are implementing predictive address search to improve form usability and help increase checkout conversion. These tools mean less work for the user and fewer errors when inputting addresses. When providing address lookup and validation, it’s important to also provide a manual address entry option as a fallback. You can also enable/disable automation based on the country of the user to customize the experience for local markets.
Capture+ from PCA Predict is a market leading international predictive address search solution. ThinkGeek is a good example of a Capture+ implementation for a US website and you’ll notice that the ZIP code includes the new ZIP+4 detail. Capture+ increased RPV (revenue per visitor) by roughly 1-1.3%.
Don’t throw me out!
A big annoyance during this review was the number of times my sessions timed out on the websites and I had to restart the checkout process. Ryanair did this and didn’t store my previously entered information, which is a hugely inconvenient. It’s not inconceivable that someone could be looking for flights and then be inactive for a period of time before coming back to complete the checkout e.g. checking the details with a friend/partner before committing to payment. Forcing them to remember all the options they’ve chosen and re-enter all this information is not a positive UX.
I saw the message below and when I clicked on ‘OK’ it redirected me to the homepage.
I appreciate that flight availability changes quickly but why can’t the airlines simply display a message after X minutes of inactivity such as “Availability may have changed as you’ve been inactive for X minutes. Hit ‘refresh’ and we’ll check the flights again for you or search for something else” and then the action buttons resubmits the current flight query with the previously submitted data stored for that session, or return you to a blank search form. I don’t want to have to fill out every single data field again if I don’t need to.
Virgin Atlantic handles this the best with a simple alert message and providing a flight search screen with your previous flight details pre-entered:
Comments and questions
I know that airline checkouts are relatively complex; there’s a lot of data to collect and flight availability is a moving feast, far more so than most retail checkouts. However, the quality of UX varies significantly between airlines and there are examples on each site of user journey glitches that could be avoided with simple testing.
Which airlines do you rate for the quality of user experience across devices?