Pan Am

The World's Most Experienced Airline

Curating a Flight Booking Experience
Product Design (UX/UI)

9 weeks - 80+ hours

Tools used:
Miro / Figma

This project is a fictitious scenario, completed as a part of Designlab's UX Academy.
View Final Prototype
Pan American World Airways—known as “Pan American Airways” since the company’s founding and then commonly referred to as “Pan Am” after 1950—was the principal and largest international air carrier in the United States from 1927 until its collapse on December 4, 1991. In the wake of Virgin America’s acquisition by Alaska Airlines, Pan Am sees an opportunity opening up for a flying experience that’s a cut above the usual. ​They plan on launching a new airline in 12-18 months and are looking for a streamlined, well-thought-out user experience to match.
Although an app is in the long-term roadmap, it’s not the first focus at the moment. Instead, PanAm wants to start with a responsive site that doesn’t force users to download and install anything. While desktop still brings in greater overall sales (note: big-ticket, considered purchases are often the last to shift), a future-focused airline needs to imagine a future welcoming of all types of device and screen size usages.

Pan Am wants to make a very strong comeback, and for that they will need a ​next-level user experience for their core digital flow involving the booking of flights.
Project Goals
Create a responsive website that curates a next-level user experience for booking flights

01 / Empathize - Exploring the User's Needs

  • Research Approach
  • Competitive Analysis
  • Customer Interviews
Research Approach

To get a better understanding of the current market and expectations of the potential users, I employed two research methods--competitive analysis and customer interviews. For the competitive analysis, I examined direct and indirect competitors and conducted research on current trends and obstacles as well as future trends of the industry.

The goals for my research process was the following:

  • Discover design patterns that potential users are accustomed to currently on competitor’s sites.
  • Identify pain points and unmet needs during the flight booking process for potential users.
Competitive Analysis

To get a better understanding of the current market and expectations of the potential users, I employed two research methods--competitive analysis and customer interviews. For the competitive analysis, I examined direct and indirect competitors and conducted research on current trends and obstacles as well as future trends of the industry.

I also created provisional personas for each of the competitors to start imagining who the Pan Am persona would be. With this in mind, I proceeded to the Customer Interviews.

Customer Interviews

For this project, I recruited 5 participants who shopped online within the last year. (Because of the current pandemic, many people are not flying. Several participants had traveled within the last few months but a few were further out.) The age of participants ranged from 23 to 35; 4 identified as female and 1 identified as male.

Here are some general insights I observed:

  • While all the participants were price-conscious, other factors influenced their booking habits.They all mentioned price to be one of the most important factors but it wasn’t always the top reason. Comfort and convenience concerning departure/arrival time, flight length, number of stops, size of seat, and service were taken into consideration, especially with international flights.
  • Most of the participants were willing to pay more for a better flight (comfort, convenience of departure/arrival times, flight length, direct flights). When it came to international flights, participants all mentioned that they would book the more comfortable/shorter flight for a higher price.
  • Two participants had specific circumstances that prompted them to look for specific features on a flight (service animal boarding, seat size via Seat Guru).

    - When traveling with an animal, the participant is willing to pay more to minimize any inconvenience. She liked that American allowed her to submit contact information during the booking process so that the airline contacts her. (United requires her to look for the right page within several pages for the documents to fill out then send. This is one of the many reasons why she usually travels American).

    - And because of size issues, the participant will always make sure if the seat were at least 18 inches wide unless he already knew if that airline worked for him or not. He would prefer if this information was available so he didn’t have to go to another website to find it.
  • Most of the participants searched for direct flights and said that they would not book a flight with more than 1 layover. And if they do have a layover, they care about how long it is. So if there are more than several flights, they use the filter function or look for the non-stop/direct section.
  • There was a mix of direct airline booking and third party sites. One participant has been recently booking through only American or United because it provides a direct flight to her parents’ home in Virginia (a trip she makes at least 1-2 times a year) and they both accept service animals. Several participants use Google Flights that directs the user to complete the booking process from the review itinerary page on the airline website (Kayak also does this too). So although these participants shop on third party sites, they book on the airline websites. The other two participants have been a loyal customer of Expedia and Student Universe and use it for convenience and perks and the ability to look through a variety of sites in one place.

02 / Define - Establishing the User's Needs and Problems

  • Empathy Map Synthesis
  • Persona Development
Empathy Map Synthesis

