Project Overview:

Pan American Airways is making a return after a long absence from the industry and is looking to have a fully responsive website that encapsulates their brand’s required characteristics of being highly aspirational to their customers and of an airy elegance.

Roles: Research, UX & UI Design, Rebranding

Tools: Figma, Optimal Sort, Whimsical, Maze

Duration: 80 Hours

(*This project was part of UX Academy’s curriculum.)

Design Process

Competitor Research -

Competitors were selected based off of their size, similar corporate culture, in addition to the levels of branding & marketing of the old Pan Am. Much of the work during this section was to understand layout and features of each website, as well as to see how they compared to each other for common tasks a user might complete such as preflight check-in, ticket purchasing, and flight management.

User Research -

Our travel experiences are influenced by our inane preferences from original brainstorming till our return home; few plan the exact same trip if left to their own devices. Because of this, five potential users with differing airline ticket purchasing habits were interviewed to better understand how users go about purchasing airline tickets, so as to better design for a wide variety of users.

Additional insight was gained through an Optimal Workshop survey sent out to 10 anonymous users through Designlab’s Slack channel. Much of the questions were the same as the interview, with several being open ended to allow users to explain their reasoning behind their habits.

Common themes found between all users:

• Cost is the primary influence when deciding on purchasing a ticket, and enjoy fees to be clearly marked and explained.
  

• Users complained about being required to input the same information multiple times during the purchasing process.
  

• Users will compare airfare between multiple sites before trying to purchase a ticket. When they start a purchase flow, they plan to finish it.

• Participants used computers, tablets, and phones to buy their airline tickets through, emphasizing the need for a fully responsive site.

Persona -

The information gathered was then used to fashion a persona that encompassed much of the traits found within the interviews and surveys. Since most of those questioned talked about price being a determining factor in their purchasing choice, though are still usually able to fly multiple times a year, the archetype “Nouveau Jet Set” was coined to encompass the similarity they share with jet set of old (with multiple flights each year) as well as the new phenomenon that it is no longer just the rich or famous traveling by air.

User Flow (Below) -

Because multiple users expressing complicated purchasing processes and frustration with frequent re-entry of information during checkout, special attention was paid to complete a ticket purchasing flow that was simple and streamlined for the types of users found during the research phase. This led to a single user flow that was able to accommodate multiple purchasing habits, such as flexible dates and promotional trips. When a user found the flight(s) they wished to purchase, they are to be presented with a a minimal number of screens (passenger info, billing info, and pre-purchase confirmation page.) to make it as straightforward and simple as possible.

Task Flows (Left)

Before organizing the primary user flow, two preliminary task flows were constructed to provide a framework for the future user flow and site map. Because multiple users cited flexible dates as an important feature, it was integrated into the primary airline booking flow as situational for the users who require it.

Site Map (Right)

Research gathered during the competitive analyses was largely used to understand what additional pages should be included on the site outside of what was a part of the user flow that had been already created.

Ideate & Design - Wireframes, Branding, & UI

With a clear guideline of what pages a user expects from an airline’s site, work could begin on creating the visual design of the website in the form of screens, UI, and branding.

Preliminary Logo Redesign Attempts -

Before much more progress could be made on the design of the site, one of the requirements for the project was to help develop Pan Am’s logo and branding for the digital age. However, because part of what makes Pan Am so iconic is the branding and logo they once used to use, only mild variations were created to help bring their logo up to speed while keeping it highly recognizable to their customers. The logos were first sketched out on paper before being vectored out within Figma.

Partially due to their previous branding strategies, two primary logos were decided on. The first, a circular one to be used largely as a smaller icon or where width is limited. And a secondary, deconstructed and rectangular one as the more legible logo where there is space to use it.

UI Kit -

With the logo figured out, work began on coming up with the UI. Multiple text input styles were tried out before eventually settling on Material’s outline text field style for its clean and sleek styling, as well as easily identifiable look.

High Fidelity Screen Mockups -

With branding and UI taken care of, high fidelity screens were then created using the UI kit from the previous wireframes for desktop, mobile, and tablet. Stock imagery was used in place of properly branded imagery due to time and budget constraints, as well as limited availability of relevant imagery.

Prototype, Testing, And Project End

Prototyping was originally done for the desktop version within Figma for its speed, as well as ability for additional component states during testing. The desktop prototype was then uploaded to Maze to gather additional insight during testing, such as misclicks and time spent on each task. Users were assigned 2 tasks to complete:

1. To fill out their information to begin searching for a flight.

2. To go through the ticket purchasing flow.

Three participants were recorded while completing the tasks through Maze, and their results were analyzed and turned into an Affinity Map for insight into the flow’s convenience and for future steps to take with the design.

Testing Results -

All users were able to complete the tasks assigned to them within the span of 5 minutes. Each expressed that the experience was easy, and felt it was an overall joyful experience to use. There were several instances of misclicks during testing for each participant however, but was due to ambiguity in testing language within the assigned tasks. Additionally, two participants mentioned some items felt slightly out of scale, primarily the hero image being somewhat large, amount of whitespace used, and some section titles. Some suggestions made by participants for future versions were:

• Additional input from the user in the form of filters in later testing revisions

• Better textual hierarchy for clearer labels on items

• Banking or payment graphics to establish trust with the user when going through the billing screen

• And option to use loyalty points/WorldPass points from the start of the flight search

Key Takeaways:

I found building an airline website to be really pushing my comfort zone, and especially did not realize the amount of work that goes into components (when comparing to my previous projects to date.) I will say trying to design the website during the COVID era added a few extra surprises I had to maneuver around or incorporate into the design, but the added challenge was good experience regardless. Perhaps the toughest part was during testing, as I’ve had minimal exposure to it before this, but believe I was still able to get some great feedback for future versions of this project in the future. Lastly, due to restrictions and closures during COVID, the project had a constant melancholic air to it, but still has me daydreaming of traveling again when things open up internationally.