top of page
Pan American World Airways
Project brief
Designing a responsive website for Pan Am
April/May 2021
Defining the problem

Once the most famous name in the skies, a series of misfortunes pushed Pan Am into bankruptcy in 1991. After a rival merger however, Pan Am sees an opportunity to regain its former glory by offering a flying experience that's a cut above the rest.

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 and online check-in of flights. 
Scope
​

Designing an responsive website

Role​
​

UX Researcher

UX/UI Designer

Tools
​

Figma

Whimsical

Gloomaps

otter.ai

Duration​
​

2 weeks / 80 hours

"How might we create a booking process that is engaging, informative and simple to use?"
 
Project Goals​
​
  1. Create a next-level user experience for their core digital flow involving the booking and online check-in of flights.
  2. Focus on a redesign of the brand, specifically with a more modern feel, to keep the essence of the original Pan Am alive
Image by César Couto
1.
Research
  • Secondary Research
  • ​Competitor analysis
  • User Interviews
  • User persona
2.
Define
  • Feature wishlist
  • Site map
  • Task flow
  • User flow
3.
Design
  • Sketches & wireframes
  • Style tile
  • Ui Designs
4.
Test
  • Usability tests
  • Affinity map
  • Final iterations
1.
Research
Research
Research goals
  1. Understand the greatest frustrations/pain points users have when searching for flights, booking flights and checking in online
  2. Identify and review Pan Am’s competitors to see how they are attempting to alleviate this problem for their users
  3. Consider how I can present real-time notifications to users who don’t have the Pan Am app installed
Secondary Research
I did 2 things which really helped my understanding of Pan Am as a company:
 
  1. I watched this fascinating hour-long documentary on YouTube
  2. I read a book called Skygods, which covered Pan Am's history, right from its inception by businessman Juan Trippe in 1927 to its fall in 1991.
Competitor Analysis
To understand which features and functionalities rival airlines offer and how they present results for fare searches, I conducted a competitor analysis.
 
I was surprised that none of the airlines offered a feature to allow the user to filter their flight search by the cheapest time of the year – a key user goal I uncovered later on in the research phase.

I also learnt that KLM was the only airline to consider accessibility for visually-impaired users and offer a toggle to increase the visual constrast as a result.

This exercise really helped me to prioritise certain features and also how to stand out from the crowd.
Interviews
With the findings from my competitor analysis, I began preparing an interview script for my next deliverable. My goals were to:
 
  1. Identify which features users require when booking flights online
  2. Pinpoint the greatest frustrations users experience when trying to purchase flights online
  3. Discover how an airline might make a booking experience enjoyable 
​
In addition to this task, I also had my participants go through the booking process at www.jet2.com. I found out that that this airline's website won an award on account of its usability, so I was keen to see what (if anything) my participants enjoyed about their process as well as any frustrations they encountered.
Key Findings
Goals
Frustrations
Needs
Motivations
User persona
To ensure that I would keep the user's needs and frustrations in mind when creating my screens, I made a user persona.

I made sure to include what I felt were any key insights from my user interviews in Jeremy's background, and referred back to this deliverable when considering UI design decisions later on.
2.
Define
Define
Feature Wishlist
Returning to the project brief, I started by adding functions such as a search, online check-in and a checkout process as 'must haves' as they were key to the business goal.

Features such as a real-time notification system on mobile were less essential, so I categorised them as 'Can come later'.
Site Map
When browsing the websites of rival airlines, I noticed just how many pages they had embedded in their sites.

So, to help me decide where I wanted my pages and sub-pages to go, and to help the developers understand how these pages should be categorised, I created a site map.

In this visual map, I used everything from inspiration from my competitor analysis to key insights from user interviews, such as the importance of having access to the airline's Covid-19 cancellation policy.
Task Flow
How might Pan Am's check-in process work? I reviewed the notes from my user interviews as well as brainstorming the many times I'd gone through this process when taking flights of my own.

To provide a visual aid of how the user would get from the homepage to confirming their check-in, I created this simple but effective map.
User Flow
I'd considered the check-in process, but what about the flights booking process? Reflecting on my own experiences and that of my users, this is often not a simple journey. The user usually encounters blockages, and has to tinker to get the desired end result.

What might these blockages be though? And how could I help to user to overcome them? I went more in-depth than in my task flow, and mapped down every frustration I could think of.
3.
Design
Design
Sketches & Wireframes
Reviewing my notes again from my competitor analysis, I noted the visual elements on these websites that I enjoyed and thought about why I felt these designs were effective.

I also browsed Dribbble and savee.it for visual inspiration.