During the interview process, I noticed that patterns were emerging. After I finished interviewing my participants, I synthesized the qualitative data I gathered into an empathy map.

"I am usually flexible on dates that I travel so I like to see if I could get the best price those weeks."
"I used to fly red-eye for the lower price. But
now that I'm older, I care about comfort and convenience as well -- such as, departure/arrival times, flight duration, and seats."
I don't like it when information is all cluttered and you have to really look hard for what you want."
I hate it when they deceive me to upgrade the flight. Just show me what makes it better."

Persona Development

Jeremy is a freelance videographer in Los Angeles. He is originally from Boston, MA. He gets plenty of gigs in LA. But since he’s from the East Coast and has friends and family there, he has built up quite a network there and travels often for work. On top of that, he loves to travel and see new places. So he’s always looking for an opportunity to go somewhere new and travel the world. He used to look for the cheapest deals but not anymore. Comfort and convenience is just as important as flight cost. He wants flights that fit his schedule and make him feel comfortable and at ease. He also tries to visit family in the Philippines every few years and plans an Asia trip when he does.

Meet Jeremy, the Budget-Conscious Comfort-Seeking Traveler

How might we make a streamline flight booking experience for a budget-conscious comfort-seeking traveler?

How might we address the concerns of the budget-conscious comfort-seeking traveler while booking a flight?

03 / Ideate - Creating the Framework

  • User Flow
User Flow

Pan Am is remembered as an airline that provides an excellent flying experience. With this in mind, I created a user flow that allows users to book a flight while also selecting seats in the process. With comfort and convenience in mind, this user flow gives the user more control over their flight booking experience.

04 / Prototype - Let's make the Design!

  • Sketches & Wireframes
  • Branding & UI Kit
  • Final Design

During my primary research, all of the participants booked their flights on their laptop or desktop, especially if they are booking flights overseas. So I decided to curate a flight booking experience for a desktop.

In my sketches, I implemented design patterns that I saw during my research process. Specifically, I enjoyed how Jet Blue branded their experience as well as Virgin Atlantic. For my third sketch, I wanted to capture the Pan Am spirit. So at the beginning of the homepage, I wanted to integrate photos of friendly stewardesses. Underneath, I included a world map that is interactive with each continent for the exploring spirit. In my fourth sketch, I tried to compile these ideas into one design.

Low Fidelity Prototype

To ensure a well thought-out flight booking experience, I tested a low-fidelity prototype with the wireframes I created based off the user flow. So I started by laying out all the pages needed to complete the user flow. From there, I continued my research of other airlines' booking experiences and filled each page with information that was necessary for that process.

View Low Fidelity Prototype
Low Fidelity Prototype Usability Test

I tested this low fidelity prototype on 5 participants. From this test, I was able to understand what vital pieces were missing and what was confusing. Here are some of the findings I used to improve my design for my high fidelity prototype:

  • Interaction - Several participants pointed out that they wanted more of a confirmation experience when booking departing and returning flights. Also one participant pointed out that she didn't like how the dates were pre-selected for flexible dates. She wanted it to select as she clicked on the appropriate box.
  • Confusing Seat Selection - Several participants were confused at what to do first when they landed on the seat selection chart because there were two things happening at the same time. Some pointed out that it would be nice once there are more details and if there were a legend.
  • Checkout Confusion - A participant was confused at the last confirmation page because the itinerary panel was the same. My mentor pointed out that because there were still prices, it seems like the user still needs to pay.
  • Getting excited for the trip - A participant mentioned how they like to share their itinerary with people she is traveling with or picking her up from the airport. Also another participant mentioned how after booking the flights it's the exciting planning phase and how it would be fun to see photos of where she is going.
  • It's in the details - Several participants were confused by the "Show All Flights" Button on the flight selection portions. They did not perceive it to be a filter function. So that will need to be reworded. Also a participant was particularly confused if the prices reflect roundtrip prices or individual flight prices. The number details were made up. So I will need to refer to realistic prices details for a more efficient prototype.
  • Auto-population of information - Participants mentioned how for the prototype it would be nice if the information would auto-populate. One participant was worried they would have to fill everything out.
Final Design
Home page Features
Home Page Features

