background

Senior UX   Product Design
UX Design & Prototyping for Airline App

Project I worked on as under an NDA.

The aim was to identify positive or negative areas in the airline booking process and apply the research & learnings to create wireframes & a prototype for my own Airline app.

Main Goal

Design smooth & easy to use airline booking process flow

My Role

Sole Researcher & Designer

Time Frame

4 Months

The Problem

The goal of the project was to identify the problems of airline booking apps and design the solutions.

So, first of all…what’s the problem?

A majority of users opt to research & book their flights on desktop instead of mobile. There's a lack of confidence and ease of use in the mobile booking process.

Different devices encourage different thinking where users trust their laptop/desktop more, so they inevitable fall back to their trusty big screen to make that important booking.

How can we optimise the mobile booking process to ensue confidence and perceived ease of use for the customer?

Some questions that will be addressed through the process:

  • What are the main goals and habits when booking a flight?
  • What pain point are users hitting while booking flights on mobile?
  • Are there any issues that slow down flight and date selection?
  • Difficult to add children? Not enough information around this?
  • Over complicated process for adding bags or oversized luggage?
  • Can users modify flight details after the fact?

The Process

I followed IDEO's Human-Centered Design and the
Lean UX Design Thinking process.

I chose the the below research methods as I felt this process was the best way to accumulate quantitative & qualitative data on users and competitors in the airline industry. This in turn would inform my design with a research & evidence based solution.

  • 1 Research

    Usability Tests
    Depth Interview
    Online Survey
    Competitive Benchmarking

  • 2 Analysis

    Anfinity Diagram
    Customer Journey Map

  • 3 Design

    Flow Diagram
    Defining Navigation
    Sketching

  • 4 Prototype

    Medium Fidelity
    Interactive prototype
    Wireframing

  • 5 Test

    Usability Tests
    Depth Interview

THE PROCESS
1
Research

For the research phase of the project I used the following methods: Usability Tests, Depth Interviews, Online Survey & Benchmarking.

Usability Tests

I conducted 4 Usability Tests which consisted of an interview and the completion of tasks on 2 Airline apps. I used Reflector to mirror the apps onto a laptop screen and then used Screenflow to record the session.

Usability testing was the perfect tool to utilise while conducting comparison tests as it allowed me monitor and probe real users on real airline apps. This approach could tell me a lot about how the user flows through the journey, what pain points they hit, what they would like to see improved and also of course, highlight any positive aspects I could take across to my design.

For the test itself, I set 2 tasks to be completed on 2 airline apps. This would allow me to make an accurate comparison between the apps.

TASKS

  • Book a 1 week holiday for 2 adults & an infant, changing the flight day at the end.
  • Book the flight again, but this time add hold luggage and oversized baggage.
  • “I don't like the way there's no click for search...in a perfect world there would be no scrolling, you just enter 3 letters and it comes up”
    Usability Test 1

Search Functionality

Usability tests revealed that the search functionality is hugely important when selecting airports. It's not just a "handy feature", it's what the user expects. Therefore, if it's not present, they become frustrated when they're forced to manually scroll search or use an A-Z option by country.

  • “I thought I had to click on the returning option to change that date...I thought it was going to bring me to a different calendar” Usability Test 2
image
Snippet from Usability Test 2

Date Selection

It became apparent that the date selection led to some confusion. There was a lack of feedback when dates were being selected which led users to be uncertain if they had chosen a date at all, especially on the outgoing selection.

Baggage

An area where I thought more issues might rise was adding baggage or oversized baggage. To my surprise, this seemed to be a straightforward process that customers were used to and generally didn't lead to any slow down in the booking process. The only thing that could be improved on is clearly presenting the information and guidelines around baggage.

Modify Flight Details

I also noticed that the booking summary page is an area where the user became particularly fastidious as it's a make or break point for their whole booking. I found it became a catalyst of irritation due to the fact that if an error was found at that point and you wished to go back to emend, the booking info wouldn't be saved and you would essentially have to start whole process again.

Adding Children

