UX Design Challenge: an American Airlines’ booking website

During the interview with American Airlines, here’s my story of the design Hotel and Meal Vouchers on Canceled Flight. The exercise took me roughly 10h to finish, including the writing of this case study. Below you can find the design brief I picked, and the solution I came up with. I will walk you through my design thinking process.

American Airlines is the world’s largest airline, with Dallas/Fort Worth being its largest, handling more than 200 million passengers annually with an average of more than 500,000 passengers daily. American Airlines, together with its regional partners, operates an extensive international and domestic network with almost 6,800 flights per day to nearly 350 destinations in more than 50 countries.

I will continue to carry on American Airlines and its mission statement: “committed to providing every citizen of the world with the best service of the air travel to the extensive selection of destination possible.”

Scenario Imagine you and a friend are on a flight from Los Angeles to New York with a layover in Chicago. When you land at ORD airport, you learn that American has canceled your next flight due to a snowstorm in New York. That happens to be the last flight to New York for the day and American has booked you on the first flight out the next day. All passengers will be compensated with an option for free hotel rooms for the night, and meal vouchers for dinner at the airport. You and your friend are on the same reservation and you will receive an email with details and a link to a web page where you will select which amenities you want to take advantage of.

Our flights canceled tonight and stuck at nowhere.

BUSINESS RULES

• Determine an appropriate number of hotel options to offer. Display any details you feel are necessary (e.g. address, distance, hotel shuttle availability, etc.)
• As there are multiple passengers in the reservation, they will need to choose how many rooms they prefer.
• Upon confirming a hotel selection, a check-in code and confirmation number will be provided.
• Meal vouchers are valid only for that day and the whole value must be used during the same transaction. A QR code should be used for redemption. The voucher amount is $12 for food and drinks per person and this excludes alcoholic beverages. If this amount is insufficient to cover their meal, they will need to pay the balance on their own.
• There needs to be a way to decline the offer.
• They may select meals, hotels or both.

What I did

As the UX product designer, my job is to do the research, information architecture, and design the mockups from the email to making the hotel and meal selections.

I’ll go over the process I followed to complete the design exercise, and explain my reasoning and thoughts behind the decisions I made.

Note that the scenario is only mentioned “my friend and me”, so in the course of this exercise, they were my main focus. I made sure that all designs would work for other passengers as well.

Time spent on the exercise: ~10h (including writing this “case study”).

Design Toolkit

The Challenge

Passengers who are on this flight got flight canceled. This is a very frustrating and disappointing situation due to the weather issue. Outside is cold. People need access to a place to stay the night, meal to eat, and take some rest for the earlier flight tomorrow. The web page needs to be easy-to-access and get everything all set quickly, usable, and efficiently.

The original premise was simple: take less step, get all-set. Even it is an urgent situation. We weren’t trying to revert to the simple past. Our high-level goals were to create a strong foundation responsive web page to:

  • Help passengers find the hotel and Restaurant
  • Make it fast and easy to use for everyone, everywhere
  • Give passengers more control

 

Understanding

Before I start designing, I began with some brainstorming to explore the topic of the design exercise and gather my initial thoughts. I did a mini comparative analysis to see what other similar applications and platforms are out there in the market. I did find three that I thought were interesting (Expedia, Priceline, and HungryGoWhere). Even though they have different goals. What I wanted to know are:

  • How they made their hotel selections or meal selections
  • What information would need to be shown
  • What pieces of content should be in focus
  • What other features do they have
  • What are the good and bad features
  • How are these features working
  • How does the overall UI design look like
  • What design patterns are consistent
  • What are the users saying/comments about them

Observe

I took a close look at the project and broke down it into smaller chunks, which allowed me to focus on one aspect or feature before deciding what needs to be built next.

I planned to talk to the stakeholders on what are their big pictures. I performed user research to observe my potential users and dig deep to determine their needs and goals. The survey is useful for understanding the overall situation. The interview will prove to me with a high quality of understanding of our users.

We try to find out what exactly people are looking for during the decision-making. What do they like? What’re top choices like the hotel around that area do most popular? What kind of meal they want? So we are not going to pull out a whole list of the hotel like a hundred – they will get confused. I did out of my way to interview a few people who like to travel on the top choices of the hotel, things like to do, and their meal choices. The answer would eventually help me to layout the design to meet the business requirement. The questions related to the survey or interview would be:

  • What are the Business requirements or accomplishment
  • What is the most popular hotel or restaurant –their top choices, most popular ones
  • How many hotels or meals the passengers expect
  • What are the MUST have or NICE to have

