During the interview with American Airlines, here’s my story of the design of Hotel and Meal Vouchers on Canceled Flight. The exercise took me roughly 10h to finish, including writing 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 and its regional partners operate 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 air travel service to the extensive selection of destinations 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 is 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.
- 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 multiple passengers are on 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, excluding alcoholic beverages. They will need to pay the balance independently if this amount is insufficient to cover their meal.
- There needs to be a way to decline the offer.
- They may select meals, hotels, or both.
What I did
As the product designer, I conducted the research, information architecture, and designed 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 my decisions.
Note that the scenario only mentioned “my friend and me,” so they were my main focus in the course of this exercise. I made sure that all designs would work for other passengers as well.
Time spent on the exercise: ~10h (including writing this “case study”).
Take fewer steps; Get all set.
Passengers who were on this flight got the flight canceled. This was a very frustrating and disappointing situation due to the weather issue. Outside was cold. People need access to a place to stay the night, a meal to eat, and take some rest for the earlier flight tomorrow. The web page must be easy to access and got everything set quickly, usable, and efficiently.
My original premise was simple: take fewer steps, get all set. My 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
Before I started 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 were in the market. I did find three that I thought were interesting (Expedia, Priceline, and HungryGoWhere). Even though they had different goals, what I wanted to know were:
- How did they make their hotel selections or meal selections
- What information would need to be shown
- What pieces of content should be in focus
- What other features did they have
- What were the good and bad features
- How were these features working
- How did the overall UI design look like
- What design patterns were consistent
- What were the users saying/commenting about them
Observe & Define
I took a close look at the project and broke it down into smaller chunks, which allowed me to focus on one aspect or feature before deciding what needed to be built next.
I planned to talk to the stakeholders about what were their big pictures. I performed user research to observe my potential users and drove deep to determine their needs and goals. The survey helped me understand the overall situation. The interview would prove to be a high quality of understanding of our users.
I meant to find out what people were looking for during the decision-making. What did they like? What were the top choices, like the most popular hotel around that area? What kind of meal did they want? So we would not pull out a whole hotel list like a hundred – they would get confused. I went out of my way to interview a few people who liked to travel on the hotel’s top choices, things they liked to do, and their meal choices. The answer would eventually help me lay out the design to meet the business requirement and the users’ needs. The questions related to the survey or interview would be:
- What were the Business requirements or accomplishment?
- What was the most popular hotel or restaurant –the top choices, the most popular ones?
- How many hotels or meals did the passengers expect?
- What was the MUST have or NICE to have?
“The overall process was too complicated, and I gave 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 unclear about what I want to know about the hotel.”
Keeping these things with POV in mind, to help passengers take fewer steps and get all set would be achieved through these three goals:
- Help passengers find the hotel and Restaurant that fits them perfectly
- Make it fast and easy to use for everyone everywhere.
- Give passengers more control over their time.
Here we knew what we wanted to achieve through the app, so we could start designing.
IDEAT & Design
The card sorting helped 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 would receive an email with details and a link to a responsive web page. They may not get the AA app download and may not be high-technique people, but they always had their phones.
Instead of a way to decline the offer, I simply gave them an expiration date to use the link to select which amenities users wanted to take advantage of or not.
Each tab represented a different cycle in the user’s progress toward booking, and as the user got closer to his/her goal, s/he moved through the navigation from left to right.
Going into detail about the two most important parts of the user flow:
User Flow 1: Exploring
To help us achieve goal #2, the explore view did not have many filters. The date was automatically set up. The only filter available was the amount of room. This made sure s/he easily find the best match. As there were multiple passengers on the reservation, they must choose how many rooms they preferred.
To also address our goal #2, based on our user study, we determined to list the Top 5 hotel options to offer. Each card summarized the hotel’s features, highlighting the distance and rates. Users could book the hotel at this stage without tapping into the hotel detail page.
Users may select meals, hotels, or both. The primary focus would be the hotel selected. As long as s/he had not completed the order, the user could go back to change his selection or go forward to skip the hotel selection. If the user pressed the Skip button on the main page, s/he immediately arrived to select meals.
Most hotel booking products showed all possible info, which complicated the product and made it hard for the user to decide due to information overload.
Here I’d opted only to show the information relevant to the user’s situation. The app’s goal was to find a hotel that fits the users, not to look up all possible information.
All the core information and action were visible above the fold.
Based on this information, the user could choose to favorite the hotel or book it. This went a long way towards achieving goal #1.
User Flow 2: Booking Confirmation
Users may make the selections, together with the meal or not. From there, s/he submitted the order.
To help us achieve goal #3, another email would confirm the information. A check-in code and confirmation number would be provided upon confirming a hotel selection. Then they would always have the email on hand. They would not get frustrated about “where’s my confirmation notes” because they cannot go back to the website to look at that confirmation. Users could click the confirmation email with a link to generate their QR code for download.
Meal vouchers were 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 was $12 for food and drinks per person, excluding alcoholic beverages. If this amount was insufficient to cover their meal, they would need to pay the balance independently.
This was 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 were none, I’d (unfortunately) skipped this stage.
The explore view did not have many filters. The booking date was automatically set up. The only filter available was the amount of room. This made sure s/he’ll easily find the best match. As there were multiple passengers on the reservation, they must choose how many rooms they preferred.
Based on our user study, we determined to list the Top 5 hotel options to offer. Each card summarized the hotel’s features, highlighting the distance and rates. Users can book the hotel at this stage without tapping into the hotel detail page.
The top of the page already had 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