Once a pioneer of commercial air travel and synonymous with quality and class, Pan-American Airlines or “Pan Am” went out of business in 1991. They are now re-launching the company, with the aim of keeping their identifiable brand, but updating it for the modern age.
These are the high-fidelity desktop screens I created for Pan American Airlines. Keep scrolling for more information on how I got here.
These are the high-fidelity mobile screens I created for Pan American Airlines. Keep scrolling for more information on how I got here.
Background
Due to the fact that they previously went out of business in 1991, Pan Am didn’t have a previous e-commerce presence to build upon when it came to this re-design. I had to design a site from scratch, for a new generation of air travel that looks very different than it did when Pan Am was last an air travel power. Travelers are purchasing tickets online from a much larger variety of airlines than they were before.
Over the course of 4 weeks, I brainstormed, researched, iterated, tested, and re-iterated designs for a new Pan Am site. The user needed to be able to search for, book, and check in for flights, and they needed to be able to do so on both a desktop and mobile site.
Research
While e-commerce and especially airline sites have fairly consistent layouts, I wanted to perform research to understand the users, their needs, and their habits when purchasing airline tickets online. In addition to conducting user interviews, I also produced a competitive analysis of other airline’s sites to see what features and actions are common among Pan Am’s prospective peers.
I performed 3 interviews to get a sense of how users are interacting with airlines websites. When it comes to choosing a flight, price was the number one criteria by a wide margin. While my site was not necessarily able to decrease potential flight prices, this taught me that having the costs clearly presented was key.
While price was the main factor when choosing a flight and airline, convenience and ease-of-use were mentioned as well. Respondents cited information overload on other airlines’ sites and felt that the information presented could be done so in a simpler manner.
Design
After completing my interviews, I began to structure my site and started to build out the design. The first step was creating a sitemap. The major actions—searching, booking, and checking in, are all easily accessible, as is the ability to log into or create an account. While customer loyalty is generally waning, airlines attempt to combat this with frequent flyer and rewards programs. In addition to earning miles, having the user’s information available to pull when filling out fields later in the checkout process is important to create an efficient and seamless experience.
I then created user flows to represent how a user would interact with the Pan Am site and the choices they would have to make to achieve their goals.
Sketches
From there, I then created user flows to visualize the ways in which users would need to interact with the site. After creating user flows, I started to sketch low-fidelity wireframes of the screens for those flows.
I’ve included the initial sketches that lay out the route the user would take to search for, select, and purchase flights on a mobile device. To simplify and clarify the process, I included a progress bar to indicate how many additional steps the user has until they’ve purchased their flights. I also included all of the possible upgrades and add-ons in one screen to reduce clicks for the user.
Wireframes
From the initial sketches, I started iterating the screens as low-fidelity wireframes, seen below. In addition to the transferring the mobile screen sketches, I created wireframes for desktop screens as well.
These are the screens a user would encounter when searching for and selecting their flight on a mobile device.
After selecting the flights and signing into their Pan Am account, they are then prompted to enter their information and select any upgrades.
The user is notified on-screen when they have completed the checkout process. They can check in prior to their flight using the last two screens.
These are the initial screens a user would encounter when searching for and selecting a flight on Pan Am's website on a desktop.
The user is prompted to confirm the flights they chose, login to their Pan Am account, and enter in their information, if needed.
Next, the user can enter in payment info and select upgrades before completing the checkout process.
The user is notified when they complete the checkout. They also can check-in prior to their flight.
Tests
After designing the wireframes, I created a functional prototype to test the flow and experience of the site. Conducted remotely over Zoom, I had 3 respondents complete a series of tasks using the prototype, including the main actions of searching for, selecting, and purchasing flights.
The feedback was generally positive, though some refinement was required to better alert the users as to what actions they were taking when selecting flights. There were also fields added for the traveler to input their TSA pre-check and Global Entry ID numbers for convenience, as can be seen on the right.
Branding
Figuring out the branding for this site was refreshingly simple. One of Pan Am’s strengths in its heyday was the power of its brand. Despite being defunct for more than 30 years, many still associate with Pan Am with a classy, hip, and fun travel experience.
Building on the existing collection of logos, word marks, and colors, I decided on a few alternate shades of the classic Pan Am blue to use throughout the site.
For the fonts, I went with a pair of simple, yet stylish sans serifs to contrast the heavily-stylized serif font used in the official Pan Am wordmark.
High-Fidelity Wireframes
Conclusion
One of the largest challenges throughout the project was trying to balance the goal of improving an existing, familiar process without re-inventing the wheel. Searching for and buying airline tickets has become a fairly standardized process, and though it has flaws, I wanted to embrace the fact that users would recognize the forms and know how to proceed through them. I feel I was able to improve on the existing processes by presenting important information like price transparently and by reducing clicks when possible. Next steps would include further user testing and refinement of the UI.