AADVANTAGE AIRLINES : A UX CASE STUDY

Overview: Frequent flyer miles are part of a loyalty program offered by airlines/credit cards.  Cardholders earn points, miles, and cash back that can be used for award travel or other valuable benefits.  You accumulate a set amount of miles based on how far you fly or how much you spend on your credit card.  You can then use these miles to buy tickets.

Which card is the best?

Which card is “best” really comes down to whether you fly American often enough to justify a higher annual fee. If you’re after elite status, fly AA exclusively or most of the time, and can spend quite a bit on the card, the Citi AAdvantage Executive Card is the one for you.  You can collect AAdvantage miles to redeem on Oneworld partners. If you’re only an occasional AA flyer, the AAdvantage Platinum Select card is the way to go.  You get a sizable sign-up bonus to boost your account from the beginning, and some nice ancillary perks like 10% redeemed miles back. 

Once you have enough points in hand, you can redeem them at AA Airlines website.  You can easily find your way to book a flight using your miles.  But as you make your way into choosing the right fit for you, the website leaves you confused with their layout and overwhelming information.

Research discovered this to be a pervasive issue.  The poor usability led to poor adoption and is reducing the potential effects of the loyalty program.  To go further deep into the research to figure out the challenges users are facing and to find solutions, I decided to create the UX design process. 

 

MY DESIGN PROCESS

I decided to follow IDEO’s Human-Centered Design and Lean UX Design Thinking process to make sure that my design decisions were supported by user research and feedback.

design process.png

Persona: 

To start off, I created a persona of a potential user based on interviews, observations and collecting feedback from people who often travel with Amenrican Airlines and are familiar with the AAdvantage Program.

Screen Shot 2018-04-23 at 10.07.01 PM.png

Job Stories:

I used the Jobs To Be Done framework to explore different contexts to understand the motivations and desired outcomes of common users that use the AAdvantage website. 

I created the following Job stories based on observations and contextual inquiries with the users. 

Screen Shot 2018-03-25 at 11.04.33 PM.png

Guerrilla Usability Testing:

Guerrilla usability testing is a powerful technique. Designer Martin Belam describes it as “the art of pouncing on lone people in cafes and public spaces, [then] quickly filming them whilst they use a website for a couple of minutes.”

Let’s skip the pouncing part and instead focus on its subtleties, including how to obtain and share feedback within. I created few scenarios, such as:

Screen Shot 2018-03-28 at 11.08.44 AM.png

CHALLENGES  

Based on the scenarios, we conducted an exercise with six participants and summarized each user’s pain point.  I prioritized each pain point based on its importance to the user.  My assumptions of the importance to users were based on conversations with the existing and potential users.  Some of the key pain points and their examples are:

 1.   Earning miles is not as simple as it is advertised.  The number of redeemable miles you earn on a flight booked through American Airlines is based on the price of the ticket you paid and your status level,  unless you’re flying an expensive full-fare economy or premium-cabin ticket, expect to only earn between 25%-50% of the miles flown.  You can still earn miles but the process has become rather complex to do so. for example you can still earn AAdvantage miles based on the distance of your flight if you fly a partner airline and credit the miles to American, which is easier said than done. 

Desktop_screenshot1.png

2.   This program has lack of MileSAAver award seats on American-operated flights.  When looking to book a domestic trip using your AA miles, consider yourself the exception if you find nonstop, convenient flights at the MileSAAver level.  For the most part, weekend trips aren’t going to be an option at the lower redemption rate. If you want to fly during the week specifically Tuesday or Wednesday you can probably make it happen. Also the user interface of the site is difficult to navigate.  Typically the first thing user sees is the calendar displayed on the page.  However,  it is hard to follow because user is asking himself/herself if this calendar is showing both departure and return miles or only one until he scans the whole form and glances at the top left box with the details. 

Desktop Copy.png

