Skip links

Pan Am Branding-04
OVERVIEW

This project is part of Designlab’s UX Academy course. I was challenged to research, strategize, and design a responsive e-commerce website for Pan Am Airways.

PROJECT BACKGROUND

Pan American World Airways, commonly known as Pan Am, was the leading and largest international air carrier in the US from 1927 until its collapse on December 4, 1991. With the recent acquisition of Alaska Airlines by Virgin America, Pan Am stakeholders would like to seize the opportunity to make a comeback. They plan on launching a new airline in 12-18 months with a well thought out user experience. They are expecting to be available in 2018 where more than half of all online bookings for U.S. travelers are done on device or mobile.

TOOLS USED
Procreate
Adobe Illustrator
Adobe Photoshop
Sketch
InvisionApp
Typeform
Principle
MY ROLE
Product Designer

Experience makes the difference

objective

The project goal was to focus on creating a responsive web design for Pan Am, which involves the search, booking, and online check-in of flights. Additional goals were to update the band with a more modern feel while keeping the essence of it alive.

mission

As the product designer, I was to provide strategies based on the analysis of tangible data I collected from my research. Then I developed creative pieces built with the utmost attention to details to develop a stimulating and practical visual presence, a modern and refreshing brand, and a meaningful user experience.

process

RESEARCH

Secondary Research

Market Research

User Interview

Surveys

STRATEGY

Persona
Empathy Map
Storyboard

INTERACTION DESIGN

User Flow
Wireframe Sketches
Responsive Wireframes
Prototype
Usability Testing

UI DESIGN

Logo Branding
Responsive UI Design
UI Kit
Prototyping
Usability Testing

01

RESEARCH

Booking flights should be a straightforward process and flexible towards a variety of goals. To learn more about people’s goals and needs when it comes to searching and booking flights, I conducted user interviews with 5 participants, surveys, and market research. I discovered that an easy experience while booking was just as important as the trip itself. Having a smooth and easy experience in the booking process acquires loyal customers. Customers also value price honesty, saving money on flights, and reliability in alerting them of any flight changes.

02

STRATEGY

Discovering some key insights, I proceeded with defining the process by creating a persona, an empathy map, and a storyboard. Each strategy painted a deeper understanding of our users and provided insights to a possible solution.

How might we...

01
provide a smooth, honest, and reliable experience for the users?

 

02
best accommodate a user’s needs in booking a flight?

 

03
make booking flights a stress-free experience?

Having a better understanding of the users made it possible to define some clear problem statements and generated ideas on possible solutions.

03

INTERACTION DESIGN

Designing the solutions began with defining the user flow then engaged it visually by sketching the wireframes and lastly, solidifying the ideas and solution in a higher fidelity wireframes.

user flow

The user flow focuses on the steps the users can take during the booking process.

wireframes sketches

The wireframe sketches provide a rough idea of how we can incorporate the user flow to the wireframes, establishing a realistic solution.

wireframes

The wireframes were created intensively as a one-page flow. This provided a smooth and quick flow between sections.

Landing Page
Collapsed Sections
Confirmation
One Page Booking Process
testing and validating

I made a low fidelity prototype in Invision and did user testing on four participants to complete the booking process. The goal was to determine which areas in the wireframes were successful and which ones needed more work.

The Results

The participants had difficulty in areas where there were no clear labels and directions. Some elements were also very large which obscured the full view and misdirected the participants. Overall, 75% of the participants finished the booking process.This was a positive result; since most issues were designed based and not issues with the structure or flow.

responsive wireframes

The user testing provided great insights to implement on the next iteration. Multiple versions were tested and changes were made according to the feedback until a viable design and process was reached.

04

UI DESIGN

The redesigned identity of Pan Am stayed mostly true to its original iconic design that was established in 1956. The goal was to preserve its essence with some incorporated contemporary style to fit the modern times.

color palette

#16324A

#2D5F95

#3A91C7

#CBE1EE

#4A4A4A

#9B9B9B

#BEC2CD

#F2F2F3

typography
Quicksand
multicolore
Lemon Milk
branding

Pan Am knew that the heart of the brand lies in the emotional promise. There was an emotional promise about the romance of flying, and they replicated that across all touch points. It was a fundamental part of branding that they got right.

~ Simon Thorneycroft, founder and chief executive Officer of Perspective.

 

Pan Am’s brand made a deep connection with its consumers, being one of the first companies to establish a consistent design and visual identity. This is the essence I tried to preserve with the new brand

original
pan Am new
new branding
pan Am new
ui design

When users search for flights, the prices are upfront in the date selection and the cart and flight details are displayed on a fixed header. The booking flow behaves as a single page where the users can briskly explore the previous sections without losing information.   Lastly, users can input the details of their desired flight on a new feature called “Watchlist,” and they can be notified of any changes in schedule, prices, and any important details through email and/or text message.

responsive ui design
prototyping

The continued implementation and iteration improved upon the fidelity of the design and user experience. Invision has some limitations that prevented the design to be demonstrated to its full capacity but I managed to build a fully functional desktop prototype that I am satisfied with. I used Principle to prototype some of the initial processes to exhibit the experience I envision.

SEARCH
SCHEDULE
SPECIFY

Test the prototype in Invission App
Go To Prototype