Issues that arose here were around how/if information was presented. Users were unsure about the added costs/taxes for kids so were just going on assumptions from past experiences. There was also common confusion around wording, EG, you had to figure out that you need to select "Change Adult" to get options to select a child, or that there wasn't a clear definition for "Infant or "Child".

Modify Flight Details

I also noticed that the booking summary page is an area where the user became particularly fastidious as it's a make or break point for their whole booking. I found it became catalyst of irritation as if an error was found and you wished to go back to emend, the booking info wouldn't be saved and you would essentially have to start whole process again.

Depth Interviews

I conducted 2 Depth Interviews which consisted of longer more in-depth (obviously) interviews than I had done previously in the usability tests. I used this opportunity to probe further into past booking experiences and also expectations for booking apps. I conducted the interviews over Skype and used Screenflow to capture the session.

  • “I just feel like I'll mess up the booking if I'm using my phone”

Depth interviews gave me a better understanding of the context of use of people that use airline apps - what are they trying to do, who are they with, where are they, what devices are they use.

It validated my assumptions that there was a preference towards using their computer to make an airline booking as they felt they would be less inclined to make mistakes.

Survey

I sent out 1 Survey that was completed by 25 people (in a real world project I would have aimed to get over 100 responses) I used Survey Monkey for the form which consisted of 10 questions. To the get the maximum response, I outlining that there were just 10 questions and it would only take 3 mins. I used a mixture of open ended and closed questions.

image Screenshot from survey View full survey results ↗
  • “Make the steps clearer”
  • “Too many steps to complete booking”
  • “Too many additional add ons”

The survey revealed that the primary motivation for choosing an airline was price and one of the main improvements users would look for is to make the steps clearer with less distractions.

Competitive Benchmarking

During the Competitive Benchmarking phase I reviewed four mobile airline apps and benchmarked them to learn what they are doing well…and not so well so that I could emulate them in the right places and avoid the pitfalls I discovered in their booking process. My main objectives here were were to:

  • Learn how best-in-class apps solve the problem we are trying to solve
  • Understand the conventions we should follow
  • Highlight best practice that we should emulate
image American Airlines analysis View full benchmarking document ↗

THE PROCESS
2
Analysis

Through the research methods highlighted above, I acquired a large amount of raw data - both quantitative and qualitative. The goal of the research had been to identify the problems FLY UX should be solving for users. Now, using the triangulation (multiple data sources as a way to provide a more accurate understanding of the problem to be solved), it was time to analysis that data.

The first thing I did was reviewed all the data that I had compiled, jotting down onto post its. From these post-its I created an Anfinity Diagram, grouping post it’s and naming these groups in a logical fashion.

I then used the Affinity diagram as a basis for a Customer Journey Map which gave me a structured overview of the of how the users feels as they go through the booking journey.

image Affinity diagram
image Customer Journey Map
  • Image
    1. Date selection ambiguity

    User doesn't have clear affordances or feedback that the return date now needs to be selected.

  • Image
    2. Cluttered flight selection

    Too much going on on this screen leading user to become overwhelmed and confused.

  • Image
    3. Summary screen

    While this screen is useful, it lacks the ability to tap areas to edit info.

Analysing Specifc Problems

The analysis of the Affinity Diagram and construction of the Customer Journey Map led to the conclusion that the areas that slow down customers the most & lead to the most frustration in the journey are date selection, flight selection & editing your booking.

1: Date Selection
Specifically ran into difficulty when customers were confused as to what date they selected and what they should do next. There were also issues when you were allowed to select dates only to be told later that there was in fact no flights available on that date.

2: Flight Selection
This presented itself to be the biggest pain point and it appeared to revolve around the information architecture. Badly structured, overload of information and options led to confusion over outgoing & returning flights, flight availability & currency conversion.

3: Editing flight details after info has been inputted
The summary screen seems to always lack the final step that would make it's existence truly functional; that you can actually edit specific areas of your booking from the screen without having to go back to the start.

The Process
3
Design

My design process would include Flow Diagram, Defining Navigation and Sketching

Flow Diagram

Before getting into the layout of the app, I wanted to create a high level Flow Diagram to address issues highlighted in my Customer Journey Map.

