PAN AM | Hengam Jam

PAN AM

UI/UX Design

Meet PAN AM

In the wake of Virgin America’s acquisition by Alaska Airlines, iconic airline Pan American Airlines sees a opportunity opening up for a flying experience that’s a cut above the usual. After more than 25 years, Pan Am wants to make a very strong comeback in the competitive and evolving space of air travel, and needs a next-level user experience for their new website.

The resurrected company, which has been planning its comeback for the past two years, is launching a reimagined next-level airline experience in 12-18 months that is sure to disrupt the current state of affairs. All of this innovation, including booking flights, and online check-in of flights.

-1-

Empathize

Challenges

The first challenge was to create a next-level user experience for PAN AM’s new responsive website that would guide users through the process of booking and managing flights. It would also help Pan Am a very strong comeback in the competitive and evolving space of air travel.

The other challenge was to build upon the brand identity with new interactive UI elements, but at the same time resemble the old UI, so people are reminded of the old PAN AM.

Secondary Research Finding

Traveler Habits & Booking Trend

More and more travelers value personalized trip itineraries, using apps and technology to find the best deals and create their own travel packages. 57% of travelers want to do more independent travel in 2018. ( Booking.com )

59% of travelers begin researching their next trip on smartphone between one and three months before departure (TripAdvisor, 2016).

After researching on their smartphone, 79% of mobile travelers in 2017 completed a booking, which is significantly higher than the 70% who did so in 2016. (Google, 2017)

Direct bookings on a supplier’s own website are ranked as most important to tour and activity operators. This is closely followed by incoming tour operators, direct offline bookings, and online resellers (OTAs and tour & activity marketplaces). (TrekkSoft, 2016)

69% of travelers are more loyal to a travel company that personalizes their experiences online and offline ( Google )

Travel search engine like Google Flights Kayak, have a price predictor algorithm that analyzes historical price trends to help predict if ticket prices will increase, decrease, or remain the same.

More bookings are occurring on mobile, instead of switching to a desktop. 79% of mobile travelers completed a booking after doing research on their smartphone ( Google )

User Analysis

I created personas, empathy maps, storyboards, and user flows to create a clear and detailed picture of my user. At each step of the design process I considered the persona and made all of my decisions based on the actions I thought she would take.

Persona

After a series of user interviews I came up with my persona. Lena represents the goals and behavior patterns that I witnessed from the user interviews.

Empathy Map

After conducting the user interviews and knowing persona’s characteristics, I used an empathy map to gain a deeper understanding of each user’s distinct experience with PAN AM.

Insights & Summary of Research:

From the market, industry, and user research, I was able to discover that users

will often be flexible with their travel dates to save money.

check other sites to find the best flight for their budget and schedule, but book directly with the airline.

access and manage their flight information via mobile (e.g. flight check in, status, and alerts).

From the research, I also decided to focus on responding to these HMW (How Might We) for redesign PAN AM

Helping users plan their travel dates more efficiently?

Make it easier to search for flights based on price and schedule needs.

-2-

Define

Project Goals

After conducting research, it’s time to define the problem and examine solutions. I started by deriving business goals from the PAN AM project brief. After this, I used Lena – the persona – to define user goals. The common goals between business and user goals became the foundation of the first iteration.

Feature Prioritization

From the common goals, I formulated features that were most pertinent to these goals, as well as features that would be great additions for future iterations.

Information Architecture

Sitemap

Once I identified my targeted users for the PAN AM, I created a diagram that shows the organization of the site’s content.

Brainstorming Ideas

To get an idea and direction on how I wanted certain elements to be structured on the desktop website, I created a couple of sketches to start mapping out my ideas for the user.

Text Hover

Text Hover

User Flow

Following the map, I created a user journey for visiting the site and searching for flight and checking out as a guest. This diagram illustrates the steps involved in completing each task. With the user flow, I was able to address the users’ needs before I began the visual design process to ensure that I was able to create a good and functional product.

Text Hover

-3-

Ideate

Wireframe

After working on some initial UI requirements, I began wireframing a few pages, taking into account how the design needs to respond to various breakpoints. After this, I prototyped the wireframes to ensure the flow made sense.

Text Hover

Text Hover

Text Hover

Text Hover

Text Hover

Branding and UI kit

With the UI kit, I focused on building upon the brand identity with interactive UI elements. I still want for the new logo to resemble the old one, so people are reminded of the old PAN AM. Because PAN AM is such an iconic name.

So I didn’t want to stray too far from its original style but rather give it a modern look and feel. 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 dark gray and coral colors alongside the brand’s classic blue with a touch of red.

After building the UI kit, I utilized it to stylize the responsive wireframes from earlier.

-4-

Prototype

An interactive high fidelity prototype of PAN AM’s desktop website was created using Invision. The prototype functionality is limited to three major task flows.

Search a flight.

Book a flight.

Checkout.

Text Hover

Text Hover

High Fidelity Prototype

Feel free to try the InVision

hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh

-5-

Test

Usability Test

Once the pages were ready for testing, user testing was conducted with 5 participants. Test subjects were chosen who fit the persona demographic. In person testing was done using InVision. A detailed usability testing plan was referenced to instruct the participants through completing 3 different tasks.

50% of users tested reported it took them less time to book their flight than they would have expected.

75% of users tested indicated the PAN AM website would serve their needs very well or extremely well.

100% of users tested reported that it was easier to book a flight on the website.

Affinity Map

Test findings from user testing were compiled into an affinity map which will serve as a guideline for our next round of design iteration.

The Affinity map includes “Suggestions” and “Next Steps” which was addressed in wireframes before moving onto final prototype.

Text Hover

Text Hover

-6-

Next Step

I was able to experience the challenge of having a lack of resources, and learned how to manage my time, adjust my work, and prioritize in order to accomplish specific goals but still produce results that were high-quality within my given constraints.

A design is fluid, in a constant cycle of testing and iteration. At this stage of the design, I will roll out the wireframes to all mobile and tablet pages, and continue user testing on those screens. Once I have iterated on the design with my findings, I would apply the design to all pages and do a final round of testing once all screens were in a similar, near-final state.

SEE MY OTHER CASE STUDIES

MIGRAINE ASSISTANT

Migraine Assistant App UI/UX Case Study

See Case Study

Chase

Chase Personal Finance Management UI/UX Case Study

See Case Study

KAUS

KAUS Insurance UI/UX Case Study

See Case Study