American Airlines Book a Flight

Exploring ways to simplify the flight booking process while reiterating the current American Airlines website design.

Overview

Research

How frequently do you travel a year?

Painpoints of the site

What are your preferred airlines?

Pain points of site

Pros of site

Reflection

Ideation

Participant 1

1-2 times

American Airlines

Delta Airlines

Alaska Airlines

Unclear site structure

Everything is white and blends together

Icons that represent different amenities

Clean UI

Design

The current “Book a Flight” feature on the American Airlines website can be found on the landing page and consists of a flight finder. As long as you know the anticipated departure and arrival dates/locations, you are able to view upcoming flights and prices to start planning your trip. In this case study, I will be attempting to iterate on the current design, and identify paths to improve the current design flow of the website.

SECTOR

Travel

Transportation

Aerospace

DURATION

6 weeks

The Problem

The Solution

Participant 3

1 time

American Airlines

Alaska Airlines

White landing page is harsh on the eyes

Poor information hierarchy

Buttons that differentiate departure, arrival, and flight duration

Site navigation

Participant 4

4 times

Alaska Airlines

Southwest Airlines

Information overload

Size of flight cards

Intimidating

Icons that represent different amenities

MY ROLE

Solo Project

UX Design

Research

  • Millions of travelers a year, most using airline websites to book flights

  • Attempts to book a flight can be met with complex or confusing navigation that make it difficult to navigate website

  • Challenges when integrating with third-party services or systems, affecting functionalities like baggage tracking, loyalty programs, or partner services.

  • Identify user pain points when booking flights

  • Understand what features are pleasant and which parts can be improved upon

  • Learn if there are any triggering events

  • Learn if there are any memorable features that can be added

Better understanding travelers’ needs and expectations

Going into the research planning, I wanted to keep in mind the unique and varying experiences of all travelers. It was important to remember that each traveler holds varying ideas of what to expect when visiting airline websites, and I wanted to honor that and make my research reflect these discrepancies.

When it comes to traveling, I see that there are a lot of factors that play into creating an ideal experience for those that choose flying as their main source for transportation. Although I focused primarily on the flight booking process, keeping these factors in mind made it easier to tweak other minor features in my process to iterate on the existing site.

Research goals and objectives

In order to keep the traveler experience prioritized throughout my research process, I came up with a few research goals to keep in mind:

  • Find out what makes the site easy to use and maximizes potential for efficient/simple site exploration

  • Explore ways to improve user experiences through visual hierarchy and flow

  • Understand what airline site features are desired or feared

I interviewed 5 travelers, and had them walk me through their thoughts while navigating the American Airlines’ website.

Participant 2

1 time

Asiana Airlines for Korea

Alaska Airlines for domestic flights

White background is harsh on the eyes

Information is cluttered

Book a flight feature on landing page

Pros of the site

Participant 5

1-2 times

Southwest Airlines

Information overload

Unclear information

Icons that represent different amenities

Times traveled per year

Analyzing competitors in the airline industry

After deciding to focus on American Airlines’ website, I created a list of three other airlines to compare mission statements, target market, strengths, weaknesses, and features.

Key Takeaways

  • Mission statements include serving the customer with excellence / prioritizing the customer

  • Target audience: various types of travelers— keeping the audience broad expands the possibility for all types of people traveling

  • Common features include:

    • Accessible services for the disabled

    • Flight booking

    • Different tiers of comfortability

    • Member mileage program

How might we assist the user with an easy flight booking process?

Meet Tim and Astrid, two different types of travelers. While Tim travels mainly for vacationing and likes utilizing his mileage membership and benefits, Astrid travels to visit loved ones at safe and affordable conditions.

Key Takeaways

  • Main priorities include:

    • Comfortability

    • Safety

    • Affordability

    • Accessibility

  • Users enjoy site design that is easy to navigate, provides concise yet important information, and is simple.

Developing low and mid-fidelity wireframes to kickstart this vision.

Delivery

Recreating UI components into a UI kit

An essential step that helped me increase productivity throughout the high fidelity wireframing process was creating a UI kit. With the UI kit, I was able to create and reuse key icons and elements that are used widely across the American Airlines website.

Higher fidelity and iterations

Using screenshots of the current website pages, I began recreating the current screens along with the design changes that I compiled.

Some of these iterations include:

  • From the landing page: allowing user to select departure and return dates without having to select calendar two separate times

  • Redesigning flight cards: condensing information to make cards cleaner / less confusing

  • Improving information hierarchy on the Trip Summary and Checkout pages

User testing to explore usability

To test usability, I followed up with the 5 participants that I initially interviewed and asked them to walk through my prototype and provide feedback.

Tasks that I asked them to complete included:

  • Book a flight from SEA to DCA from March 30th to April 6th

  • Select the departing and returning flights with the lowest fare

  • View details of the flight that departs at 2:00pm

  • Continue as guest

  • Complete fields to get through the checkout process

Before

Making revisions based on user feedback

Suggested iterations following usability testing:

  • Make the screen fixed on the input field after each one was filled out

    • The current state brings the user to the top of the page after each input field is clicked

  • To the confirmation page: add a little note that lets user know that the receipt and flight information has been sent to their email

After: User is alerted that a receipt has been sent to their email

Key Takeaways

Importance of usability testing

Testing usability was a key step in going through my design process, because I was able to work more closely with users, and explore my own curiosities. Through this testing period, I was reminded that users are not all the same, and that they are shaped by their own experiences and traveling goals/desires.

Feedback after usability testing included:

  • Enjoyed information distribution throughout cards and details page

  • Better balance of colors (white screen isn’t as harsh on the eyes anymore)

  • Simple and easy to navigate

Importance of building a UI kit

One thing that I learned from this project is the importance of organization and UI kit building prior to starting mid to high fidelity wireframing. Since most of my work was recreating screens from the current American Airlines website, it was helpful recognizing the elements that are repeated throughout the site’s design (such as the logo, buttons, font sizes, and color palette) to refer back to.

“Book a Flight” from landing page

Selecting departure/arrival flights

Trip/Passenger Information

Checkout and Confirmation

After roughly sketching some screens on my iPad, I moved to mid-fidelity wireframing. Creating these outlines gave me a better idea of component placement, and made it less intimidating starting on site design.