Designing for Flexibility:

Enhancing the Frontier booking experience with a new airfare calendar

My Role

I worked as the lead designer on this feature for the new iOS mobile app. From gathering business requirements, to visual design, and building the interactive prototype. Also collaborated with the design and development teams to brainstorm ideas and problem solve.
Year: 2023

Project Summary

A fare calendar simplifies the booking process by allowing users to compare prices visually, reducing frustration and increasing satisfaction. Frontier wanted to explore the idea of adding a fare calendar to the beginning of the flight search. This would improve two main areas: Key elements of in-app onboarding include:

Search Behavior: Customers often start with broad searches (e.g., flexible dates or destinations) and narrow down based on price and timing. Robust filters and sorting options are essential.

Loyalty Programs: Allows discoverability of fare programs upfront. Integration with loyalty programs encourages repeat bookings, with 45% of users reporting that rewards affect their choice of airline.

*Frontier recently added a new loyalty fare called GoWild, allowing unlimited flights for an annual fee. Unfortunately, the current app functionality was outdated and didn’t allow GoWild searches, thus frustrating users.

Challenges

Adding a new feature like this presented some challenges:

Backend + Technical Restraints: The roundtrip price differs from the one-way fare. How were we going to display this? What needs to happen on the backend?

UI + Visual Design: Frontier has three different loyalty tiers. How are we going to display these in the calendar? How are we going to display blackout or disabled dates?

Research

Competitive Analysis

I researched fare calendars from other airlines, travel companies, and Google Flights.

Qualitative Insights

I reviewed our social media accounts, which can be a valuable source of 
real-time feedback from customers. Examples above are from Reddit.

Solutions

User Flow

Design and Functionality

Wireframes

Designed a couple different layout for the calendar.

High-Fidelity Comps

After multiple design iterations, I came up with a tab bar to display the different loyalty tiers. The fare price would dynamically update after the user selects the departure date. The calendar would be a pop up drawer that would slide in from the bottom.

Interactive Prototype

Below is a screen recording of the Figma prototype.

Future Considerations

We are still fine tuning the designs.

Things we need to consider:

  • How do we incorporate airline miles?

  • How can we educate users on the different fare types sooner in the flow?