Responsive airline booking site.
In the wake of Virgin America's acquisition by Alaska Airlines, Pan Am sees an opportunity opening up for a flying experience that's a cut above the usual. They plan on launching a new airline in 12-18 months and are looking for a streamlined, well-thought-out user experience to match. A future-focused airline needs to imagine a future welcoming of all types of device and screen size usages.
​
Pan Am wants to make a very strong comeback, and for that they will need a next-level user experience for their core digital flow involving the booking and online check-in of flights.
background
Redesign company logo and create a responsive online site that will be future-focused and cover the core digital flow involving the booking and online check-in of flight. Further features will be added based on research data collected.
proposal
process
research
Competitive Analysis
User Interviews
Persona
strategy
User Flow
interaction design
Wireframes
Prototype
Usability Testing
user interface design
Mockups
Style Guide
Usability Testing
research
The goals of the research were to determine competitors' strengths and weaknesses through competitive analysis, what pain points currently exist with online flight booking, particularly on mobile devices, and what the unmet needs of those booking flights online are.
​
This was accomplished through a competitive analysis and user interviews. From that, a persona was created with the goals/needs and frustrations/fears of online flight booking. The persona for this project was Brian–a 32 year old Account Manager who flies some for work, but loves to travel and explore new places personally. He needs a simple responsive site that's easy to browse, filter, and book flights on from wherever he is.
strategy
With the persona in place, the next step was to form a strategy, beginning with a User Flow. Crafting a User Flow helps to determine what the key parts of the product are and what steps users will need to go through to accomplish specific tasks. This was created based on background information for the project along with research data collected through a competitive analysis and user interviews.
​
The specific task we were creating in this instance was finding and booking a flight online.
interaction design
Wireframes were then created based on the User Flow, persona information, and user interview data gathered during the research and strategy phases. We focused on overall usability through simple interactions that break up information into digestible pieces, simple design that has good readability, and overall layout.
These wireframes were then used to create an interactive prototype through InVision. This allowed us to see what elements worked, or didn't work, within the flow that was designed for. From there, designs were revised and updated within the prototype to get a functional baseline for the design.
​
In the next phase, user interface design, the wireframes were used to create high-fidelity user interfaces that could be tested.
user interface design
The new Pan Am brand was then created to portray the brand values of elegance, playfulness, being hip, and aspirational (but not luxury). This was done through font, color, and image choices.
The new logo is a reimagining of the iconic globe logo that Pan Am adopted in 1957, brought to life again in 2019. This also introduces a number of different tints to the color palette, rather than just the single blue and white of old.The hero images showcase products out in the wild while product images all remained uniform. The clean white backgrounds for product images allow the products to really shine without being cluttered or overshadowed by whatever is going on in the background.
​
This is best showcased through the style tile created for the project.
From here the UI for the new Pan Am site was born. Using the imagery and color palette throughout, the site really began to come to life. All screens needed to test the user flow of finding and booking a flight were created prior to a second round of usability testing.
​
A usability test was then performed for the specified task:
1. Find and book the cheapest round trip flight.
​
Users performed this task live as they observations and feelings were recorded. That data will then be used to help inform next steps for future iterations on the product.
"The ability to easily perform a flexible date search on mobile, that looks clean, would be a game-changer."
"I do some flight research on my phone, but there aren't many good mobile sites, so I usually end up on the computer."
"I wish booking a flight was this easy. It looks really good."
"The backgrounds, especially the pictures, look great and add interest to the booking process."
reflection + next steps
Looking back at this project, the user interface design feels pretty strong for mobile, and really starts to breathe in the desktop and table homepages as well. I opted for the feel of stacked cards that you can drag up or down to expand your view of content on the cards.
​
The interaction design is very simple and intuitive. This is because the site relies heavily on design patterns found on a multitude of mobile sites, native mobile UI elements, and mobile apps. The helps the design to feel familiar and users are able to understand how to interact with it quickly. This also helps them move through a familiar process in booking a flight without all the extra clutter other sites offer.
​
As for next steps, the first priority would be to include some additional information on the seat reservation pages–locations of emergency exit rows, bathrooms, etc. Secondly, we would focus on building out the ability to help users plan their trip–check weather, local events (sports, music, festivals, etc.), and book their hotel and car all in one place. This would help bring the great experience of flying with Pan Am even further into their trip, which is where the real memories are made.