Pan Am

COURSE
Designlab UX Academy

ROLE
User Research, Interaction Design, UI Design, Prototyping, Usability Testing

TIMELINE
Dec 2017 - Jan 2018

TOOLS
Sketch, InVision, Pen + Paper

Identifying Travelers' Needs & Habits

With so many airline sites, travel search engines, and OTAs available, there are more possibilities to plan trips than ever before. Advanced tools and technology are giving travelers more flexibility and freedom to find what works for them. To understand how users are searching, booking, and managing their flights, I started by outlining research goals for primary and secondary research.

My research goals were to identify:

• What factors do users consider when booking a trip?
• How do users currently search and book flights online?
• What pain points do users encounter in their current booking process?

Secondary Research

I began my secondary research by gathering data from travel surveys and reports. This provided me with an initial understanding of traveler habits, preferences, and trends.

• More and more travelers value personalized trip itineraries, using apps and technology to find the best deals and create their own travel packages. (Booking.com)
• 56% of airline website bookers typically use OTAs (online travel agencies) when shopping for travel. (Phocuswright)
• Travelers use airline apps to track flight status (65%), check flight availability and pricing (61%), and book flights (53%). (Travel Weekly)

Competitive Analysis

To see how the booking experience differed by airline, I did a competitive analysis of five major U.S. airlines. This analysis included Delta, American, United, Southwest, and Alaska. I went through each website and compared their features and functions for searching, booking, and managing flights. Most competitors offered similar functions, which helped me establish common expectations for airlines.

User Interviews

Building onto my research goals, I created an interview guide that would allow me to empathize with users’ travel needs, motivations, and frustrations. I conducted three user interviews to learn more about their experiences with searching, booking, and managing flights. During these interviews, I also conducted contextual inquiries to understand how users navigate and interact with airline websites.

Through my user interviews, I was able to collect these key insights:

• Participants start their search on a travel search engine (e.g. Google Flights) because they can compare options before booking directly with an airline. (Need: Clear flight information -- times, layovers, etc.)
• Participants will often be flexible with their travel dates to save money. (Need: Ability to view prices by date)
• Price, times, number of layovers, and airline are the top considerations when participants book a flight. (Need: Easy filters to narrow down flight options)

I created two personas along with separate empathy maps to address the unique needs, goals, and frustrations of leisure vs. business travelers. Steven is a leisure traveler who wants to make sure he's getting a good flight deal, while Jessica is a business traveler who needs to book flights that fit her work schedule.

Defining and Ideating Flows

User Flow

Before jumping into the design stage, I needed to think about what Steven's and Jessica's journeys might look like on Pan Am's website. I created this user flow map to show both personas' potential steps when booking a flight. I also defined two entry points that Steven and Jessica might use to land on Pan Am's website. Steven received a promo email about special trip deals from Pan Am, while Jessica used a travel search engine that led her to Pan Am. This flow served as a framework for what pages should be designed during wireframing. 

With my user flow, I brainstormed ideas for how to design the key pages in Pan Am's booking process. I started by coming up with Point-of-View (POV) statements and How Might We (HMW) questions based on my research insights. By posing my insights as HMW questions, this helped me think about potential design solutions.  

One of the key insights from my interviews was that users are willing to be flexible with their travel dates if it means cheaper airfare. Through my competitive analysis, all the major airline sites had a Flexible Dates Calendar option, which lets users see how airfare differs by date. But this information is usually only available after the user enters their initial search criteria (destinations, number of guests, and dates).

Since price is an important consideration for Steven, I wanted to prioritize it earlier in the search process. Having a separate calendar page would allow him to immediately compare travel dates by price and get flight results that match his budget better. Once the user reaches the flight results page, they can apply filters to further narrow their flight options. This would allow Jessica to find flights by arrival time and avoid long layovers.

Wireframes

As the result of my brainstorming, I drew some initial sketches for the homepage, calendar page, and flight results page. I started with these pages since they were the most important in terms of figuring out how the site's functions and information should be presented to users. These sketches served as visual templates for my digital wireframes in Sketch.

After sketching some initial concepts, I designed low-fidelity wireframes for the homepage, dates calendar, flight results, trip summary, and checkout pages. Keeping my HMW questions in mind, I thought about how to best organize and present information so Steven and Jessica could find flights for their budget and schedule. Implemented solutions included clear flight information, ability to compare prices by date, and convenient filters for price, times, and number of stops.

Modernizing the Pan Am Brand

Because Pan Am is such an iconic name, I wanted to preserve its essence but in a contemporary style. The idea behind the logo was to reuse the imagery and colors from Pan Am's brand in a playful and innovative way. Inspired by the colorful Pan Am posters from the 1950s, I went for vibrant sky blue and coral colors alongside the brand's classic blue.

Testing and Iterating

After applying UI elements to my wireframes, I created a high-fidelity prototype with InVision. I conducted three in-person usability tests to see how users navigate and interact with Pan Am's website. The main tasks for the usability tests were to book a flight, create a flight alert, and check into a flight.

Testing objectives included:

• How easily can users search and book a flight on the website?
• Are users able to find and manage their flight information after booking? 
• Does the website's functions, organization, and flow meet users' needs?

Key Findings

• 100% of participants found the website to be clean, intuitive, and similar to how they book flights on other airline websites.
• 100% of participants assumed the flight alert would be automatically included when booking. ("There's never been a time where I manually had to set up a flight alert.")
• 67% of participants didn't know the difference between available and unavailable seats right away. ("At first glance, I couldn't tell these are filled and these are empty.")

From my usability tests, most of the issues occurred during seat selection and setting up a flight alert so I focused my revisions on those pages.

Priority Revisions

• Add an "Opt In" option for flight alerts in the booking process
• Use a more distinct color to denote unavailable seats
• Increase the text size and spacing for flight options
• Make the total fare more apparent when choosing dates on the calendar

The most common issue was 3 out of 3 users were confused by having to set up a flight alert to receive notifications about their flights. In the original design, I had the flight alert set up after the booking process, but users mentioned they usually expect these notifications to be included when they book a flight. As a result, I removed these additional steps and replaced them with a simple opt-in via email and/or SMS option under the contact info section of the checkout process.

Another common issue was 2 out of 3 users couldn’t immediately tell the difference between available and unavailable seats. They felt that the color used for unavailable seats was too similar to the background image and wasn’t visually distinct enough. In the revised design, I chose a more noticeable color and indicated unavailable seats with “x” markings to make them stand out more from available seats as well as the background image.

There was also confusion about how airfare was displayed on the calendar page. In the original design, I had 2 separate calendars that showed prices for the departing and returning dates respectively, so users weren’t sure if the prices were shown as one-way prices or the total round trip price. In the revised design, I made it so that the user selects both departing and returning dates on the same calendar. After they select their dates, the calendar shows that highlighted date range with the total round trip price, as opposed to two separate prices like before.

Final Designs

To demonstrate responsive design, I also designed high-fidelity wireframes for tablet and mobile. Due to time constraints, however, I was only able to include the homepage, calendar page, and flight results page.  

Learnings Recap

The most challenging part of this project was balancing user goals and business goals. While the booking process may seem fairly straightforward, there's usually a lot of consideration and delay that occurs on the user's end. They want to make sure they’re getting a good price, but businesses are often reluctant to reveal too much information about their prices.

Because price is an uncontrollable factor, it was important to think about other angles I could approach the user's goal of saving money. In the end, creating a website flow and organization so that users can find flights within their budget was essential.

Next Steps

• Continue designing responsive UI for booking and online check-in user flows.
• Conduct additional testing on revised designs, collect feedback, and iterate as necessary.