Then I turned away from my screen and began sketching ideas for the key web pages needed for Pan Am's flight search process, using a form of the crazy 8 exercise to get a variety of ideas for my homepage down on paper before further iteration.
After receiving feedback from my peers regarding my sketches, I picked what I felt were my strongest sketches and began putting these wireframes together in Figma.

I appreciated the modern and aesthetic feel that tiles emanate, so placed these in various different sizes throughout my wireframes. 

I also liked design elements I had seen in the past from companies such as Airbnb and how they have placed translucent text boxes over photos to offer the user some context before they clicked, so was keen to emulate this idea for my deals of the month section.
Landing Page
Mobile Landing Page
Search Results
Flight Summary
Style Tile
Logo
 
I started by exploring the company's evolution of logos right from its inception in 1927 to the more minimalist sphere rebrand in 1955.

So iconic was the this sphere logo that I decided to emulate this style for the 21st century. However, I refreshed the colours, opting for an eye-catching blue gradient as my primary colour and thin, stark lines throughout to draw further attention to the sphere.
 
I had ascertained from my research that in its 50s and 60s heyday, flying with this airline was seen as the height of luxury travel. So, in a 60s throwback, I opted for Pacifico for my logo's typeface.
 
Typeface
 
Seeking a modern and clean typeface for my headings and body text, I experimented with many styles on Google Fonts before settling on Inter.
 
Colour Palette
 
Whilst I was somewhat limited with regards to the colours I could work with (the project brief stated that blue and white were to be the primary colours), I used the same blue gradient from the logo as my primary colour and a sky blue as my accent colour.

I kept things very simple from here onwards and opted for shades of off-white and charcoal as my final (neutral) colours.
UI Screens
After iterating on my wireframes, I considered again the designs I had sourced as inspiration and considered how I could emulate the work of these designers by putting my unique spin on things. Then, I began crafting my high-fidelity mockups.

On the landing page, I added suble touches of drop shadow to help certain elements to stand out.

In the search results and booking summary screens, I added minimal splashes of colour to draw attention to important elements such as flight times and flight classes, as well as showing the user which flight was the cheapest or most environmentally-friendly.

I also included other elements such as tooltips for airport codes – something that users remarked as being a helpful when presented with confusing airport codes such as YYZ or CDG during the bookings process..
Landing Page
Flight Summary
Outbound search results
Return search results
4.
Test
Test
Preparing the prototype
Once I'd finished my UI screens, it was essential that I tested my prototype to etablish what was working well and where users might encoutner problems.
​
Test Objectives
​
  1. Understand the user’s first impressions of Pan Am’s homepage.
  2. Examine the ease at which the user is able to complete the flight search and bookings proces
  3. Observe at whether or not the user is able to sign up for text alert notifications
  4. Identify any frustrations the user experienced
View Prototype
Methodology

I interviewed 4 participants via moderated usability testing and had them undertake these objectives whilst they shared their screens.
Test results
Participants:
  • 4
  • Ages 23-32
  • All have experience of purchasing flights online
Outcome (flight booking):
  • 100% completion rate
  • 100% error-free rate
Outcome (mobile notification signup):
  • 75% completion rate
  • 75% error-free rate
Pros
Cons
Affinity Map
Prior to undertaking my final iterations, I mapped the insights provided by my participants into a visual document.

This affinity map really helped me at a glance to identify which of these test objectives users were struggling with the most, and within that, if they all encountered the same problem.

I include a snapshot of the map below and a link to the full map also.
Conclusions
Conclusions
Coming from a background in the travel industry, I always had an idea in mind of undertaking a travel-related design project. I truly enjoyed reinventing Pan American and found it inspiring to be working on such an iconic name within the aviation world.

Looking back, watching the Pan Am documentary and reading Skygods (mentioned in my initial research) was time well spent. These two sources of information helped me to understand the brand and realise that in its heyday, a flight with Pan Am was more than just a flight. It was an experience like no other.

In terms of my designs, practicing Figma's auto-layout and component functions whilst undertaking this project were investments in themselves, as this really saved the time it took to create certain elements within my screens.

If I were to do this case study again, I'd strongly consider doing a card sorting exercise to help my website's information architecture. I believe this would have made the process of creating a site map easier.
Next Steps
Next Steps
Now that I'd implemented my final iterations, I'd be keen to do a 2nd round of usability testing.

Time constraints on this project meant that unfortunately, I was unable to design a web check-in process nor replicate the flight search process on mobile. Therefore, going forward I would also prioritise these.
Any questions? Fancy working together? Hit the button and let's chat.
bottom of page