Kaloyan Kaloyanov
Pan Am Header .png

Pan Am

 

Introduction

Pan American World Airways was the largest international air carrier in the United States from 1927 to 1991. The company was also the first to make commercial airline travel possible for many Americans. Although the company ceased operations in 1991 it is still widely remembered for its excellent service and unique brand. In turn, as an avid traveler who has always found the aviation industry to be fascinating, I decided to complete a capstone project based on Pan Am. The project tasked me with the creation of a responsive website for Pan Am.

Platform: Desktop, tablet & mobile responsive

Project duration: 2 weeks, July 2017

Roles: User Research, UX Strategy,  Information Architecture, Interaction Design, Prototyping, Usability Testing, UI Design, Branding

Tools used: Sketch, Adobe Illustrator, InVision, Google Docs, and Trello.

 

Challenge

The challenge for this project was quite complex due to the saturation of the airline industry. Today, domestic and foreign airlines are more competitive than ever. Additionally, many third-party services now offer easy ways to find cheap tickets which further complicates things. Due to this, I found it crucial to conduct focused user research in order to ensure that Pan Am would be able to offer an excellent digital product that would stand out among the competition.

 
 
 

UX Research

 

To kick off the project I created a Research Plan in order to outline how user research would be conducted and to define the primary research goals, research objectives, and the timeline.

Research Methodologies

Once the Research Plan was finished I began to gather data by conducting Contextual Inquiries to gain empathy with the target user base. I wanted to understand how and why frequent travelers find and purchase tickets. In order to accomplish this, I attended a travel group meetup in my area. The meetup proved to be a great experience as I was able to speak to members about their travel habits and uncover some interesting insights and pain points.

I also conducted a Literature Review as part of my secondary research. The secondary research revealed industry trends that helped to put my primary research findings into perspective.  

 

Research Synthesis

 

Once the research was complete the data was synthesized by creating an Empathy Map and a User Persona.

The Empathy Map was used to map out all of the collected research data and then extract key user insights and needs that I could design for. A User Persona was then created based off of the Empathy Map in order to better define the target user base and outline priorities, goals, frustrations and needs.

 

Defining the Problem Space

 

The next step was to create a Point of View Statement and How Might We Questions based off of the research data. This was done in order to focus on the discovered user needs and to create a solid foundation for the Ideate Stage of the project.

 

Ideation

During the Ideation Stage I used the How Might We questions I wrote to do a Brainstorming Session. The end goal was to brainstorm a variety of ways to answer the questions posed in a way that would delight users and alleviate their pain points and needs.

After the Brainstorming Session, I began to sketch sketch the main pages for the responsive website in order to begin thinking about what the website might look like.

 

Strategy

Next, I defined the Business and User Goals for the product which in turn helped me to uncover Common Goals that I could design for.

A Competitor Analysis and a Product Roadmap were then also created. The Competitor Analysis was crucial as it provided insights into the features and services offered by key competitors to Pan Am such as American Airlines Group, Delta Air Lines, and Lufthansa.

Meanwhile, the Product Roadmap defined the design goals for the product, the priority for each goal, and the features that each goal would need to have.

 

Interaction Design

Once the Product Roadmap was complete it was time to create a Sitemap and User Flows. The Sitemap outlined all of the pages that would be needed for Pan Am’s responsive website and the information that would be available on each page.

On the other hand, the User Flows mapped out how a user would potentially navigate through the website in order to easily purchase an airline ticket and also check in for their flight.  

Pan Am User Flow v2.png

During the last and largest portion of this stage of the project I created responsive Mid Fidelity Wireframes. First, I sketched all of the pages defined in the Sitemap on paper. After that, I recreated the pages in Sketch.

 

Mid Fidelity Wireframes

 

Prototyping Phase

Once the Mid Fidelity Wireframes were complete I created a Prototype in order to test the usability of the product and to also test my assumptions on how users would interact with the interface.  

 

Usability Testing

 

Next, I conducted four usability tests with testers within the target user base. I did this by creating a Usability Testing Plan and outlining the main goals, objectives, and tasks for the testing.

Once the usability tests were completed the data was synthesized by using an Affinity Map. I used the Affinity Map to map out the test data and clearly outline what parts of the design needed improvement and what parts worked well. That allowed me to update the wireframes as needed in order to increase and improve the usability of the product.

 
 

UI Design

In the last stage of this project I worked on modernizing the Pan Am brand. I decided to modernize the brand in a way that would be recognizable in order to stay true to the rich history and popularity of the airline. To accomplish this I began by creating Mood Boards which helped to brainstorm ideas for the new Pan Am logo and overall brand. Refreshing the logo while keeping it recognizable proved to be challenging. However, I enjoyed the process as it allowed for creativity and a lot of practice with Adobe Illustrator.

After the logo was done I also created a Style Tile for the brand in order to find typefaces and colors that would fit the brand well. I did this by exploring typefaces via Google Fonts and many color palettes on Dribble until I found a combination which fit Pan Am’s guiding attributes.

Lastly, I created the High Fidelity Wireframes for Pan Am.

 

Mood Boards

 

Style tIle

 
 

High Fidelity Wireframes

 
 
 

Next Steps

Researching the airline industry and designing the Pan Am responsive website proved to be a challenging and fun project. I learned quite a bit about both the aviation industry and responsive design while working on this product. Next, I am looking forward to expanding the Pan Am website further in order to continue improving my UI skills. Additionally, I would also like to continue working on the branding for this product. I would especially like to create a new version of the logo for Pan Am that scales a bit better.