Lindsey Wong
mockups copy 2.png

Pan Am Airways

Responsive Web Design

mockups+copy.jpg

Pan Am Airways

Responsive Web Design

Role: UX/UI Designer
Team: Self-directed with feedback from peers and mentor
Tools: Sketch, InVision
Timeline: 4 weeks

Challenge

Pan American World Airways is making a comeback and wants to design a responsive site that features all the core functionalities you would expect from an airline e-commerce site as well as create a seamless booking experience for customers.

This was a speculative project.

Objectives

  • To design a responsive website for Pan Am customers

  • To redesign the brand with a more modern feel, keeping the essence of it still alive

Outcome

A website that allows users to book their travel and find travel deals.

pan am process.jpg

  1. Research

goals.png

To understand the market and business’ brand and to discover customers’ frustrations, needs, and motivations

process.png

Market Research, Competitive Analysis, Provisional Personas, Interviews

Market Research

I first searched online for information about the airline industry to get a sense of the market. Statistics and industry trends indicate there is an increasing shift towards the use of technological devices to book trips and check in online. Because of the increase in online booking and flight management, a seamless and intuitive online user experience is important for Pan Am to be able to compete with other airlines in the market.

Statistics (based on a 2015 study by Airlines for America)

Demographics

  • 50% of American flyers were male and 50% were female.

  • 35% of flyers were between 18-34 years old.

  • 35% of flyers were between 35-54 years old.

  • 30% of flyers were 55+ years old.

Travel purpose in 2015

  • 31% of airline travelers flew for business .

  • 48% of airline travelers flew for personal leisure .

  • 21% of airline travelers flew for personal non-leisure.

Check-in method

  • 50% used their personal computer.

  • 22% used their mobile device or app.

  • 17% used the automated kiosk at the airport.

  • 11% used the airport ticket counter.

Challenges

  • Global shifting political and economic climates as well as environmental changes create issues.

  • An increase in flyers creates congestion in air traffic and airport terminals. These increase the number of flight delays. Delays are further worsened by severe weather conditions.

  • Stricter airport security has resulted in longer checkpoint lines and wait times.

  • To meet the increase in flyers, airlines have increased the number of seats per plane, which comes at the cost of customer comfort.

  • Technology has been helpful for airlines (biometrics, in-flight entertainment, etc), but creates a vulnerability for the industry.

Trends

  • Continued growth: airlines witnessed annual average passenger increases of 6.2% between 2012 and 2017.

  • Increasing use of technology: technology is integrating more and more into the airline industry, from apps to in-flight entertainment and now biometrics (a combination of facial and iris recognition used for security screening purposes). 

  • Environmentally friendly efforts: airlines are looking to go green and use more eco-friendly practices.

  • Mobile booking: 48% of smartphone users are comfortable researching, booking, and planning a trip solely using their mobile device.

Competitive Analysis

After doing market research, I next looked into comparable airline competitors currently in the industry. Doing competitive analysis allowed me to see where Pan Am stands relative to airline competitors. It also highlighted areas Pan Am could get ahead of competitors by offering clearer and unambiguous information as well as design consistency to convey the caliber of the brand.

Provisional Personas

I created provisional personas based on the statistics found during my market research. Provisional personas were built on the foundation of market research and formed a basis to be further validated with interviews to eventually form the user persona.

Interviews

I interviewed 8 participants at my local airport to learn about their experiences with online flight booking as well as their in-flight experiences. The interviews revealed what participants found enjoyable and frustrating with their online and in-flight airline experiences.


2. Define

goals.png

To define the target user and identify their needs, motivations, and frustrations

process.png

Empathy Map, User Persona, POV Statements and HMW Questions

Empathy Map

After conducting user interviews, I reviewed all my notes and grouped participant comments in categories: doing, thinking & feeling, seeing, hearing, gains, and pains. From these groups, I was able to identify categories based on the majority of participant comments. These formed the insights and user needs that would create the basis for the user persona.

Needs

  1. To know airline ticket prices before booking.

  2. To know what the airline in-flight experience will be like.

  3. To understand the information presented during checkout.

Insights

  1. Users price compare before booking airplane tickets.

  2. Users are influenced by past in-flight experiences.

  3. Users are frustrated by unclear information during checkout.

User Persona

I created the user persona “Ella” based on the information gained from the empathy map. Ella is a target user of Pan Am as someone who wants to travel comfortably and is influenced by past in-flight experiences. The user persona allows us to build empathy with target users as we design the user experience.

POV Statements and HMW Questions

I built upon the insights and needs and created point-of-view statements to define Ella’s user needs. From there, I created how-might-we questions that will form the basis for brainstorming and ideating design features.


3. Ideation and Strategy

goals.png

To generate ideas to help the user accomplish user needs

process.png

Brainstorming, Product Roadmap, Sitemap

Brainstorming

