PAN AM AIRWAYS WEBSITE

Flight Search and Booking Responsive Website

Overview

A study in designing a next-level user experience for PAN AMERICAN Airways core digital flow involving the booking and online check-in of flights.

View high-fid prototype

COMPANY

PAN AMERICAN Airways
project developed for DesignLab

YEAR

2018 (October)

PROJECT DURATION

80 hours

MY ROLE

User Research, IA, Interaction Design, Prototyping, Usability Testing, UI Design, Branding

TOOLS USED

Google Forms, Sketch, Adobe Illustrator, Marvel

The Challenge

PAN AMERICAN Airways wants to make a very strong comeback and for that, they are going to need a responsive website that doesn’t force users to download and install anything and redesign the brand with a more modern feel, keeping the essence of it still alive.

The process

In the process, I went through different stages while I was evaluating my insights and designs on each stage. The design process involved the following six stages.

Identify the problem.
Research to understand the market competition, the target audience and to check what competition has done till now.
Ideate & Brainstorm by gathering ideas, producing draft sketches and low fidelity wireframes.
Design high fidelity wireframes and define UI guidelines.
Build a prototype to use it in usability test sessions
Test the prototype with real users & evaluate results to identify improvements.

Research

1-TO-1 INTERVIEWS

Conduct 1-to-1 Interviews to gain a more in-depth understanding of the needs and pain points of airline passengers and how we can improve their online booking experience.

MARKET RESEARCH

See what competitors do and what services do they offer. Try to understand their target audience. Check their websites to discover what features they use on their websites and how the booking process works.

ONLINE SURVEY

Collect users demographic data, what devices they use in order to book their flight tickets, which are their preferable features and what other services they like to use

Goals

Find out what competitors do

Determine whether users prefer to book their tickets online of offline and why

Identify users needs, goals and pain points during the online and offline booking process

Collect demographics of the target audience

Specify what features users search in an airway online booking website

1-to-1 Interviews & Online Survey

"I like when I feel empowered with options to choose from. Be it about food or check-in or seats etc. And also some flights have extra options to inform the staff not to disturb you as you don't want to eat or something!"

— Survey Participant

Through the 1-to-1 interviews with 4 participants (2 men, 2 women) I was able to learn about the travelers' pain point and frustration about online booking flights tickets. At the same time, I run an online survey. 63 people from all over the world participated in the online survey from which I managed to gain useful quantitative insights.

All these insights helped me to understand better the target audience by building 3 personas along with their empathy maps.

PAIN POINTS

Lack of transparency in extra fees
Difficulty to contact customer service
Impolite stuff of very cheap airlines
Hard to understand differences and information of the different kinds of ticket classes
Can't arrange everything from one website (e.g. hotel, car rental, entertainment tickets, extra discount etc.)
Not enough options to choose from (e.g. food type, seat etc.)

Personas & Empathy maps

Logo Redesign

Based on the brief which asked for an elegant, yet playful, hip and aspirational but not luxurious logo, I started with some hand-drawn sketches to get inspired. Then I chose the best ideas and started working with Illustrator.

Information Architecture

Before starting to work on the Information Architecture of the website, I spent some time to collect all the needed features of the website in a product roadmap.

Based on my research on the competition, the gained insights from the interviews and the online survey and the product roadmap, I created a sitemap and two task flows; a task flow about the search & book a flight process and another one for the online check-in process.

All of them helped me clarify what the website’s goals are before I started designing.

Task Flows

Low-Fidelity Wireframes

With the completion of the sitemap and the task flow, I then started to work on the low fidelity wireframes.

Once a few ideas were sketched, iterated and refined some more, I began designing the digital wireframes for desktop monitors and mobile screens, always keeping in mind that my designs should work equally well in all different screen sizes.

View low-fid prototype

User Interface Design

Respecting the brief which mentioned to keep blue as the main color in the website's color palette, I used bluish gradients to give a feeling of an air element while selected images retain this color palette. At the same time, a more modern, simple and minimal font is used to match the new logo and give a more elegant touch.

Starting with the desktop screens, I decided the look and feel of the website and finalize some core steps like search results page and checkout.

I then decided to work in depth the designs for the mobile screens resolutions instead of the desktop, because I found it really challenging to design a website with so much content for such small screens.

When I finalized the designs in the majority of the UI elements I created a UI kit to ensure that my designs are focused around the project and provide developers with accurate design specifications prior to codegoals.

Desktop UI Design

Mobile UI Design

View all mobile designs

Usability Test Results

After the completion of the usability test sessions with 5 participants, the results came to be really encouraging.

The total of users who tested the prototype agreed that everything looks straightforward and easy to understand, while they mentioned that the flights' presentation was clear and reminiscent of other flight websites. Lastly, participants found the whole checkout process simple and very clear. They especially mentioned that they liked they were able to see the next steps that were coming up.

View high-fid prototype

Next Steps

Designing a flight booking site requires attention to details and provide additional features users expect to find. After my initial version, I believe that there are still many iterations needed before it will be ready to launch.

With the first round of iteration, the next step to think about would be alternative ways to show the checkout steps (eg in different screens) and also other alternatives on how users could add up-selling packages (like hotels, car rental, entertainment tickets) without adding extra checkout steps.

Say Hi!

Find me also at...

If you have any questions or you would like to work together, you can either email me at thehmux[at]gmail.com or use the contact form.