I first sketched out the general flow, getting very granular and going back and forth until I was happy with the iteration. I then translated my sketches to digital format using Adobe XD.

During the translation to digital I noticed other small issues I didn’t spot while sketching, so I began to dynamically update the flow as I worked and learned more about the journey.
This is something I would do throughout the project, a design is an evolving process that only lets you in on secrets the further you go.

image Flow Diagram

Define Navigation Style

Next step in my design process was to define the navigation style that I thought would accommodate the users flow through the app. Here I could call upon my earlier benchmarking work to see what are the common styles from best-in-class airlines.

I decided on a bottom tabbed navigation as I didn’t want to hide everything behind hamburger menu, this approach would allow me to always display the most important areas of the app with the inclusion of a “More” option if user wants to dive deeper.
Moreover, I placed the navigation at the bottom to ensure users could reach navigation comfortable while using one hand.

image Navigation elements on calendar page
image Navigation elements for flight selection
View full Navigation document ↗

Sketching the Screens

Here I could build on the flow diagram and navigation I had already defined and really nail down the layout and interaction design of the screens.

This was in fact a low-fi prototype. I sketched out each screen/iteration on individual pieces of paper and crudely went through the journey by hand as if they were real screen on a phone in front of me.

Physically interacting with the screens helped me identify issues I hadn’t thought of previously. EG: If I've selected my hold luggage and press continue, I've missed the option to add Sports Equipment, I now need to rethink the design where you are always able to add Sports Equipment. I would go back and forth from here to my flow diagram and update accordingly

Image

Rough Stetching

I wasn't worried about how the screens looked at this point, I just wanted to validate or invalidate my thinking for the design. This style of rapid screen sketching really helps to get ideas down fast.

Image

Detailed Sketching

Once I was happy with some rough sketches, I made more detailed drawings on individual pieces of paper which I could use to physically go through the journey and easily move around or change completely.

  • Image
    1. Date Selection Affordances

    Clearly highlighted active tab that would include animation.

  • Image
    2: Digestable Flight Selection

    Too much going on on this screen leading user to become overwhelmed and confused.

  • Image
    3. Functional Summary Screen

    Now includes clickable links that allow you to easily edit your flight details.

Designing Specifc Solutions

I used the fast process of sketching to solve all the design problems I discovered through my research and analysis. Here a some specific solutions to problems I previously mentioned in my analysis.

1: Date Selection
I wanted to make the active tab very visible and animate the underline from "Departing" to "Return Date" to ensure the user would know what the next step is. I would refine this design further in the prototype.

2: Flight Selection
I redesigned how I this information would be presented to the user. There's a lot of information to process so I wanted it to be as clear and as scannable as possible. To achieve this, I used a simple list with specific emphasis on price after I learned this was the most important aspect for the customer.

3: Editing flight details after info has been inputted
I added a simple solution to the summary screen. Instead of it being a static screen, I simply added "Edit" links for each flight. This would bring you to the flight selection screen where you could edit and then return to where you were without having to restart the whole booking process.

image Final sketched screens on individual pieces of paper

THE PROCESS
4
Prototype

Let’s take this online, time to prototype. Transferring the the initial screens into XD was a relatively fast process as I had done the heavy lifting during my sketching so it was mostly as case of digitising what I had done, making improvements as I went along. 

I decided on a medium fidelity prototype as there weren’t many forms or other types of validation or very detailed areas that might need addressing in a high fidelity prototype. 

I used the native prototyping functionality in Adobe XD with some light animations to add some flare to the design. 

image Prototype Interactions
  • Image
    1. More Date Selection Affordances

    Added a "Please Select Return Date" drawer which slides up from the bottom.

  • Image
    2. Finessed Flight Selection Screen

    Simple changes to the layout and hierarchy of this screen makes the content much easier to digest.

  • Image
    3. Summary screen

    Considered information presentation with a simple addition of an"Update my flight" link.

Developments during Prototyping

Design is always evolving as a project goes along and this was no different. As I built out the prototype, there was some areas that needed a little more tact.

