Jesse Richardson
UX designer

Airline Website Case Study

A Project with the UX Design Institute

A little more information:

This project was completed for the purposes of learning, understanding and using the design process. The main goal was to take research findings, analyze and conceptualize them, and design an airline website that created a better experience for users. Of course, this project was all done essentially in a vacuum, meaning that the work was done by myself with little collaboration from anyone else. This constraint was noticeable, and I thoroughly believe the final product would have been a much different and a better solution to the problems found during research.

Research

Surveys

As a first step, a short survey was used to begin our understanding of the user.

Survey Characteristics

  • 6 questions

  • Online

  • Less than 2 minutes to complete

  • Created using Survey Monkey

Limitations:

  • Free survey builder, Survey Monkey, offered limited features and response types

  • Only 8 responses

  • Survey pool was not diverse

  • "Airline Website Improvements" is a leading title and was a poor choice

Results:

  • I learned how to write a brief survey

  • Resulting data was not very useful

User Interview and Testing

In order to truly understand the user, I completed 3 interviews directly followed by a usability test of 2 competing airline websites.

Purpose: Understand the user in order to empathize with their use experience

Circumstances

  • Setting: Remote Moderation

  • Two of the three users were provided by the UX Institute, the third was a friend

  • All users were fairly frequent-flyers, which may have skewed findings

  • Websites used for testing: Aer Lingus, Euro Wings, Southwest, Frontier

Findings

  • Users will use aggregator sites for comparison and will visit airline websites when ready to book

  • Brand loyalty is prevalent; Users will download native apps from their favorite airlines

  • A clear flow is important in order to convert a user into a customer

  • Fare-Levels was a common negative point that users encounter

  • Each user has a slightly different hierarchy of what information they find most important - this could be an area that is further researched.

"This is where they get you."
User upon encountering fare-level options.
Analysis

Affinity Diagram

I used affinity diagraming to breakdown my research findings and compile it into understandable and usable groupings.

Circumstances

  • This exercise was completed in-person by myself and one other person

    • The other person read through my research notes and had only a general understanding

Findings

  • The exercise pointed towards general areas of the website that would need attention in order to produce a good experience for the users.

  • The groupings allowed me to see the context in which users had positive and negative experiences

  • The data-entry form turned out to be a major factor in the whole experience.

    • This form would need to be fine-tuned for optimal results

  • More contributors would have increased the value of this exercise immensely

Customer Journey Map

The Customer Journey Map allowed me to add structure, flow, and emotion tracking to my findings from the Affinity Diagraming exercise.

Process

  • My first step was to break down the most common use case into defined steps

  • Next, I took all of my findings up to this point and applied them to a corresponding step

  • Finally, I took into account the user's emotion at each step and plotted that along a line graph

Findings

  • This exercise was a great precursor to defining the user flow

  • Pain points were broken down into each step, making it much easier to start thinking of possible alleviations.

  • The Customer Journey Map could change drastically with a different use case or even based on the user's reason for travel

  • Users typically have a better experience during the data-entry portion of the journey and have a less than optimal experience when encountering larger amount of information that must be interpreted in order to book a flight

This chart is only the User Emotion portion of the Customer Journey Map

This chart is only the User Emotion portion of the Customer Journey Map

Concept

User Flow

I mapped out the users’ steps to see how I could simplify their journey to help them reach their most important goals with the website. The theme was simplicity.

Findings

  • This exercise was helpful in understanding the most important use cases

  • The Flow Diagram was pivotal when developing a rough sketch

  • The steps follow a user through the flight booking process

  • It was at this point that I decided to exclude fare-levels and instead allow users to select only options that they want/need

    • In a collaborative effort with a product team, I have to imagine this would get quite a bit of push-back from the sales team

Made using Miro

Made using Miro

Design

Sketches

Sketching gave me a visual on the user's experience. My goal was to focus on a clear presentation and flow.

Focus Items from the Research Phase

  • "Less clicks = Better"

  • "Avoid Redundancies"

  • "Clarity is key"

  • "Keep fare-levels simple"

Findings

  • Many iterations were needed in order to iron out specific portions of the website

  • I realized flaws in my user flow and made changes accordingly

  • Displaying a large amount of information all with near-equal importance can be tricky

  • Nearly every choice was a result of my research findings

  • This is a desktop-optimized version, and I would not recommend this as a mobile or dynamic website. Most of the interactions would work, but the layout would need to change to accommodate a mobile display

As a visual learner, the sketches helped me visualize the user flow and overall experience in order to make impactful changes.

Prototype

The next step after sketching was to create a medium-fidelity prototype.

Process

  • Using Draw, I created each screen and screen state

  • Once complete, I uploaded the files into Invision

  • Invision allowed me to create the prototype and ultimately test out the flow

  • I realized many mistakes with each screen once uploaded into Invision and had to re-upload each screen at least once

Findings

  • Invision is a powerful yet simple tool to create a prototype quickly

  • This process allowed me to hone in on key attributes that I was aiming for, such as reducing the number of clicks required to complete a task

    • Example: When a user selects a Departure Date, the Return Date calendar will open automatically

Airline Website Case Study

Wireframes

At this point, I had worked out most issues with the flow and now I was determined to define my design exactly as I had envisioned it.

Process

  • My goal was to break-down each element completely, leaving no question unanswered.

  • On my first pass, I focused on each item individually

  • Next, I went through and checked to ensure that each element would work and flow with the other elements on the page

  • I used Draw (essentially a free form of Sketch) for this process.

Findings

  • I realized how many decisions I had not defined up until this point

  • The decisions I made here had a huge impact on the integrity of the user experience as a whole

  • The interaction of website elements can severely change the flow of a site

  • There are many different functionalities of simple website elements, so a clear description was vital

  • Details are very important at this stage

What have I learned from this project?

This project served as an amazing learning experience during my dive into UX design.

Struggles

  • The Concept phase was tough because I am a self-proclaimed visual learner

    • Admittedly, I drew up a very rough sketch prior to creating the flow diagram because I needed a visual basis to start with

  • Working in a vacuum (alone) did not produce a truly authentic result. Collaboration would have changed the outcome immensely.

  • New software always has a learning curve; The "Free" versions are not always great

Takeaways

  • I learned the design process and its many tools at each step

  • UX design work is better done in a collaborative setting

    • Also, if I was working with a product team, I would have had to make more compromises in order to satisfy members of the team

  • Richer research gives you better results

    • It is hard to say if my results have much weight because I based most of the project off the research findings from only 3 individuals who were all frequent-flyers.

    • If I completed this project again, I would use at least 5 individuals with more diverse use-backgrounds