Pan Am Airways
Responsive Web Design
Overview
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 to create a website that allows users to book their travel and find travel deals.
Goals
-
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
Role
UX/UI Designer
Tools
-
Sketch
-
InVision Studio
Timeline
4 weeks (80+ hours)
1. Research
Goals
To understand the market and business' brand and to discover customers' frustrations, needs, and motivations when booking travel
Process
Market Research, Competitive Analysis, 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 18-34 years old
-
35% of flyers were 35-54 years old
-
30% of flyers were 55+ years old
Travel Purpose
-
31% flew for business
-
48% flew for personal leisure
-
21% 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 ticket counter
Challenges
-
Issues caused by global shifting political and economic climates, as well as environmental changes
-
Increase in flyers causes congestion in air traffic and airport terminals, which increases delays
-
Stricter security has resulted in longer lines and wait times
-
Increased number of airplane seats to accommodate the increase in demand comes at the cost of comfort
-
Technology has been helpful, but creates vulnerabilities for the industry
Trends
-
Continued growth: annual average passenger increases of 6.2% between 2012 and 2017
-
Increasing use of technology (apps, in-flight entertainment, biometrics) and environmentally friendly efforts
-
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.
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
To define the target user and identify their needs, motivations, and frustrations
Process
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.
Insights
-
Users price compare before booking airplane tickets.
-
Users are influenced by past in-flight experiences.
-
Users are frustrated by unclear information during checkout.
Needs
-
To know airline ticket prices before booking.
-
To know what the airline in-flight experience will be like.
-
To understand the information presented 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
Goals
To generate ideas to help the user accomplish user needs
Process
Product Roadmap, Sitemap
Product Roadmap
I brainstormed answers to the how-might-we questions to come up with features that could potentially help the user with their needs. After brainstorming features that could potentially solve the user needs, I picked the ones that would potentially have the most impact and narrowed it down to 2-3 features per priority level.
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
To design the layout of the website
Process
Wireframe Sketches, Mid-Fidelity Wireframes and Prototype
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 and Prototype
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. I then built out the remaining pages for the mid-fidelity prototype and linked the pages using InVision.
5. Test and Iterate
Goals
To test the mid-fidelity prototype, make improvements to the prototype based on usability test findings and to finalize the prototype
Process
Usability Testing, Affinity Map, Branding, Hi-Fidelity Revisions
Usability Testing
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
Participants
-
Number of participants: 5-7
-
Age range: 25-27
-
Archetype: “The Vacationer”
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 round trip flight from LAX to SFO sometime in January.
-
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.
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
-
Users noticed the fare comparison link but were unclear on its purpose.
-
Users weren’t expecting to be required to scroll after making certain selections on flight listing and low fare calendar pages.
-
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
-
Revise the wording of the fare comparison feature and clarify the purpose.
-
Have a clearer indication that there is more content below the fold.
-
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.
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