Logan Bishop
Daniel Luke
Tomas Mulder
Keith Roberts
Randall Hartman
WCAG Compliant
A Living Style Guide
Mobile Responsive
Audit Frontier Airlines current online booking engine and provide a new information architecture and user experience for a mobile first strategy. Success to the client at this phase was knowing they had a map of conversion opportunities for every point of the user journey to sell them on the right add-on.
Taking the newly developed information architecture and strategy, our team was tasked with creating a new user experience to lead the way to truly mobile first booking engine. With flyers constantly on the go, the booking engine needed to have a clear user interface and intuitive next steps from start to finish.
Our team constructed a set of user interviews to take place at the Denver International Airport in quick question format to try and get on the ground level of what Frontier's flyers are finding the most frustrating. From there we created user personas and journey maps that aligned with their most frequent flyers.
We established four main research categories: Personality, Goals, Motivations, and Frustrations. Through these lens we were able to create a snapshot into what Frontier Airlines can define as their everyday Frequent Flyer.
This project started with several breakout brainstorming sessions while at a whiteboard with a team of designers and developers. This is where we collaborated to come up with quick iterations and ideas for the best user experience of the project. We captured restraints from the dev side and client expectations written in the SOW, to begin priority guides on each booking step. These priority guides then found their way to individual screen sketches.
Throughout this project accessibility was kept at the forefront of all design decisions. Flying in itself is already an intimidating task, and a task that needs to be handled for anyone without constraints. Particular views and controls that lead to immediate wins came in the form of UI patterns.
At the surface, creating a digital color palette based on contrast and AAA compliance was great start. The question then became, how do we make it obvious? How can it became second nature to quickly scan a page and remove any major complications. This was found in elements such as shape backgrounds and line patterns.
In the example of seat selection, there were four main displays:
- Stretch (extra legroom, full recline, early inflight service)
- Standard (pre-reclined, environmentally friendly)
- Unavailable (already selected)
- Selected (your current seat selection)
The Stretch Seating is the ideal upgrade for any frequent flyer so this selection became the "diamond" pattern. The standard is the most environmentally friendly which followed suit with the Frontier green. And finally, to make the unavailable seat stand out and still appear disabled, we combined the grey fill with the diagonal line pattern.
.svg)
An extended sprint of the project was to create a calendar purchasing interface. The goal of this functionality was to allow the user to easily choose their departure date and return date all in one action and screen. This helped avoid unnecessary clicks or new page loads. We also implemented a toggle to quickly switch between dollars or miles for your purchasing amount.
At any point in the booking engine, it was pivotal to remain as transparent as possible. This presented itself in the flight "Quick View" bar that remained sticky at the top of the page. Static information displayed the flight and the pricing, with the ability to drop down and see flight information.
With plans always up in the air, the team thought through ways to make updates available on any current page. If you were to drop down from the Quick View bar, you would be able to change your current flight from Round-Trip to One-Way, update your destination or departure, and start the task of adding a new passenger before checkout.
Arguably the most important step in the booking engine was the flight selection screen. This experience required a clear hierarchy of choices while removing any distractions along the way. We were able to take advantage of UI elements and color to bring a new life to this page and make what was is an often dense process more inviting.
Clear steps in the flight selection included a price toggle of Dollars vs. Miles, a calendar view, daily flight list, and purchasing options with the goal of upselling a Den Deal discount membership.
The flight selection is one of the early tasks in the full booking engine and strived to keep the user in the know of all steps along the way. This was presented in a progress bar of icons along the top of the screen that layout each following step in order with the ability to jump between icons and edit any previous screen once the user has moved forward.
Taking an agile approach to this project gave us the quick iterations needed to launch an forward thinking and quantitative new product. Working within the boundaries of the WCAG 2.0 guidelines, the design system became both approachable and accessible. Measurable results for the Frontier team included a 150%+ increase in mobile flights booked, a notable increase in Discount Den memberships and an increase in the PERKS℠ upsell for the client.
