A couple of years ago I made my first airplane travel alone as an adult and I saw the ugly and user-unfriendly truth. When I was a kid, the whole flying experience was absolutely awesome. That was because I didn't have to deal with buying tickets, checking whether my flight had been cancelled or delayed and all the nitty-gritty aspects of airplane travelling we've all come to know.
I think the success of middleman platforms like Expedia, Priceline and Kayak does not rely solely on their ability to compare prices and find discounts. Their whole user interface is way smoother and easier to use than most airline companies' web browsing experience. That gives these middlemen a huge commercial advantage.
As a designer and a hard customer, I felt motivated to analyse the ticket purchasing flow from the website of the brazilian airline GOL, point some misdirected functionalities and propose some ideas on how to improve them. I chose them specifically because they were the first company in Brazil to implement a full online check-in experience and to adapt the site for blind and/or deaf people.
The majority of internet traffic is now mobile — 63% to be precise, as Stone Temple indicates in their research — and I believe native app usage is counter-intuitive for the non-frequent fliers, who shouldn't have to download and install an entire app just to use it a couple times a year. To invest time and money in an awesome native app experience is good to keep faithful customers happy, but your first point of contact with new users is most commonly your website. I advise to consider those cases with care when building the product strategy and choosing channels of interaction. Having that in mind, I will focus this article on GOL's mobile website experience for this analysis.
(Also, mobile web usage increased 6% over a year in the US, which reinforces the importance of studying mobile responsiveness.)
Real quick storytelling to contextualise my approach: The user I'm impersonating is an adult non-frequent flier who wants to travel with a friend from Recife (Brazil) to New York (USA), arrive there on Monday early in the morning, stay for the week and leave on Sunday at the end of the day.
1. Home Page
Current Design Analysis
This page is very straightforward on giving the users all the flows they need to follow to resolve issues, using consistent iconography and font. The major problem here is that crunching all of these options along with the ticket purchasing - the most important user flow - just mixes it up with secondary flows like customer support and flight anticipation. That really reduces the commercial appeal.
The page itself is very different from the original desktop layout seen above, which is way better designed and I will use as the main reference to all the redesign proposals.
Another big issue here is the date picker, that put two Fridays on the UI (I know that's Rebecca Black's wildest dream, but what about Sunday travelers, folks?). I assume that's a bug that nobody caught during development, but I've spent more than a month writing this article and the error hasn't been fixed on the course of this time. Other than that, we have some strange line breaking on the radio buttons and the action button to proceed to flight selection is unnecessarily dislocated down the screen.
That said, I got some inspirations from Kayak and GOL's desktop page to develop a different version:
My take here is that we should bring the purchase options directly to the Home screen, rearrange some elements so we get as much vertical space as possible and apply some imagery, so the page looks more appealing.
I indicate the use of clean modals that open fullscreen for the date pickers, quantity of travelers and airport selection. That increases not only the usability of those modals, but the accessibility for people with any motor skill level. The best examples I can think of are Airbnb's ones, but you can find that in other scenarios like e-commerces and social networks (Amazon, Facebook, etc.)
2. Flight Listing
Current Design Analysis
This is where the real action resides in any airline company interface. This screen has a lot of relevant information about the flight such as seat tiers (plus, economy, first class, etc.), date of departure and arrival, the flight identifier number, number of connections and pricing.
The interface uses a lot of different colors, gradients, buttons styles, font sizes and font weights. As I've learned from Brad Frost's article on "Interface Inventories", when we're dealing with lots of information the more concise the style guide we use, the better the readability and the understanding of the content hierarchy. The first thing I did was compile all these fonts, buttons and colors just as Frost did and reduce them to a minimum.
My suggestion here is the following:
3. Checkout
Current Design Analysis
As I've seen many times in interfaces from courier deliveries, banks and traditional services in general, the checkout form is where things get nasty. A giant amount of bad formatted fields, typing errors, confirmations, information being asked twice or even thrice along the form, lack of text masks to prevent the user from typing in the wrong format, etc.
Unfortunately, GOL's checkout is no exception to this. Just to register, I had to go through several pages and repeat a lot of personal data. These are the bigger issues I've noticed:
A lot of wrongly translated content
Even with USA selected as the region/language, titles are in portuguese, dates are in brazilian format (DD-MM-YYYY), etc.
Fields only use half the screen size
When the user types bigger names, it's impossible to read. Also, the page's margins change randomly according to the element, which confuses the filling order.
Lack of contextual adaptation
As I 've said, I selected USA as the region/language, so the form should assume that I'm not brazilian and instead of asking for a CPF number (Brazil's social security equivalent), it should hide this section and go directly to foreigner document selection (Passport, etc.).
Continuous long scrolling
For mobile form filling, I would recommend a pagination plus a progress indicator instead of a long vertical scrolling. That's because when the keyboard is open, the users only have half the screen available for content, which causes them to scroll a lot more and struggle with the keyboard opening and closing to finish up the form.
That's it for this review! Just for closures, I personally vouch for GOL as a very reputable airline and their flight service is very good. But, it's common knowledge that we live in a world where getting a cab is just a tap away and shopping for groceries just requires 1 click (or maybe none at all). GOL and other airlines should invest more in their web mobile user experience, because there is a vast space for improvement and innovation.
These and other changes would not just make their websites prettier, as some may think, but can positively influence in their sales and marketing metrics and drastically reduce the need for customer support lines.
I've been working with offline-to-online services for the most part of my career and I believe that kind of investment in design is always necessary to create competitive advantage. We apply this kind of thinking to all our client's projects here at Vinta, because we believe UX studies aligned with clear product strategy are crucial to the development of great web applications.
Oh, and my utmost gratitude to the collaborators on the UX Collective initiative. Their rich and thoroughly curated content gave me good guidance on my work here. Also, thanks to my fellow colleagues Aline Silveira, Felipe Farias, Mateus Bolsoni and Vinicius Santana for reviewing this post ;)