“The overall process is too complicated, and I give up.”

Weiwei, 30+, Manager

As I discovered in the research phase, I got closer to the users. To list some of their pain points:

  • “App cannot detect the accurate address, and users cannot type themselves.”
  • “App is clunky, and there is not enough variety of food.”
  • “I want to book my meals earlier and easier.”
  • “The content is not clear about what I want to know about the hotel.”

Keeping these things with POV in mind, to help passengers take less step and get all-set, will be achieved through these three goals:

  1. Help passengers find the hotel and Restaurant that fits them perfectly
  2. Make it fast and easy to use for everyone everywhere.
  3. Give passengers more control over their time.

Now we know what we want to achieve through the UI, so we can start designing.

IDEAT

The card sorting help me to find out the MUST to have and the NICE to have:

  • the MUST have from the Business Rules
  • the NICE to have for these out of the scope, later on, selected features

I sketched my vision and shared it with potential users. These brainstorming sessions went around a few times.

After a couple of paper iterations, I had a general idea ready, so I switched to Sketch, where it’s easier to move things around.

This was the final result of the user flow after a couple of iterations in Sketch:

Users will receive an email with details and a link to a responsive web page. They may not get the AA app download, and they may not high-technique person, but they always have their phone.

Instead of a way to decline the offer, I simply give them an expire date to use the link to select which amenities users want to take advantage of or not.

Each tab represents a different cycle in the users progress towards booking, and as the user gets closer to his/her goal s/he moves through the navigation from left to right.

Going into detail for two most important parts in the user flow:

Exploring

To help us achieve goal #2, the explore view does not have many filters. The date was automatically set up. The only filter available is the amount of room. This makes sure s/he’ll easily find the best match. As there are multiple passengers on the reservation, they will need to choose how many rooms they prefer.

To also address our goal #2, based on our user study, we determined to list Top 5 hotel options to offer. Each card shows a summary of the hotel’s features, highlighting the distance and rates. Users can book the hotel at this stage without a tap into the hotel detail page.

Users may select meals, hotels, or both. The primary focus would be the hotel selected. As long as he has not completed the order, the user can go back to change his selection, or go forward to skip hotel selection. If the user presses the Skip button on the main page, s/he immediately arrives to select meals.

Most hotel booking products show all possible info, which complicates the product and makes it hard for the user to make a decision due to information overload.

Here I’ve opted to only show the information relevant to the user’s situation. The app’s goal is to find a hotel that fits you, not to look up all possible information.

All the core information and action are visible above the fold.

Based on this information the user could choose to favorite the hotel or book it. This goes a long way towards achieving goal #1.

Booking Confirmation

User may make the selections, and together with the meal or not. From there, s/he submits the order.

To help us achieve goal #3, another email will confirm the information. Upon confirming a hotel selection, a check-in code and confirmation number will be provided. Then they will always have the email on hand. They will not get frustrated about “where’s my confirmation notes” because they cannot go back to the website to look at that confirmation. Users can click the confirmation email with a link to generate their QR code for download.

Meal vouchers are valid only for that day and the whole value must be used during the same transaction. A QR code should be used for redemption. The voucher amount is $12 for food and drinks per person and this excludes alcoholic beverages. If this amount is insufficient to cover their meal, they will need to pay the balance on their own.

This is my process for the UX Flow. If there were any challenging interactions, gestures, or animations, I would move to Framer at this point to do some prototyping. Since there are none, I’ve (unfortunately) skipped this stage.

High fidelity

The explore view does not have many filters. The booking date was automatically set up. The only filter available is the amount of room. This makes sure s/he’ll easily find the best match. As there are multiple passengers on the reservation, they will need to choose how many rooms they prefer.

Based on our user study, we determined to list Top 5 hotel options to offer. Each card shows a summary of the hotel’s features, highlighting the distance and rates. Users can book the hotel at this stage without a tap into the hotel detail page.

The top of the page basically already has all the necessary information: the booking date, room amount, pictures of the room/hotel, distance, price, rates, top amenities, and top reasons to book.

From Nowhere to Now Here