OVERVIEW
Pan Am is making a comeback and with it, a global re-branding. They want a responsive website where users can easily book a flight and does not force users to download or install anything. They need a streamlined, well thought out next-level user experience to match.
PROJECT GOALS
-
Rebranding Pan Am: Modernize and revitalize the Pan Am brand while preserving its iconic essence.
​
-
Responsive Website Design: Develop a responsive website that aligns seamlessly with the rebranding and provides an intuitive platform for users to effortlessly book their flights.
ROLE
Sole UX/UI Designer
Sole UX Researcher
SKILLS
Product strategy
Branding
Wireframing
Site mapping
User Flows
User testing
Prototyping
RESEARCH METHODS
Market research
Secondary research
Quantitative research
Qualitative research
TIMELINE
12 weeks
TOOLS
Figma
RESEARCH
RESEARCH GOALS
-
Gain a comprehensive understanding of the company's history, mission, values, and key milestones to inform decision-making and strategic planning.
​
-
Identify patterns, best practices, opportunities, and potential areas for improvement by analyzing competitors' flight booking experiences.
​
-
Gather direct insights and feedback from Pan Am's potential customers to better understand their wants, needs, and pain points to shape a user-centered rebranding and website redesign strategy that aligns with today's user expectations while enhancing the overall user experience.
COMPANY BACKGROUND RESEARCH
The initial phase of my research involved delving into the company's background. I firmly believe that to understand where we are going, we must first understand our origins and where we have been. Getting a full scope of the company history was important, not just for understanding its mission and goals but also for gaining insights into its customers and the reasons behind their choice of Pan Am for air travel.
My approach included viewing old footage, reading articles, and exploring forums that captured the experiences of past passengers. This type of research provided a nuanced understanding of Pan Am as a company, its range of services, and company/customer dynamics.
SECONDARY RESEARCH
In my research, I aimed to understand what works well, what could be improved, and what opportunities exist by examining how other airlines manage flight bookings. The objective was to gather insights that could inform and enhance the rebranding and redesign efforts.
Additionally, I explored existing studies on how individuals typically book flights to gain an understanding of user demographics and industry standards. It was surprising to find various airlines face challenges in providing a smooth and transparent booking experience that gives the user flexibility and freedom, presenting Pan Am with opportunities for differentiation.
I conducted in-depth investigations into the websites of various airline and flight booking competitors, including Google Flights, Southwest, Jetblue, United, American, Virgin, Norwegian, Turkish, Emirates, Qatar, Qantas, KLM, Lufthansa, and Tap Portugal. Testing their websites on both desktop and mobile platforms allowed me to observe how they address common challenges in the airline industry.
SURVEY
The goal of conducting user surveys in this case study was to gather quantitative data and perspectives from a larger pool of potential customers to gain insights into general trends, wants, needs, and pain points, allowing for statistical analysis and identification of patterns.
​
I conducted an online survey across several social media platforms to gain deeper insights into user behaviors, attitudes, motivations, and usage patterns when it comes to searching for and booking flights online. The survey elicited responses from 16 participants, serving as a supplement to my qualitative research.
USER INTERVIEWS
The goal of conducting user interviews was to gather in-depth qualitative insights from a smaller more targeted group to explore the experiences, preferences, and challenges in greater detail when searching for and booking a flight.
​
I interviewed six users, five remotely and one in person, who travel several times per year, three men and three women between the ages of 30-60, each with different travel purposes.
By interviewing users directly, I was able to uncover nuanced details, emotional responses, and specific pain points, providing me with a richer understanding of their experiences and perspectives.
AFFINITY MAPPING
I conducted affinity mapping to organize the insights I had gathered from the survey and user research, to uncover patterns, key themes, and trends. This method helped me streamline my data, revealing overarching user needs, wants, and pain points
KEY INSIGHTS
WANT
-
Flexible flight options
-
Personalization
-
Affordability
-
Seamless user experience
-
Travel extras
-
Reward Program
-
Control
NEED
-
Reliability
-
Efficiency
-
Transparency
-
Flexibility to modify or cancel
-
Security
-
Instant confirmation and notifications
PAIN
-
Destination discrepancy
-
Cluttered or disorganized
-
Unavailable routes
-
Hidden fees
-
Surprises at the airport
-
Ticket price fluctuation
DEFINE
Based on the quantitative and qualitative data gathered from secondary research, user interviews and survey results, I identified three main traveler personas- the business traveler, the traveling family and the single leisure traveler.
​
I chose to focus this case study mainly on the single leisure traveler since that was the majority reason for travel in my research, which also coincided with the results of a 2018 survey of 5,000 American adults conducted by Ipsos Public Affairs which explored who was traveling by air, why, where and how often.
​
While I targeted this audience, I still kept in mind the needs and pain points of the business and traveling family in my design.
USER PERSONA
I combined both the demographics and psychographics of the leisure traveler in my research and came up with the persona of Wendy Cage, a single millennial young professional who decides to go on a eurasia trip with her friend. I broke down the user by their attributes, motivations, goals, fears and challenges, frustrations and expectations.
CUSTOMER JOURNEY
I created a customer journey map to comprehensively understand my persona's experiences, from initial awareness to post-purchase interactions.
SITE MAP
Now that I was clear on the business goals, user needs, wants, and pain points, it was time to start visualizing and organizing the structure of the website. This way, I could create a clear and user-centric layout that aligns with both business objectives and the expectations of the target audience.
IDEATE
USER FLOW
Now that I was clear on the business goals, user needs, wants, and pain points, it was time to start visualizing and organizing the structure of the website. This way, I could create a clear and user-centric layout that aligns with both business objectives and the expectations of the target audience. I took the user through the flow of searching for and booking a flight with additional options such as seat selection or adding extra baggage.
WIREFRAMES
After gaining insights into the information architecture, I began a series of sketches to visualize potential user interfaces. Recognizing Pan Am's potential business goals, particularly the promotion of their rewards program and credit card, I prioritized the top fold for these advertisements.
During the ideation of the flight search box, I strategically considered the space for advertising in the hero image, ensuring a seamless integration.
One concept involved a tabbed search box with top tabs for 'Book,' 'Check In,' and 'Flight Status,' exploring various ways to incorporate this design to optimize user interaction and achieve business objectives.
DESKTOP LANDING PAGE
DESKTOP DEPARTURES PAGE
MOBILE LANDING PAGE
DESIGN
LOGO
To modernize the Pan Am logo, I first researched current design trends and found that simplification, minimalism bold typography, and color gradients were the prevailing elements.
Embracing a minimalist approach, I decided to remove the iconic blue globe that traditionally encircled the Pan Am logo and chose a font-based design.
While preserving the essence of Pan Am's original typography, amplified its impact by enlarging and emboldening it, incorporating a color gradient in a deeper shade of blue for added depth and a modern flair.
This intentional redesign not only aligns with current design trends but also pays homage to the brand's rich heritage.
TYPOGRAPHY
For the website typography, I chose to use the Helvetica Neue condensed font for a modern and timeless feel, creating a well-balanced complement to the edgier and distinctive Pan Am winged font logo.
Helvetica Neue's simplicity and neutrality provides a balanced and harmonious contrast with my logo design, allowing the logo to stand out while ensuring clarity and a contemporary feel in the overall website design.
Chosen for its timeless, simple, legible, and neutral characteristics, Helvetica Neue provides a clean, professional look and feel for a modern website.
STYLE LIBRARY
FINAL DESIGN
DESKTOP LANDING PAGE
MOBILE LANDING PAGE
HOME PAGE FEATURES
The focal point of the home page for flight bookings is a user-friendly search bar, designed with intuition, flexibility, and minimal friction in mind. Key features include:
​
-
Auto-Population: The form auto-populates the departure city based on the user's location, streamlining the search process.
​
-
Destination Search Options:
​​​
Option #1: Search for a specific destination.
​
Option #2: Choose "Anywhere" for flexible dates and budgets, providing a customizable view of all destinations from the departing city.
​
Option #3: Select "View full airport list" for a quick overview of available destinations from the departing airport, minimizing guesswork.
​
-
Feasible Destinations: Addressing a common pain point, the design ensures only feasible destinations are displayed, enhancing user experience and preventing frustration.
​
-
Date Picker: A carefully designed date picker displays only available dates for the selected route, preventing post-search errors caused by displaying unavailable dates.
​
-
User Control: To maintain user awareness, the date input field doesn't auto-populate; instead, users click "Done" after selecting a date, with the price prominently displayed for conscious decision-making. Allows quick changing before moving forward.
​
-
Transparency Features:
​​
A link in the search box, "Check updated bag and travel fees," ensures transparency in pricing.
​
Top navigation includes "Help" and "Prepare" links, along with a search icon.
​
Footer features buttons for "Help Center," "Travel Updates," and "Baggage Fees" to assist users at every stage of their journey.
​
-
Business Goals: The design aligns with business goals, aiming to lower incoming call volumes by providing users with comprehensive information on the website, promoting transparency and independence.
DESKTOP DEPARTURES PAGE
MOBILE DEPARTURES PAGE
DEPARTURE PAGE FEATURES
I crafted each page, starting from the Departures Page, to enhance user experience, offering guidance, control, and transparency at every step.
​
-
Progress Bar: The progress bar at the top is there to give a visual cue, a roadmap of the process duration. Designed with intention, it provides peace of mind, control, and transparency, reducing any anxiety, encouraging completion, and ensuring the users don't miss or skip over any important information.
​
-
Persistent Search Bar: Below the progress bar, the search bar stays with user until checkout time. It's not just a search bar; it emphasizes the user's selected flight, acting as a safeguard against errors. Users can promptly rectify any mistakes, avoiding the need to navigate away from their current page and restart from the homepage.
​
-
Date Range Slider: Adding flexibility, the date range slider caters to users with variable travel dates, facilitating efficient price comparison directly on the page. This feature eliminates the need to navigate back to the homepage calendar picker.
​
-
Sort and Filter Options: Users are empowered with the ability to sort and filter results, customizing their experience for enhanced organization and readability. This feature enables users to efficiently scan data tailored to their specific needs, reducing feelings of being overwhelmed.
​
-
"Track Price" Feature: By creating a profile on the airline's website, users can unlock and leverage the "track price" feature. Aligned with both business goals and user satisfaction, this empowers users with more control and informed decision-making, as they gain insights into price fluctuations, helping them time purchases for potential savings.
​
-
Distinct Fare Colors: Fares are distinguished with different colors, aiding visual recognition for users, especially those who have booked with the airline before. Each color choice was tested to ensure readability and accessibility for a broad user base.
DESKTOP PASSENGER DETAILS PAGE
DESKTOP PAYMENT PAGE
MOBILE PASSENGER DETAILS PAGE
MOBILE PAYMENT PAGE
CHECKOUT PROCESS
Throughout my UX design process, I kept in mind and wanted to address user needs and business objectives through key features in the checkout process:
​
-
Flight Selection Clarification: In my user research, I discovered the pain point of accidentally booking the wrong flight when users are booking flights in a hurry and on the go. To prevent users from booking the wrong flight, I emphasized the selected flight on every page and enabled users to modify their choice easily without having to start over from the very beginning.
​
-
Transparent Pricing: I made sure there was a continuous visibility of a comprehensive price summary box during the checkout process.
​
-
Frequent Flyer Program Promotion: Recognizing a business goal to increase participation in the "World Pass" frequent flyer program, I strategically placed call-to-action buttons offering time-saving benefits and mileage rewards on the Passenger Details Page and Payment Page.
​
-
Accordion Form Design: Utilizing an accordion layout for information input on Passenger Details and Payment pages, I simplified the process, reducing errors and cognitive load.
​
-
Payment Page Expiration Timer: Enhancing transparency and urgency, I included an expiration timer, informing users of the payment timeframe and encouraging timely action.
​
-
Flexible Payment Options: Catering to user needs for control and flexibility, I offered various payment methods and included a 24-hour fare hold feature in compliance with DOT regulatory requirements which is something most airlines keep quiet, fostering transparency and trust in the booking process.
TEST
USABILITY TEST PLAN
I decided to conduct a moderated usability test of my prototype with 4 recruited participants for the usability test, two of whom were also my research participants.
USABILITY TEST OBJECTIVES
-
Perform a task-oriented usability test: The goal was to evaluate specific functional features or functionalities of the product, outlining tasks under a realistic scenario.
​
-
Direct participants' attention to relevant interactions: Using the prompt, participants would focus on key interactions related to the task, ensuring focused feedback.
​
-
Test navigation and ease of use: I wanted to evaluate navigation and usability by observing how participants interacted with the interface to complete the tasks outlined in the prompt, assessing the ease of performing these tasks.
​
-
Clarify task instructions: The prompt would simulate a real-world scenario aligned with the target user persona, providing an understanding of the context of the task, based on user needs and goals.
​
-
Analyze pain points and missed opportunities: User testing also helps me identify any user frustrations or challenges encountered during the usability test, as well as potential areas for improvement or optimization in the product design.
USABILITY TEST RESULTS AND TAKEAWAYS
Overall, the usability tests revealed that participants generally navigated through the product intuitively, encountering only minor setbacks. Here are the key findings and takeaways from the user test results:
​
-
Redundancy in Flight Selection: One participant found the display of the selected flight with the option to modify redundant, especially when it appeared multiple times on a single page. As a result, I iterated the design to ensure the selected flight was shown only once at the top of the page.
​
-
Color Overwhelm: Another participant felt overwhelmed in the mobile version by the use of solid colors for different cabin types and the "Select" buttons. To address this, I modified the design by changing the "Select" buttons to outlined instead of solid, creating a more harmonious visual experience.
​
-
Misinterpretation of Warning Icon: A participant stalled on the Passenger Details page due to misinterpreting the red warning icon underneath the name input fields meant to warn the passenger that the name must match their passports and they would not be able to change this after booking, thinking it indicated an input error on their part after inputting information. To mitigate confusion, I changed the icon color to dark green for clarity.
​
-
Search Behavior: Some users searched specifically for Economy flights from the landing page search bar, prompting the implementation of a feature to filter by flight class from the beginning.
​
-
Scrolling Habit: One user habitually scrolled immediately upon landing on a new page, potentially missing important information at the top. I addressed this by adjusting the layout to ensure crucial details were more prominently positioned in the middle of the page.
​
Despite these minor setbacks, participants were able to navigate quickly and efficiently through the tasks. Moving forward, I plan to:
​
-
Expand functionality in the prototype to test additional tasks.
​
-
Conduct user testing with different personas and varied levels of task prompts.
​
-
Evaluate the necessity of the "Your Benefits" feature on the Additional Services page and refine the presentation of detailed flight information to avoid user confusion.
​
These insights will inform further iterations of the prototype to enhance the overall user experience and address user needs more effectively.​