1: Date Selection
I realised that my sketched solution which included animation still wasn't telling the user clearly what they should do next, I hadn't solved the problem. I decided to go a step further and add an unobtrusive drawer that slides from the bottom to inform user what action they should take.

2: Flight Selection
I finessed my original sketched designs while still keeping the main focus on the price. I removed the option to see more flight details as I felt it was unimportant information overload and from my research I discovered that very few airlines offer this extra information at this stage.

3: Editing flight details after info has been inputted
Again, I finessed the look a little from my original sketch but the final prototype still maintains the fundamental layout and principals that I outlined. The simple addition of an "Update my flight" link means the user has a gateway to edit their info without having to go back to the start.

Image

Interactive Prototype

I used this to validate my low-fi designs. While I enjoy this process, it can be difficult to know how much detail to go into and when to stop. I wanted my prototype to be exactly that, a prototype - it’s function is to test and validate, it does not need to do everything right now. I stopped at a point where I believed I had solved the problems found during research/analysis and where I was relatively happy with the layout/design.

View Interactive Prototype ↗
Image

Annotated Wireframes

Wireframes might be considered a subset of prototyping, however, they are huge undertaking and vital piece of work if you want to get your designs built by developers as you imagined. I found the most difficult and time consuming part was detailing every function that the forms should perform. A high fidelity tool like Axure may have been useful here.

View Wireframes ↗

THE PROCESS
5
Testing

Now it was time to validate my designs with real users. To do this I would once again conduct Usability Tests just like I had done at the start of the project.

The objectives of testing the prototype at this point are:

  • Gain insights from the user
  • See if we meet user’s expectations
  • Check if the design is matching the goals
  • Check if the user can perform the tasks proposed
  • Find out if we’re on the right track
  • Get user reactions and feedback

I wanted to use the same tasks as I had used previously so I could compare accurately if my designs had solved some of the problems I had found in their booking process.
Again, the tasks were as follows:

TASKS

  • Book a 1 week holiday for 2 adults & an infant, changing the flight day at the end.
  • Book the flight again, but this time add hold luggage and oversized baggage.

Overall, conducting Usability Tests on the Prototype revealed that the solutions I had designed were valid, helped improve the flow and didn't expose any other issues or bottle necks in the booking process.

I paid particular attention to the date selection and the extra affordances I added and was pleased to see that there was no hesitation from the user as to what the next step was.

The simplified layout of the flight selection screen with emphasis on price was equally successful, with users quickly scanning the page and selecting the cheapest flight without any hesitation.

The option to edit flight from the summary screen seemed to come natural to the user where they actively looked for this option instead of going to the back button for fear of losing their already inputting criteria.

Fly UX
Final Results

image

Conclusion

Outcomes

The UX process I followed influenced every bit of the final flow and design of the booking process. Here are the main areas I addressed that are somewhat of a bottleneck in current airline apps and which I feel I solved for with my designs.

  • The addition of more feedback and affordances to the date selection screen removed any confusion for the user and in turn sped up the booking process.
  • Improvements to the flight selection layout and display of information meant that customers could better digest quite a lot of important content and could feel confident in their selections rather than becoming overwhelmed and unsure of what to focus on.
  • Ability to edit flight details without having to go back the start takes away a lot of frustration for users. Moreover, users feel more comfortable with their next online booking as it removes some pressure when they know can can easily edit without losing any previously inputted details.

What I Learned

The area I took the most learnings from was the comparative usability tests I conducted. It was invaluable to see users interacting with the product and being able to ask questions along the way. Here are the other main learning points that were revealed through the project.

  • When it comes to booking a flight, price is still precieved as more important than the experience
  • Simplicity goes a long way. Users get overwhelmed very easily if too much information is presented, even if it's valid information, the way it's structured determines whether it's comprehensible.
  • Make sure your recording software is set up correctly, I lost a full session.
  • Me more mindful of leading questions or statements. On reviewing the usability test there were a couple of instances when I went off script and my phrasing could have better.
  • When you're prototyping, know when to stop.
  • Simple things like affordances and feedback go a long way.

Like to see MORE?

Go to projects go to archive