3.  Once you log into the frequent flyer AA advantage program, it is not as intuitive as one would expect.  The options available to sort the flight information are minimal or do not pop out.  The information seems to be crowded in on page which makes the process confusing for the user to proceed or navigate easily. 

Desktop_screenshot3.png

After conducting an extensive research and identifying the pain points, I reached the conclusion that using the AAdvantage website to redeem miles is the major challange that users face.  Therefore, in order for users to redeem their airline miles through the AAdvantage Program and arrange their travel needs, the online AAdvantage program needed to be simplified to create an intuitive experience for its users to redeem their airline miles. 

SOLUTIONS

To keep the business growing, a designer must come up with a solution  that will reinforce the understanding and navigation of the process further.  To do that effectively, I took the following design steps to book a flight via redeeming miles. 

TASK FLOWS: 

I created task flow for the user to accurately login to the AAdvantage program.

Taskflow 1.png

Second task flow shows the user booking the flight by redeeming miles. 

taskflow 2.png

WIREFRAMES:

I used Sketch to create Hi-Fidelity wireframes of the user redeeming miles while booking a flight to Flagstaff, AZ from John wayne, Orange County Airport. 

 All text is left align for the user’s eyes not to spiral around the page, fully reading and understanding where to start and finsih.  1. The AAdvantage account information is readily available for the user so that while searching for the best option, user can view their current number of award miles and not go back and forth on multiple windows to look for that information.

All text is left align for the user’s eyes not to spiral around the page, fully reading and understanding where to start and finsih.

1. The AAdvantage account information is readily available for the user so that while searching for the best option, user can view their current number of award miles and not go back and forth on multiple windows to look for that information.

Screen Shot 2018-11-09 at 3.41.20 PM.png

This re-design is not crowded with extra information. 75% of the details are what the user asked for, where as only 25% is extra information which is either a legal document pop up that the user must see or account information that help the user in finding the best deal for their miles.  

1.   User can also search flights by full calendar view or total price to compare with Miles.

2.  by clicking on the details, user can see the number of stops, layover time and total duration of the flight.

3.  User can view the the total number of miles for different flight options and their account balance.

Mood Board: 

To have a more visual representation of the wireframes I decided to create a mood board next to communicate the style, Voice, directions and language of the website to its users. 

mood board.png

MOCKUPS: 

The last and the final phase was to create mockups for the presentation of the overall visual design.  Using Sketch as the main design tool, I created two different designs for booking form and got feedback from the users.  Based on the feedback I created Desktop, Tablet and Mobile views for the form.  Some of the consistent design elements that were used in all 3 mockups were:

Color: Red is used for the main headings.  Black is used for all the text, where as blue is used for clickable text or links.  Also, yellow is being used as an accent color for AAdvantage account. Accessible- colors.com was used to evaluate the color combination against white background. 

Typography & Layout: PingFank HK is used for the main headings where as sub headings and text is written in PingFang TC Regular.

 

  • DESKTOP VIEW: All the informations is spaced out evenly for the user appeal. The user can hover over the text to get a tool tip. To get extra information user can always click on the side headings. AAdvantage login is highlighted with accent color to make it more prominent for the user.

Desktop .png
  • TABLET VIEW: Tablet view is very similar to the desktop view. Since tablet has a tap on finger feature, therefore while designing, the text is at least within 44 pixel finger circle for the user to freely tap on without being tapped on other information. User can hover over the text to get a tool tip.

Tablet@1x.png
  • MOBILE VIEW : In mobile view user has more vertical space and not enough horizontal space. User can tap on the text to get a tool tip.

 1. Burger menu bar is applied in Mobile view because the screen size is small and not all information cannot be displayed.  1 . 1 Once you tap on the burger menu bar you see Plan Travel, Travel Information, AAdvantage options.

1. Burger menu bar is applied in Mobile view because the screen size is small and not all information cannot be displayed.

1 . 1 Once you tap on the burger menu bar you see Plan Travel, Travel Information, AAdvantage options.