Personal Project
Pan Am - Airline Website for Flight Booking
Role: Research, Information Architecture, Interaction Design,
UI Design, & Usability Testing
Project Overview
Background
(This is a fictional project)
Pan American Airways, commonly referred to as “Pan Am”, was the principal and largest international air carrier in the United States from 1927 until its collapse on December 4, 1991. For this fictional project, I was using it as an exercise to work within an existing, iconic brand in the transactional realm of airlines, and at the same time, to practice translating and refreshing an old brand. Below is the design brief:
" 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. 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. "
In this project, I focused on creating the e-commerce transactional experience of their website, which involved the browsing, search, and booking of flights.
High-Level Design Goals
Design a website
- Design an e-commerce website that covers the main functionality: browse, flight search, and flight booking
Redesign the brand
- Redesign the brand with a more modern feel, keeping the essence of it still alive.
- Brand message: elegant, playful, hip, aspirational (but not "luxury")
Challenge
Research - Research is tricky on this one because flight booking is something so familiar to us, so there’s little space to do things completely differently.
UI & Visual Design - It requires a lot of balancing to refresh and modernize an iconic and beloved but very old brand, and at the same time, still keep its essence to make it relatable. The artifacts I could refer to was relatively limited since there wasn't much online presence of Pan Am at its time. There was also a big gap between its classical brand style and what's considered modern now.
Process
Discover
Literature Review, Competitive Analysis, User Interview
Research Goal
-
Identify the characteristics of Pan Am's brand message
-
Identify some good design patterns and gaps existed in other airline websites and flight-search engines
-
Learn about the aviation market trends and potentials in the digital experience realm
-
Gain insights into traveler's flight-booking behavior and where they want things improve
Literature Review Findings
Existing Pan Am's Branding Images:
Interesting Facts about the Company for Design Insights
-
Pan Am hired a design firm to ‘modernize’ their image in order to try and appeal to a younger traveling demographic. (1970s)
-
Pan Am abandoned the Helvetica style logo with a return to a slightly modified ‘windswept’ logo. (1973)
-
Pan Am went bankruptcy by soaring fuel prices and the shift towards a premium image.
-
Pan Am was proactive in the creation and adoption of new technologies.
Aviation Industry Trend Findings
-
Maneuvering between both the online and offline channel to deliver a seamless experience to customers
-
Leveraging social components and building them into the services provided to customers
-
Exploring new ways of revenue-generation and increasing per-customer revenue via ancillary products and services across the value chain
Flight Search and Booking Behavior Trend
-
The majority of travelers still believe that their best bet for top fares and offers is direct from the airline.
-
Travelers believe that increased transparency on price fluctuations over time and more accurate information on flight connection times will improve their search process.
-
The majority of travelers still like to book flight tickets on their computer instead of mobile devices, feeling that they possibly either not getting the best price or missing important information on mobiles.
Competitive Analysis Findings
Interview Findings
I accomplished 4 contextual interviews to investigate the participants’ flight booking experience, and learned about the tools they used, things they liked about the tools, things they found painful, and things they wished to be available.
Needs (likes or things found important)
-
Smooth to use - easy booking with fewer clicks, animations in UI
-
Historical fares
-
Fares of near dates
-
Flexible date picker, or flexible search based on budget and trip duration
-
Reward points system
-
Price tracking or monitoring
-
Intelligent search results ranking and best value recommendations
Pains
-
Too much text to read on some sites
-
Unknown fares on some flight search engines (they usually chose to ignore those tickets).
-
Inappropriate default information filled into passengers' info section
-
Non-responsive websites
Define
Persona, UX Strategy Blueprint, Information Architecture, Sitemap
Persona Development
I identified patterns from multiple interviews and created a persona as an agent of one important types of our target users. The persona realistically represents the goals, needs, and frustrations of that group of users.
UX Strategy Definition
In order to determine the scope, the focus, and an executable plan, I reviewed the business goals (mainly from the project brief), research findings, and my available time and resources to develop a UX Strategy Blueprint to guide the project.
Information Architecture - Sitemap Creation
By reviewing the product features, and imaging how the primary persona would work through Pan Am's website, I created a sitemap to demonstrate the website’s main structure and navigation flow. The relationship between different content on the site was mapped out.
Design
Sketches, User Flow, Wireframe, Logo Design, Brand Style Guide, UI Design
Sketches
I created 2 sketched variations for the homepage, exploring the possible design directions I could go with later. Then I decided on the first one because this layout would allow Pan Am to better promote their business.
User Flow
With the persona and user tasks in mind, I created a user flow taking into considerations of different paths that a user would follow to achieve their goals for searching and booking.
Wireframes
Based on the user flow and my earlier sketches, I created a set of wireframes showing the layout and some key interactions on several pages that allow users to search and book flights.
Visual Design - Logo Design
Since the focus of the project was not on the identity design, I didn't spend time to revolutionize the logo, but went for simplicity and tried to let the logo stay close to the original Pan Am logo redesigned by the firm, Chermayeff & Geismar & Haviv, in the 1970s.
I learned that the aim for that redesign was to "modernize" Pan Am's image and appeal to younger travelers and that the new logo got abandoned with a return to a slightly modified ‘windswept’ logo. With that in mind, I decided on a modern and hip style instead of a purely simplistic version.
The Old Pan Am Logo
The New Logo Designed
UI Design - Earlier Version
Working from the wireframes and the logo produced earlier, I created the high-fidelity UI mockups. The design intention was to create a visual style that matched the original Pan Am brand color - blue and white - and at the same time looked modern, elegant, and hip. I meant to make it feel ambitious but not luxury or pushy.
Testing
Prototype, Usability Testing, Affinity Mapping
Usability Testing
I created a clickable prototype in InVision and a detailed test plan to test the flow defined in earlier stages. 4 usability testing sessions were then conducted. Issues and feedback came out of the sessions were documented. Here's the link to the prototype used:
Testing Results Synthesis - Affinity Mapping
I compiled the notes taken from the testing sessions and did affinity mapping to categorize the findings and recommended changes both for the short term and for the long term.
Iterated Design
Iterations were made to address the testing findings. Below are some page demos.
Conclusion
What I've Learned:
Difference between designing flight search engines and airline websites
Conflicts between the business needs and user needs are sometimes inevitable when it comes to designing an e-commerce website. In the process of designing Pan Am's website, I ran into challenges of whether to incorporate certain features into the website. There were features desired by my research participants to help them save money, like fare tracking and fare prediction, easy baggage fee calculation, and highly transparent information display. Some of them are commonly seen on flight search engines these days. However, from an airline business perspective, the company might not want to provide such utilities to prevent users from spending more. Finding balance was challenging.
I leaned towards benefiting the users following my research results in this project. However, I was aware that in real-world situations I might need to make trade-offs, which could involve fierce discussions with various stakeholders.
​​
​
