Martin Crowley
UX designer

The
story of
Simplifly

Rethinking airline website design by researching
how users search for, book and pay for flights.

Project Context

I was challenged to design a flight booking process that allows users to search for and book flights with ease. This project was completed as part of a Professional Diploma in UX Design, working 10 hours a week for a 6 month period. The primary final deliverable was a greyscale wireframe of sufficient fidelity to be handed off to a UI Designer.

My role in this project was that of the sole UX Designer so I found it really helpful to recruit a fresh set of eyes once in a while, particularly when assimilating data.

The Problem

Booking flights is one of the most complex tasks you can do online. As a result, drop out at various stages along the booking process can be high, causing billions in lost revenue. A large portion of the airline website journey is concerned with browsing. With this in mind, how might we minimise dropout and increase conversion?

Project Phases
User Research
3
User Interviews
2
Usability Tests
35
Survey Responses
Screen capture of an interviewee.

Screen capture of an interviewee.

User Interviews

I first conducted interviews with three individuals who had recently booked flights online. These were undertaken in order to better understand users' goals & the context in which airline websites were​ generally used.

Most interestingly, each interviewee expressed preference for large screen devices when browsing for flights, stating that they made it easier to process the complex data.

Moving forward, I decided that I should design for desktop first and focus on mobile design later on.

A test script helped to guide early usability tests.

A test script helped to guide early usability tests.

Usability Testing

With the primary goal of learning about user pain points, usability tests were conducted with two volunteers on two major airline websites. Each candidate was given identical tasks to help me understand if all users were experiencing the same problems.

I learned that, even on major airline sites, certain key steps such as date picking & baggage check-in continually confuse users. Worse still, users were often unsure of which step they were at within the booking process. Inconsistent or unclear information about important aspects such as price continually led to feelings of uncertainty and insecurity.

These tests challenged my assumptions and helped to earmark key areas to focus on:

  • Navigation should be made clear at all times.

  • Fundamental airline site interactive elements (e.g. calendars) require thoughtful redesign.

  • Clearer feedback on pricing is vital.

Key insights from online survey.

Key insights from online survey.

Online Survey

An online survey was shared in order to obtain unambiguous insights into user requirements. In particular, I wanted to know three golden questions:

  1. Why were they visiting the site?

  2. Could they complete the task and if not, why?

  3. What would they change about the site?

Problematic sites were referenced, enabling me to visit these later in order to examine how they could be better designed.

Some extremely valuable insights emerged from the survey:

  • Airline sites are often visited for browsing purposes and not necessarily to book.

  • Upselling and aggressive promotion is a major annoyance!

  • Prices are often hidden or unclear.

  • Info on Visa requirements is scant.

This data was vital in pinpointing key areas to consider when redesigning.

Assorted slides from the benchmark presentation.

Assorted slides from the benchmark presentation.

Competitive Benchmark

A competitive benchmark was undertaken in order to learn from best practices observed in competitor sites. The scope of the benchmark extended from micro interactions all the way up the brand identity.

This benchmark was kept close at hand during the design phase as a reminder of best practices that should be adhered to, as well as poor designs that should be avoided. It would also serve as an annotated presentation to justify future design decisions to stakeholders.

Analysis

It was time to start making sense of the various types of data.

Assembling affinity diagram with help from a volunteer.

Assembling affinity diagram with help from a volunteer.

Affinity Diagram

So far, my research had produced high volumes of chaotic and unstructured qualitative data. An affinity diagram helped me to categorise this data and get a clearer picture of user behaviours, motivations and frustrations. Recruiting a volunteer was essential in order to process the data more effectively as a team.

Some key insights emerged:

  • Airline sites often present confusing and contradictory information. Simplification and clarity are called for.

  • There is an inherent mistrust of airline sites. An upfront approach could remedy this.

This stage produced cleaner data which was necessary for the next step: the customer journey map.

Customer journey map.

Customer journey map.

Customer Journey

Constructed on the foundations of the affinity diagram, the customer journey map provided a clear picture of what user happiness looked like throughout the booking journey. I now had a clear picture of which steps needed attention, namely:

  • Home screen

  • Search results.

  • Selecting class & baggage.

  • Entering passenger details.

  • Add-ons.

This helped me to see where future designs could improve upon those of the competition.

Key Pain Points to Tackle

Navigation is not Clear!

On all steps, airline sites often don’t let the user know what step they are on or what to expect next.

Issues begin on Home Page!

Usability issues are apparent right from the get go. Home page input interactions such as calendars and airport names require a major overhaul.

Search Results are Muddled!

Messily arranged results make it hard to choose flights based on key criteria such as price/time/duration.

Baggage Allowance and Classes are Unclear!

Users are left feeling unsure exactly what they are agreeing to. It is hard to differentiate between the advantages of baggage/class plans.

Entering Details is Exhaustive

Form filling in competitor sites is tedious and frustrating. Minimising the time and effort involved would be a significant one up on competitors.

Don't Force Add-ons!

Users are coerced into adding items they may not need. A gentler and more honest approach is advised.