For the responsive home page, I created designs for the mobile, tablet, and desktop. After researching various different airlines, I knew I wanted my homepage to include these features.

  • Simple Booking Panel- Some airlines try to implement photos with the booking experience. But in my observations, it's best to keep it simple and branded with the company colors, such as Jet Blue (a favorite of one of my interview participants).
  • A Friendly Face - As mentioned during my sketching sessions, Pan Am is known for their friendly faces and superb customer service. I wanted to visually represent that and have a one-stop-shop for major concerns regarding the airline (particularly amplified by the current pandemic).
  • Destinations we love - In addition to the friendly face, I also wanted to tap into the fun of flying all over the world by highlighting locations around the world. Participants mentioned they don't really look through the home page unless looking for deals and are trying to figure out places to go. So they can pique their curiosity by exploring where they can go with Pan Am.
  • Membership Perks - Here the user to learn more about the benefits of being a member.
Flight Selection
Flight Selection Process

In my research, participants are interested in booking the best prices for the weeks they are traveling. With a flight overseas, there is usually more planning involved and so they can be a bit more flexible with dates for the better price. So I included it as a part of the Flight Selection Process.

After viewing the prices for those weeks, user can browse through the flights that populate. Since I wanted to feature the ability to select seats before booking, I made it so that the user can select the cabin class from the seats button to land on the Seat Selection Page.

Checkout Process
Checkout Process

During the low-fidelity prototype, the participants did not notice the different steps to the checkout process at the top. So I added a progress bar with the brand color to show where the user is in the process.

In the Traveler Information section, the user can log in and their information is auto-populated for the user to confirm and proceed.

05 / Test - It's time to test the Prototype!

Usability Test Plan

I recruited 5 participants for the Usability Test. Four of these participants were also my research participants. So I made sure to recruit one participant who had never seen this project before.

Usability Test Objectives
  • Test participants ease of navigation and experience making a purchase.
  • Test if participants find the process intuitive and if there are any portions that were overlooked.
  • Identify any pain points or unmet needs in accomplishing the task at hand.
Usability Test Findings

I conducted 5 usability tests that were around 10-15 minutes each. Participants were able to complete the task with relative ease.  A few places they ran into problems were the following:

  • Seat Selection on the Flights pages (4 participants) - It took some time for participants to figure out to select their seats. They wanted to select the price and then the seat instead of the seat selection link at the bottom of the flight information
  • Returning Flights (3 participants) - Some of the participants were confused at why they were back to choosing flights. They thought they already had selected it, when they had just picked the departure flight. All eventually realized that they had not booked the returning flight and figured it out. (This could be because both screens look exactly the same except for content.)
  • Flexible dates chart (2 participants) - There was confusion about it just being returning flights because they only saw the top portion of the chart. They didn't notice that the chart reflect both departing and returning flights because they did not read the left side.
  • Seating Chart (1 participant) - She wanted a better diagram for the airplane, with labeling of front of the plane and back of the plane. Even though it might be self-explanatory, it’s nice not to think and just see that there. Another participant at first glance thought the aisle seats with no seats on its side were window seats. But then she quickly realized it wasn’t the case as she continued to look through.
  • Upgrading to Premium in the Review Page (1 participant) - She was confused about the $772 number and wondered if that was the price or it was additional. She then noticed the additional copy underneath and figured it out.
  • Filter function on the flight booking pages (3 participants) - They wanted to filter for direct flights only and sort the flights by flight duration and time to see what reasonable times were available.
Priority Revisions
View Revised High Fidelity Prototype
Priority Revisions

The most important revision was the change to the user flow. Now the user can select their seats after selecting the price, which will prompt a pop-up that shows the differences among the cabin classes and give the ability to the user to either continue booking or select their seats then. I also updated the color for economy because the previous economy blue did not provide enough contrast. To avoid confusion on the returning flights page, I removed the "Book with Confidence" banner with photo to differentiate it from the Departing Flights and bring more attention to the "Returning from LON - NYC" copy. I was also able to finish the confirmation visuals, add the Apple Wallet and Google Pay buttons, and update the photo for Premium cabin class to a nicer photo.

Next Steps & Take-aways

Next I would test this updated prototype to see if these changes improved the process. I would particularly want to confirm that the new user flow works better.

Reflections & Take-aways

This project took me much longer that I thought it would take. There were so many aspects to the booking process to consider. It was my second Designlab project so I was glad that I was able to build on my first project of Mosaic, the clothing ecommerce site.

Have any questions about this project?
I would love to talk more about it with you!