I brainstormed features that could potentially answer the how-might-we questions. They may not necessarily be feasible or easily implemented, but brainstorming allowed me to think of possible features to include for the product roadmap.

Product Roadmap

After brainstorming features that could answer the how-might-we questions, I picked the ones that would potentially have the most impact. Priority ranking were determined by the number of comments under each pattern from the empathy map. There was a significant amount of participant comments related to airfare pricing information.

Sitemap

I created a sitemap to map out the information architecture for the website. Researching competitor websites provided a basis for the way information is typically laid out. Similarities were found across multiple competitors, with pages for planning a trip, travel information, and the airline’s frequent flyer program.


4. Design

goals.png

To visualize the various user processes and design the layout of the website

process.png

Task Flow, User Flow, Wireframe Sketches, Mid-Fidelity Wireframes, Prototype

Task Flow

I created a task flow for a common scenario users go through, based on the task that interviewed participants completed when booking a flight.

User Flow

I expanded on the task flow by creating a user flow to map out the various paths a user can take. The user flow includes decision-making steps in the process, which will affect the flow of the user.

Wireframe Sketches

I sketched out low-fidelity wireframes to create the basic layout for the pages related to the booking process. Creating low-fidelity sketches allowed me to get ideas onto paper quickly, which could be iterated through feedback from peers, to produce better pages for the mid-fidelity wireframes.

Mid-Fidelity Wireframes

I created mid-fidelity wireframes in Sketch for desktop, tablet, and mobile versions of the homepage and low fare deals page. This provided a more clear visual direction than the wireframe sketches in regards to layout, spacing, and visual hierarchy.

Mid-Fidelity Prototype

I built out the remaining pages for the mid-fidelity prototype and linked the pages using InVision.


5. Test

goals.png

To test the mid-fidelity prototype and gain feedback for design improvements

process.png

Usability Testing

Usability Testing

Participants

  • Number of participants: 5-10

  • Age range: 25-27

  • Archetype: “The Vacationer"

Objectives

  • Test if users can complete the tasks without difficulty

  • Observe user’s overall impressions to the website

  • Observe any pain points

  • Gather user feedback in regards to areas of delight or frustration

Scenario 1: You would like to book a roundtrip flight from LAX to SFO sometime in January and are looking for cheap flights.

  • Task: Search for a roundtrip flight from LAX to SFO sometime in January. 

  • Task: Book the cheapest flights in January.

Scenario 2: You’d like to go on a short vacation and are flexible with your destination and dates, as long as it’s cheap. You would be flying out of the Los Angeles airport (LAX) and want to find cheap destinations.

  • Task: Please find the cheapest deal departing from LAX.

  • Task: Book the cheapest deal departing from LAX and proceed through checkout.


6. Iterate

goals.png

To make improvements to the prototype based on usability test findings and to finalize the prototype with branding and UI design

process.png

Affinity Map, Branding, Hi-Fidelity Revisions

Affinity Map

After conducting usability tests, I gathered the individual findings into groups to clearly identify trends and patterns. The insights gained from the usability tests were then used to form the design recommendations that would be implemented to improve the final prototype. There were minor comments and areas for improvement for the usability of the website, but overall there were no significant changes needed.

Insights

  1. Users noticed the fare comparison link but were unclear on its purpose.  

  2. Users weren’t expecting to be required to scroll after making certain selections on flight listing and low fare calendar pages.

  3. Users generally browsed the homepage to look for additional sections but didn’t scroll unless they couldn’t find the information they were looking for.

Design Recommendations

  1. Revise the wording of the fare comparison feature and clarify the purpose.

  2. Have a clearer indication that there is more content below the fold.

  3. Bring important information to the forefront by having it within view without requiring additional action on the users’ part.

Branding

I created a mood board to guide the visual direction of the prototype based on Pan Am’s previous branding, but with a more modern feel to reflect the times. I built off of Pan Am’s previous logo and iconic font style. Pan Am’s original wordmark font was a demi-serif, with a unique but sophisticated style. The redesigned logo includes an airplane that incorporates the demi-serif flick and the wordmark utilizes a demi-serif font similar to the original. The colors are consistent with Pan Am’s original branding.

Hi-Fidelity Wireframes

I applied the UI design to the prototype and made revisions according to feedback gained from peers.

Responsive Wireframes

The responsive wireframes were updated to include the UI design.

Hi-Fidelity Prototype

mockups.jpg

Having trouble viewing the prototype? Try opening the link in an in-cognito window :)


Conclusion

This responsive web design project enabled me to improve my skills and immerse myself in the UX design process. Although there were limitations - airline booking is relatively familiar to most and there’s little room for changing things drastically from the norm - the project was a highly valuable in strengthening my UX chops.

Next Steps

  • Continue to look for areas of improvement

  • Create a neat and organized deliverable for handoff

  • Work with developers to implement the design and turn it into reality

  • Track metrics for task success and retention, such as repeat bookings, completion rate, error rate, and average number of errors