A Set of Simple Guidelines to Tackle These Paint Points

1. Simplify!

Research indicates that the complexity of airline sites can cause cognitive overload. Every effort must be made to simplify the process for the user.

2. Be Clear!

With many airline sites, important information is often hidden or unclear. A successful site will aim to rectify this.

3. Be Quick!

Lessen the steps involved in browsing and booking flights. Don't waste the user's time with needless steps and form filling.

4. Be Honest!

Up-selling, ads and hidden costs frustrate the user and is detrimental to brand trust. An upfront and honest approach is key to gaining customer trust.

Moving to Design

Establishing Flow

A flow diagram was drafted to ensure that users could proceed through the information architecture of the site unhindered. This flow focused on one primary use case which covered most bases:

  1. Browse for flights.

  2. Select a suitable flight from given results.

  3. Enter passenger details.

  4. Select add-ons (if desired).

  5. View summary of previous selections.

  6. Check out.

I recruited volunteers to report errors or omissions that I had missed. In so doing, numerous dead ends and inconsistencies in the site flow became evident. In this fashion, potential flow issues that may arise while prototyping were eliminated cheaply and quickly.

Flow diagram.

Flow diagram.

Sequential sketches of envisaged navigation style.

Sequential sketches of envisaged navigation style.

Defining navigation

I now needed to devise a navigation style that accommodated the established user flow through the entire website.

Working on the foundations of the user flow, I began drafting hand-drawn sketches of how the navigation might function. 

These were done iteratively until I settled on a functional navigation style that satisfied three important metrics for the site:

  • Smoothes the flow.

  • Reduces Friction.

  • Saves time.

Prototyping & Testing
Sketching Interactions of UI elements.

Sketching Interactions of UI elements.

Getting Granular with Interaction Design

By this point, considerable effort had been made to understand and articulate the "problem". I was now ready to get into "solution mode" and begin planning the site's key interactions.

Using pen and paper, I was able to zoom in and design micro interactions quickly and cheaply. This helped me to visualise how characteristics such as colour, size and shape could work for interactive elements such as the calendar.

These exploratory sketches were an essential step before shifting designs into the digital realm.

Low fidelity prototype.

Low fidelity prototype.

Low Fidelity Prototype

Next, a basic digital prototype was built, primarily to test the high level flow of the booking process.

I realised that the site hinges on several relatively complex interactive components such as calendars. In order to get more realistic feedback on the usability of these, a quick and dirty 'clickable' prototype was chosen instead of a paper based version.

Usability Testing

Rapid user testing identified key areas that would require redesign in the follow iteration, namely:

  • The current step in booking process needs to be more apparent.

  • Buttons require more meaningful labelling.

Medium Fidelity Prototype

A medium fidelity prototype served to remedy the problems identified in the low fidelity prototype. It also helped to test elements that required deeper interactivity and colour.

The navigation was refined and touches of colour were added, particularly to differentiate between price.

Revisions

The low fidelity prototype was improved upon and expanded in the following ways:

Usability testing on medium fidelity prototype.

Usability testing on medium fidelity prototype.

Usability Testing on Medium Fidelity Prototype

Usability testing was done with the assistance of two volunteers. I wanted to find out if the issues encountered in the low fidelity prototype had been tackled. I also wanted to test the usability of the changes that are highlighted above.

Some insights from the testing:

  • Far too many steps in order to book a flight.

  • Map may be slightly too elaborate for the task of finding the nearest airport.

  • Too many confirmation screens and popups informing user that a step has been completed - a balance must be struck.

High Fidelity Prototype

A high fidelity prototype was built using feedback from usability testing of the medium fidelity prototype. Now that the flow and interactivity had been tested fairly rigorously, it was time to broaden the scope and consider overall user experience & branding too. Key to this was coming up with some key elements to enhance the overall feeling for the site:

  • A more fitting airline name than "Fly UX".

  • A motto that denotes the values of the brand.

  • Visual styling and typeface that align with the brand values.

Clickable high fidelity prototype.

Reflection

Outcomes

The high fidelity prototype is in keeping with many of the criteria I had stipulated to guide design:

Simplicity

  • A clutter-free interface with complex data hidden until you need to see it.

  • Stripped back functionality focusing on efficiency & ease of use.

Clarity

  • All the elements that the user needs to know to confidently browse and book: Flight duration, costs, fees, times, stopover are made abundantly clear.

Speed

  • Steps to complete task are greatly reduced.

  • User can easily log in via social media which also helps in auto filling forms later in the booking process

Integrity

The user is not bombarded with up-selling and extras, but instead they are politely asked if they require supplementary services.

Lessons Learned

This project certainly wasn't all plain sailing.

  • Too many use cases have been catered for in the digital prototype. I should have focused on solving one use case really well than on several cases badly.

  • A small pool of interviewees made it hard to identify if stated problems reflected problems faced by the majority.

Next Steps

  • Conduct usability testing on the high-fidelity prototype.

  • Use this data to construct a finished UI design to hand off to developers.