Improving your airline website’s user experience with better design

September 20, 2019

The latest Global Passenger Survey from the International Air Transport Association (IATA) has revealed that the process of booking a flight is still a major pain point.

An interrupted booking flow, clunky website or poor navigation can lead to some serious dissatisfaction. And, with Online Travel Agents (OTAs) still securing a huge proportion of consumer flight bookings, online booking is something airlines must pour resources into to get right.

But it comes down to a lot more than just a nice-looking site to improve the passenger experience. With increasingly strict regulations around accessibility, multiple-device navigation during the booking process and high customer expectations, it takes a knowledgeable team to build a website that meets these demands.

Proctors has 15 years of experience working with clients in the aviation industry, producing stellar websites that generate increased loyalty, repeat purchases and higher engagement, including:

  • 47% increase in year-on-year sales
  • 11.5% increase in passenger spend per head
  • An increase from a 3-star to 4-star Skytrax rating

We thought we’d share a few of the ways you can upgrade the design of your airline’s website for a better user experience (UX) – and how every change you make leads more passengers to get booking.

User research and profiling

No matter your goal, at P+S we start with research: on your market, your competitors, your current – and desired – customers, and relevant digital trends. We can work with your key stakeholders and your internal teams at this stage too. Collaboration is one of the most important elements of getting a project off the ground quickly, and heading in the right direction for an outcome that suits everyone.

Depending on what yours and your stakeholders’ goals are, the depth of research we’ll perform in certain areas will differ – and so will our methodology. So it’s important for us to work closely with your teams.

It’s wise to have a wireframe

After completing research we start the web design process. And that means creating a wireframe for each page we’re working on.

A wireframe might look like just an outline of your web page’s intended structure, but it’s the most critical part of the web design process. It’s also the quickest and easiest way of developing a page’s format before there are any distractions, like design or aesthetics.

Not only is adapting a wireframe quicker than designing (and redesigning) a fully-concepted webpage, it provides an opportunity to explore user experience and functionality. It’s also the first chance to visualise the customer journey and booking flow.

The website’s intended structure is something different, it’s IA. We’re talking specifically about pages here.

Along with applying insights from your research during this stage, user testing should form a key part of the process – something we’re fanatical about at P+S as part of our commitment to measurable success.

The (design) journey is as important as the destination

The method used to design a website impacts its maintenance further down the line.

It’s why Proctors use a process called Atomic Design. It means every element on your site is part of a pattern library which can be uniformly updated, upgraded and implemented in the future.

Let’s look at an example. In a couple of years’ time there’s an update to your brand guidelines. A change in brand colours now needs to be reflected in every button across your entire site – potentially hundreds of pages. Currently, this is a time-intensive process which involves visiting each individual site element to update it. It’s labour intensive and it’s easy for changes to be missed. The result is wasted cost, inconsistent branding, and an inconsistent experience for your website visitors.

However, with Atomic Design, having a pattern library means every affected element on your website can be updated with just a few clicks – in one go. It’s a no-brainer for saving resources. You can check out how we put this into motion for SAUDIA, here.

And the benefits aren’t just for potential future big changes. If your airline has brand variations – sub-brands for business class, first class, or a ‘no frills economy’ offering – your web editors can use your existing brand pattern library to create a new library of elements. No full redesign, no complete overhauls – just duplicating and adapting what’s already there.

Even your marketing team can benefit from Atomic Design. If your airline is implementing a new flight path next month and the team are keen to do some A/B testing with your customer base, right now, it’s yet again another laborious process to build new page templates and implement them. But, with a pattern library of template variations, this becomes a case of ‘click and go’.

A website that’s fast, functional and scalable – what airline doesn’t want that?

Putting everything in motion

Adding motion design to your website elements isn’t just an aesthetic ‘nice to have’: it’s a powerful storytelling tool that enhances UX.

Some motion design is subtle, like a graphic cue which lets visitors know they’ve successfully added a flight to their checkout cart. Others encourage an action: when a user hesitates over an icon, for example, a simple animation can nudge that hover into a click.

There’s an impact on emotion, too. Animations can help to reinforce your brand’s identity, giving your site a little personality. And something as simple as holding your passenger’s attention with an animation while their next page is loading can help to create the illusion of speed. More speed = more patience = more likelihood that the consumer sticks with you and makes a purchase.

Turn a ‘grudge’ purchase into a ‘nudge’ success

Speaking of emotion, research has found time and time again that people’s reasoning is highly dependent on emotions. Essentially, we’re all susceptible to bias.

Your website is full of opportunities to use design to create attractive brand stories, and in turn, to shape your visitors’ attitudes towards your organisation. An example of this could be around those ‘grudge’ purchases, like insurance, select seating or additional baggage. The way you communicate these additional services to your website visitors has a huge impact on their uptake – from the visual look, to whether they’re an opt-out or opt-in selection, to their order of appearance on the page. Even the micro-copy on your buttons can affect whether your customer is likely to add that extra.

It sounds simple, but sometimes it’s these tiny details which drive your customers’ behaviour and make the biggest impact. And in an increasingly competitive landscape, we at P+S believe in taking advantage of every single opportunity we can to keep your audience engaged, and persuade them to buy from you.

Don’t settle

When working with Proctors, you’re working with a multi-skilled team of strategists, creative directors, designers, web builders, testers and copywriters. You get the same attention to detail on your motion design and your micro-copy as you do the structure of your booking flow.

Pull this together with our combined years of experience working with aviation market giants like Amadeus and SAUDIA, and this depth of service makes Proctors the perfect airline partner.

Why not ask us to review your website with you? Get in touch at airlines@proctors.co.uk – or find out more about the services we offer to airlines across the world here.