.png)
Pan American Airways, an Iconic brand known to many around the world, met its unfortunate downfall in 1991. Pan Am is making a modern comeback, and their vision is to be a cut above the rest. My job was to create a responsive website with a modern and updated feel, and functionality that can compete with established big-name airlines such as Virgin and Emirates.
Problem Statement: A leisurely traveler needs a more efficient way to make sure they are getting the best price on a flight because the current market requires a lot of research through various third party websites and it can be a very tedious process.
Users and audience: The users of airline websites are incredibly diverse. Through my research, I discovered that my target audience would be millennials who travel for pleasure.
Roles and Responsibilities: Evaluation and research, information architecture, content strategy, user and task flows, app mapping, wire-framing low fidelity and high fidelity designs, prototyping, usability testing, visual design, branding, iteration and implementation.
Scope and Constraints: The scope of this project was to design a responsive website that successfully allows the user to go through two task flows: searching for and booking a flight, and then checking into that same flight. The functionality of the prototypes were focused around these two main user goals. Increased functionality is to be added later on.
.svg)
Solution: To create a workable solution to the problem was less than simple. The obvious answer would be to cut out the middleman (google flights, skyscanner, kayak, expedia) and allow users to compare rates through our website. However, this would be the absolute worst solution from the business perspective. Keeping the businesses interests in mind, I realized there was no feasible way to compare prices to other airlines without potentially deterring users from purchasing tickets through our site.. I decided that the next best option would be to compare our rates to our own website by letting the user know if they were getting the best deal, or if a similar flight was available for a lower price on a different day. I created a homepage and flight list that was heavily centered around booking a flight and letting the user know they are getting the best deal they can be.
I needed to understand our target users and their needs. It was important that I begin the project with a clear picture of what our audience would want, and where the current market is failing them.
Goals
The goal of this research was to better understand the air travel market and demographics and learn users' flight booking habits, focusing on their frustrations and pain points.
I conducted market research to see what was standard in the industry and what I could improve upon. Through secondary market research I was able to uncover a few key pieces of information:
- User’s complain that many websites have filter options that are easy to miss
- Airlines make it difficult to know that the users are getting the cheapest flight
- The airline industry is moving toward a more customer-centric model
Additionally, I found that younger people are more likely to fly for “private” reasons, meaning they take more leisurely trips.
-14% of people ages 18-29 reported 5+ flights in 2 years for ‘private’ reasons. Only 9% age 30-49 reported the same.
This market research was followed by competitive analysis.
Insights: All airlines have flight status, manage check in, booking options on the home page, some are in the nav bar and some are in the booking window. Airline websites are incredibly busy and have a lot of information to filter through.
A survey was conducted to gather more data about user demographics and flight habits.
The next step was to conduct 1:1 empathy interviews to develop a deeper understanding of how the users actually think and feel when booking flights.
Participants: 5 users ages 24-55 who have had experience booking tickets online and traveling within the last 5 years.
Summary of Interviews
Most people have the same experience when it comes to flying. They all seem to want to find a flight for the best price, that has minimal layovers and departs / arrives at a decent time.
- 100% of participants use a third party website such as SkyScanner or Google Flights every time they look for a flight to compare prices on different airlines
- 100% of participants end up booking through the airlines website when they find something they like to avoid extra fees, and also because the airline is reluctant to help them make any changes if they booked through a third party.
I created provisional personas based on my empathy interviews to help myself visualize the potential users of the product a little bit better.
It was time to make sense of my research and try to identify the problems and goals of my target users.
I read through my interview transcripts and transcribed notable points from each interview onto sticky notes, which I then organized into an empathy map that would help me articulate what I knew about a particular type of user.
A couple of things became apparent to me after conducting my research:
- Travelers want the best deal they can get (that fits within their individual needs)
- The primary source of flight information is never the airline website, but rather a third party website that compares flights across all airlines.
Knowing this information, I created a POV (or problem) statement to better articulate the unique challenge that I was facing.
User: A middle class individual traveling for leisure
Need: To find a flight for a good price that has decent arrival/ departure times and minimal layovers.
Surprising Insight: People are willing to spend a good chunk of time comparing prices on websites such as Kayak, SkyScanner, and Expedia, to find a flight for a good price. As frustrating as it is to sift through two or three websites to compare prices, users are likely to put in the necessary effort to make sure they are getting a good deal. Nobody particularly enjoys searching for flights, but the consensus is that they feel great about the reality of their travel after finding something that meets their needs.
A leisurely traveler needs a more efficient way to make sure they are getting the best price on a flight because the current market requires a lot of research through various third party websites and it can be a very tedious process.
From there, I was able to create a persona that captured my target audience in an individual personality that would help me throughout the timeline of my design.
HOW MIGHT WE
- How might we make it easier for users to compare flights on different airlines?
- How might we reduce the amount of time a user spends comparing flights and prices?
- How might we allow the user to find a flight that fits their needs, rather than having them work around what's available?
- How might we let the user immediately know the direct alternatives to the flight they have chosen?
The solution was clear to me: Create a feature that compares other airline prices to cut out middlemen such as kayak and expedia (unrealistic because the airline doesn’t have the best price then you’re driving business away.
However, having business interests in mind, I realized that it would be impossible to compare prices as thoroughly as third-party websites do without potentially directing users away from our website in the event that we do not offer the lowest price for a specific flight.
I wanted to create a feature that made the user feel like they were being heard and their needs were being met, but wouldn’t come at a loss to the business. After much thought, I decided my solution would be: Adding a feature in each flight option to let the user know that there is a similar flight they could take for less money. The intent behind this was to create a sense of transparency and user-centricity. On the business side, the users were only being directed to a different page on our website, and if their schedules weren’t flexible enough, they wouldn’t likely click the link anyway.
With a potential solution in mind, I began exploring the layout of the website. It was important to have the Information architecture laid out, so I began by creating a sitemap.
I began exploring the tasks that the users would have to go through. I knew the main flows on PanAm would be booking a flight and checking into that flight, so I created a User Flow for each of these tasks to help myself visualize how each step of the process would look.
I wrote out a UI Requirements document to have a reference point for which pages would be essential for me to design. This helped me make sure I was designing the correct pages for each of my flows.
I then began creating the first few sketches of my homepage. It was very important to me that the booking window was the main point of focus on the homepage, because it would be crucial for seeing higher conversion rates.
Once I was happy with the homepage, I translated my sketches into a mid-fidelity responsive wireframes using shades of grey. At this point in the design process I also wrote the copy for PanAm, the goal of which was to add a human element to the website.
It was time to finalize the branding for PanAm. Originally, I had planned to do a full re-brand. I wanted to make PanAm feel up to date and contemporary. After much thought, I realized that PanAm was an iconic brand and it would be highly marketable to keep some of the original branding, but update it to feel fresh and modern. The established brand adjectives would be: Playful, Exciting, Reliable, Hip, Trustworthy, Adventurous.
Color psychology describes blue as creating a sense of calmness, serenity, security, and trust, so I decided to employ Pan Am’s original blue and white, and use a monochromatic color scheme to add more color to the website.
Keeping the brand adjectives in mind, I found illustrations that would depict the PanAm brand and add some playfulness to the website. The next step was to choose typography that came across as professional, yet approachable.
After some of the stylistic elements had been finalized, I put them together into a style tile that would guide my high-fidelity versions of the design.
Eventually, I was able to use my design to create a comprehensive UI Kit that would be updated throughout the project
I went through a few versions of the homepage until I had something that I felt highlighted the correct information and emphasized the task flow that would ultimately lead a user to purchasing a ticket. I translated this design to tablet and mobile to create a responsive homepage.
On airline websites, the hero section of the homepage carries a lot of weight. Specifically on PanAm, the beginning of the booking and entirety of the check in process would take place in the hero section. I knew it would be difficult to design the same functionality for the mobile website.
Challenge: designing the mobile version of PanAm with the same functionality as the web version.
Potential Solutions:
- stack each option in the booking window vertically to save space
- create a mobile version of the site
I opted to create a mobile version of the website because it would be easier to organize the information into a cohesive and aesthetically pleasing way. I did this by separating the functions of the hero section into separate links that would take the user to the relevant page where they could then complete the task in a mobile friendly way.
After the homepage was designed for responsiveness, I then went on to design the rest of the pages that would complete the task flows of booking a flight and checking into that flight. The pages were then prototyped.
I tested my high-fidelity prototype on 6 users in remote moderated zoom calls. Of the 6 participants, 3 were male and 3 were female. All of the participants had experience purchasing plane tickets online.
Goals of research: to identify the flaws in the current design and to find opportunities for improved functionality (and design)
Summary
Overall, users had no issues with completing either of the two tasks they were instructed to complete. Although users had minor suggestions for improved performance and functionality almost all of them found the website “simple” and “clean” which was a relief. A majority of the users described the booking process as “straightforward.” Fortunately, there weren’t any critical or even serious problems with flows that prevented the users from finishing the task. The minor suggestions that were made were ranked into 3 priority categories (displayed above) and the Priority 1 and 2 improvements were implemented.
Quantitative Results
- 100% of participants completed both tasks
- 100% of participants labeled both tasks as “easy”
- 100% of participants reported that they could see themselves using the website
Qualitative Results
Based on the data gathered during user testing interviews, I transcribed important bits of information onto sticky notes and organized an affinity map in order to notice patterns in my data. Once I had my patterns determined I brainstormed a few ideas to address the patterns in my data. The ideas were then placed into a priority matrix which allowed me to better understand how to prioritize my changes.
Priority 1: Label flight number, add confirmation that ticket was emailed, Improve “there is a cheaper flight available” wording
Priority 2: Label all flight categories, Add continue button to top of flight options list to minimize scrolling for user
Priority 3: Add baggage information to website
The most important change I made to the design was rewording the label that was meant to let the user know there was a cheaper flight option available to them. The users in my study were unable to immediately understand what that label meant and where it would take them. My solution was to make the wording more clear in describing where the link would lead the user.
Another important change that was made to the design was adding text to the confirmation page of the booking process to remind the user that their ticket would be e-mailed to them. The previous page in the booking process asked the user to input their email for a flight confirmation to be sent to them, but none of the users remembered that once they reached the actual confirmation page.
Other changes to my design included labeling the flight number, labeling the other categories in the flight list, and adding a continue button to the top of the screen so that users who picked a flight near the top of the list wouldn’t have to scroll all the way down to reach the continue button.
Demographics (15 participants):
-40% of respondents were 18-24 years old, and 40% were 25-40
-73% female and 20% male
-60% bachelors, 20% masters, 13% HS diploma
Survey Insights:
-80% of respondents primarily travel for leisure / vacation
-100% of respondents prioritize price when searching for flights
-73.3% of respondents prioritize arrival/ departure times when looking for flights
-93.3% of respondents prioritize fewer stops and layovers when looking for flights
What went right? Users seemed happy with the layout and design of the website, and were able to easily complete the task flows during the usability test. I feel that each step of the project was well organized and executed to the best of my abilities. The end result was a responsive website that satisfied the brief and captured the essence of the PanAm brand.
What went wrong? The research felt a little bit underdeveloped for this project. I understand that the demographics of people who fly are exceptionally wide and I know that I wasn’t really able gather enough information on everybody who would be potentially using this website because of time limitations. I am well aware that I was only able to cater to a small demographic, and the design may have to change to accommodate the users that I was unable to get to.
What I learned. It’s really easy to get lost in your own design. There were many moments that I had to remind myself of the persona and work to accommodate her rather than just trying to create the best possible UI. In addition, Airline websites are so vastly different that there really isn’t a “one size fits all” solution to any problem because each business has their own unique goals. A lot of the feedback I got from my users was very much rooted in their memory of the booking process that they’re used to. I had to cross reference each suggestion they made with multiple resources to see if what they were saying was really an industry standard or if they were just speaking from their own experiences with specific websites. Typically, it ended up being the latter.
Next Steps. Airline websites are filled with ads and promotional information that I just did not have the time or resources to include. The next phase of this project will include implementing the priority 3 changes of including baggage information, and then to increase functionality to include some of the things that were missed the first time around. I would also very much like to include images of real people to capture the humanness that drives the PanAm brand.
As for branding, my vision is to further simplify it. I decided to keep the original logo for sentimental reasons, but I am well aware that it has kind of an old feel to it. In the future, when the brand becomes widely known and recognized again, I would like to simplify the logo and remove the text from within it, possibly even change the PanAm font to something cleaner in order to really bring the brand to the 21st century and demonstrate how much it has evolved over the years.
