CASE STUDY

Pan Am Airways

Research | UX Strategy | Interaction Design | UI Design

Creating a well-thought-out mobile app to bring the best user experience to our valuable customers

cellphone image mockup

Background

Pan American World Airways, known from its founding until 1950 as Pan American Airways and commonly known as Pan Am, was the principal and largest international air carrier in the United States from 1927 until its collapse on December 4, 1991. We are using Pan Am as an exercise of working with - and implicitly translating and refreshing - an existing, iconic brand in a frequently grimy and transactional realm: airlines.

Challenge

Pan Am plans on launching a new airline in 12-18 months, and are looking for a tight, well-thought-out user experience to match. 2016 was projected to be the first year where more than half of all online bookings for U.S. travelers will be completed on a device or tablet. While desktop still brings in greater overall sales (big-ticket, considered purchased are often the last to shift), a future-focused airline needs to imagine a mobile-first future.

Solution

I came up with six solutions after synthesizing the research findings and usability testing results to resolve user's pain points and integrate their feedback into the application.

  • White background and bigger font sizes for better legibility

  • Boarding pass / flight status /notifications / special offers / my trips menus on home screen for quick access

  • Prices on calendar for users who are flexible with dates or looking for cheaper prices

  • Non-stop flights are listed first rather than cheaper prices

  • Wi-Fi availability is shown on the fare list

  • Seat choices during booking process

Key Findings

I conducted my research by doing a thorough competitive analysis, user interviews, and an online survey. These are the key findings from my research.

  • Most Used Features: Check-In, Boarding Pass, Flight Status,Booking

  • Additional Features Users Want: Travel Advisory Notification, Seat Choice, Special Offers, Wi-Fi

  • Pain Points: App Crash, Lack of Flexible Dates,Fine Print, Confusing Interface

  • Insights: Willing to change destinations depending on ticket prices, Airline brand is more important than ticket prices, Non-stop or short layovers are more important than ticket prices

UX Strategy

I synthesized my research findings by creating an empathy map and persona which helped me empathize and better understand my end users. I also created the business goals to translate them into a better UX strategy.

Empathy Map


empathy map

Persona


persona

Business Goals


business goals

Interaction Design

I created the information architecture based on the research findings and designed the low-mid fidelity wireframes for the booking, check-in, and boarding pass.

Application Map




application map

User Flows




user flow for booking











user flow for checkin











user flow for boarding pass

Wireframes



website wireframes

Prototyping

I recruited four users from ages 30 to 60 and conducted 1-to-1 usability testing using Invision. I selected the users who travel at least twice a year to match my persona, Kelly. Some of the users were remote, so I used Google Hangouts and watched how users completed the tasks.

Testing Plan

Each participant were asked to complete the following tasks

  • Book the flight for yourself.

  • Change the number of travelers.

  • Click the menu that has your reservation.

  • Go through the check-in process and check the boarding pass.

Testing

I used my iPhone for usability testing in person and shared the invision link for remote users, and recorded the completion time and any hiccups they made.




participants image

Affinity Map

After all of the tests were completed, I created an Affinity Map to synthesize the test results.

affinity map

Results

testing result

UI Design

After I had studied my persona, Kelly, I decided to keep UI design simple, so I limited the number of colors to 4. Royal blue was used for buttons or icons that users can tap and the red color to highlight text. I chose the white and light gray colors for the background to have a clean look.

Style Tile

style tile

Key Screens

bike shop website key screens

Next Step

More usability testing will be conducted to validate the changes that were made after the last round of testing.