Ivan Vasilev

Competitive benchmark

To pick 4 top of the line airline websites/ mobile apps and benchmark them is an easy task to do 🇧🇬

Objectives

  • Learn how best-in-class websites and apps solve the problem we are trying to solve
  • Understand the conventions we should follow
  • Highlight best practice that we should emulate

Positives in my opinion are marked in green and drawbacks are red!

1. Lufthansa

Landing page

Lufthansa - landing page
Lufthansa – landing page

Wysiwyg – what you see is what you get. This is the first impression I get when I open the home page of the largest airline in terms of passengers carried in Europe.

  • Well working keyboard navigation,
  • good color contrast and
  • consistent labelling combined with icons are the three positive aspects from usability stand point at a first glance.
Important info

When we look closer we see this 76px tall white line that contains that contains important info and can not be closed in any way. This can be important for some of the customers but not for all of them, so at least allow them somehow to close it.

Header

The logo of the airline is what we get first on the page. Then the login + register link:

Login/Register overlay

Close link followed by X sign doubles the functionality to close the overlay by clicking outside of it. Keyboard navigation works as it should be. By pressing TAB and the arrows keys the user can go easily to each and every important part of the form/registration link. The two most common type of users using Lufthansa’s website are those with Lufthansa ID and those that have Miles & More cards. They can login with both the e-mail and the Miles & More number.

Miles & More login overlay

The thing that I find not so well made is the fact that when the user switch between tabs Lufthansa ID and Miles & More the Info text on the right doesn’t change at all. On Miles & More tab we have some additional way of login namely Username or Miles & More + Password or PIN but no specifics about the type of the current login. For experienced users this may seem as a no problem but for beginners in my opinion is not OK.

Some other issue is that the register link is on the same visual level as forgotten password link. Semantically the register link should be a button, because we clicked Login or register link so it should be a button like Login does.

Main menu

The main menu on the page is well organised and prioritised. It represents the traveler at every moment of the trip arranged chronologically. First the booking, then the preparing for the trip, the actual trip and at the end the future interaction with Lufthansa. This all typical user journey map scenario. Nothing special, nothing new. They also use here the location of the user asked in previous step, so they can determine the country of the user.

Searching block

This is the actual searching block, where we type origin and destination. First the user has three options to choose from: Flights, Rental car, Hotels. This makes the user subconsciously think that Lufthansa will provide for her entire-trip experience – from the flight to the stay and the transfer – which is a good thing no matter if she will book only flight or not. Most probably the hotel and the car won’t be provided by Lufthansa but by their partners. This doesn’t matter, main thing is that the user feels confident that on this page she will find all she need for the trip – the systems are connected – so she will get the best value for the money.

The user is also presented with a section which shows previous searches. When clicked it immediately initiates search. This is useful for frequent traveler and it is a good feature, which adds value to the product.

Expanded search block

Then we get the usual form – origin and destination. The geo location is also something common nowadays. If the user clicks on From or on To field and starts typing she gets an expanded view of the search panel.

Switch direction functionality

One pain point of the directions switch is that when the user navigates with the keyboard and didn’t choose the destination and presses the switch the system shows an error. And even the user selects a destination the error stays. Posible solution is to move the switch (in the code, not in the UI) after the input for selection of destination.

Selection

After the selection of the destination is made the user is automatically presented with some results for the preselected period (in this case it is one week – 7 days – starting from tomorrow 21st October – today is 20th October)

Calendar

By entering the calendar the user can navigate with TAB and arrows for changing the months, then with TAB, shift + TAB and the arrows for selecting first the outbound date then the inbound date. By selecting the second date the overlay with the calendar disappear. As a result the user has selected dates. It is not posible that the dates are picked manually with the keyboard.

At this stage of analysis I also determine that the search panel of the landing page doesn’t work at all without JavaScript.

Link to another page

This link leads to internal info page and if you try to go back all your input is lost. This is not the right place for the link. It may be put somewhere in the help section but not in the form where you are selecting dates and destinations.

After minimum information for initiating a search is provided by the user she has two options to go for:

  • To press the call to action button
  • is presented with a summary of prices grouped by month and year.

In both cases the user lands on some really old page. At least the keyboard navigation works well. Some of the labeling relies on tooltips, colors and shapes. The meaning of them is at the bottom of the page which is not good practice.

After selection of price we get more details and three different types of Economy tariffs:

Lufthansa – selection of the outbound flight

Surprise, surprise! Time is ticking and we are rushed to book the ticket, otherwise we may miss the only one seat left with this cheep price.

Boom! And when I select this price where I was initially thought that it is for round trip by this row

It suddenly appears that I have to select the return flight and pay additionally at least 125 Euros for going back.

Checkout process

After selecting the flights third visual representation and IS appears. Now enhanced with Shopping cart and a progress tracker. Not to mention the Rental car banner with totally awkward and placement.

Seat selection

For the first two legs the seat reservation is not available, but nobody explains the user why.

Too much text and fields that nobody reads and understands. And this is not all. The user must fulfill the payment info too, but this is not big of an issue because you can store all the required information in the user profile and reuse it.

[printfriendly]

Conclusion:

Using Lufthansa’s online desktop booking tool I found some pain points:

  1. Showing not needed information at particular point
  2. Not showing needed information
  3. Three different layouts and Informational structures
  4. Misleading labels and absence of such

The positive thoughts are:

  1. Almost great keyboard navigation throw whole process
  2. Leading and self-explanatory interface at first part of the process – start search.
Category: Usability testing, User research

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. Affinity diagram | Ivan Vasilev (reply): […] materials to colleague of mine. While benchmarking the competition I compared four travel websites here. Afterwards I conducted both qualitative and quantitative (Lufthansa and WizzAir websites) […]