Flight Booking UX Battle – Cebu Pacific vs Philippine Airlines vs Air Asia

In this post I will dissect my recent experience trying (and sometimes failing) to book flights on Cebu Pacific, Philippine Airlines and Air Asia.

Even though I missed the place, I didn’t have any immediate plans to go to Hong Kong again since I was last there two years ago. But when I saw the lineup of speakers at Rise Conference 2016, I knew I had to go. Having booked the conference ticket, my next step was to book the flights.

First Attempt: Cebu Pacific

Now in the past I’ve always used Cebu Pacific to travel to other Asian countries, so I loaded up the Cebu Pac site to book my and my companion’s tickets. After painstakingly entering my name, my companion’s name, and both our passport numbers, I encountered this mysterious error.

Screen Shot 04-05-16 at 10.59 PM

Great. No explanation. Just try again. Okay, let’s do that.

re-enter

Unfortunately for me, Cebu Pacific didn’t remember my session details and I had to enter those details again. It was all the more infuriating because I had to enter the same name on the Contact Information into the Guest section. I understand that buying tickets for someone else is a legitimate use case, but the page should have provided an option to either copy the information from the Contact section to one of the Guest information sections or a tick box that allowed me, the user, to not have to enter it again. This is a very common design pattern (think Billing Information and Shipping Information forms in most properly designed e-commerce flows).

After choosing meal options, insurance, and reserving the seats, I was about ready to pay when another error appeared.

Screen Shot 04-05-16 at 10.52 PM
I hadn’t even chosen a payment method yet and yet the website was telling me that I needed to re-enter all of the details that I had already typed. Haven’t they heard of session variables?

Okay, fine, maybe I should have registered as a user first so that the system can remember my details. I tried to see how to create an account.

getgo

Wait, to remember my information just so I didn’t have to re-enter them again because of their errors, I needed to pay? Sure, it was a small amount, but this is ridiculous. I didn’t want to go through that again, so I contacted Cebu Pac customer service using their online form. While they did reply several minutes after I submitted the form, they said in the reply that they would get back to me in seven days. Not content to wait this long I tried looking for alternatives.

Second Attempt: Philippine Airlines

After the Cebu Pacific disaster, the next thing that came to my mind was Philippine Airlines. It was my country’s flag carrier and I had some miles in my Mabuhay Miles account. It started out well enough. Top-aligned field labels, grid structure, clear hierarchy, readable type size.

Screen Shot 04-06-16 at 12.03 AM

But then it got ugly fast. The whole experience felt like filling up a government form. Yuck. The hierarchy of information wasn’t clear, the site didn’t bother to use my local currency setting, the font sizes were too small and the whole layout was just dominated by large blocks of text. A few forms into the process, it became quite clear that the actual booking site, not the fake facade I was shown earlier, was well past its prime and that not much thought was put into the experience of booking. Despite those flaws, I decided to forge ahead.

Screen Shot 04-06-16 at 12.09 AM 001

While the PAL booking site was terrible overall, the worst part of the whole experience was the seat reservation system. After the initial basic information, I arrived at this seat reservation disclaimer. Other carriers probably carry similar disclaimers, but the impression I got was that PAL did not have any sort of seat reservation. That probably wasn’t their intention, but a result of bad marketing copy.

Screen Shot 04-06-16 at 12.15 AM

When it came time to choose the actual seats, I was shown this screen.

Screen Shot 04-06-16 at 12.14 AM 001
Okay, I thought, I should probably click the “View” link. Nothing happened. While I was able to go back to the previous screen without having to type everything again, I still could not make the seat reservation. It was time to move on.

Air Asia

Next, I looked at Air Asia. I didn’t think of them at first because I didn’t remember them having flights from Manila to Hong Kong. But with Cebu Pacific and Philippine Airlines out, I was left with no other option if I wanted to save money.

Not only was the site error free, it was a joy to use. The appropriate use of colors and images directed the eye to the intended emphasis (in the example below, the main packages). I have some reservations about the design below since the button is black while the header image of each package is colorful but not clickable, but I didn’t encounter any problems with this part.

packages

After choosing the package and dates, the Air Asia site asked me to sign in to speed up my booking. I didn’t have an account yet but I was pleased by this development because it told me that the site was looking out for my session welfare.

Screen Shot 2016-04-16 at 9.49.57 AM

I went ahead and created an account in another tab (not sure if they considered this as part of their user story but it worked well). After signing in and checking my details, I was taken to the Add-ons page.

Screen Shot 04-10-16 at 08.11 PM

I appreciated that all the add-on options were available all on one-page — meaning that I could go back and forth without reloading the page. In the past, we might have needed to limit the content on a page to keep page loading speeds high. With improving bandwidth, this is becoming less of a necessity which means we can really make a site content rich, at least on a desktop site.

Initially, I experienced some confusion with the MNL – HKG and HKG – MNL tabs because it wasn’t immediately clear to me that they corresponded to my departure and return trips.

Screen Shot 04-10-16 at 08.23 PM

The seat selection was also part of the Add-ons selection and was the most usable of the three sites I used. Hovering on a seat showed a preview of the seat, which I found to be a delightful touch. The whole design was quite visual and a joy to use.

Conclusion

Among the three airlines, Air Asia was the clear winner when it came to the task of booking a flight on a desktop web browser. I say this not just because it was error free and functional, but also because it was clear how much care they put into designing a good screen flow with minimal need for duplicate input, rich interactivity, and good supplementary imagery.

While around USD 400 wasn’t that much, with over 7000 visits a month for Cebu Pacific and over 17000 visits for Philippine Airlines, that’s a lot of potential losses for people who choose competitors because of bad design. I don’t have enough data to say what percentage of those visitors end up giving up and choosing a different airline because of the booking website. As a thought experiment, if 10% of the PAL visitors gave up and chose competitors, with an average booking amount of USD 100, that’s already USD 170,000 of lost opportunity every month. Surely there is a case for investing in UX!