UX & UI Design: Beacon Air
The Brief
Design a mobile web experience for airline booking
My Role
Tools
Figma, Photoshop, Illustrator
Background
For this project, I had to design a mobile web experience for an airline. I was excited to give it a shot, given my own personal resistance to purchasing airline tickets on mobile web.
For the brief itself, I had to adhere to a few guidelines:
Discounts should be featured prominently
Design must include the booking process from beginning to end and the check-in process.
In-browser notifications that could tell users about changes to their flight/reservation would be nice to have
The client also mentioned in the brief that they wanted to be there for "the lowest point of the customer's journey." I'll talk about addressing that more in the research portion, but it was crucial to how I approached solving problems and designing something new.
Discovery
Research
I compared mobile web offerings from established budget airlines, which follow a standard structure. Their branding and baggage policies are where they differ.
Low-cost, but not a "Budget" airline
Airline, car rental, and hotels all available to book on their website
Reputation for friendliness and new airplanes
Transparent pricing
Relaxed baggage policies, unique boarding process
Allows you to book airline, rental cars, hotels, and even cruises from their website
International presence is small but getting bigger
Cheap, but has more legroom than other budget carriers
Airline booking only
Unreliable network, subject to restructuring
Hidden fees
Future is uncertain (Declared bankruptcy in the middle of researching this project)
User Interviews
5 people interviewed in total
No demographics selected in particular, airline travel is pretty democratic (i.e. we all do it)
100%
Prefer their desktop for airline booking
20%
Will pay to choose their seat
0%
"I need the information that desktop web can provide, I might miss something major on mobile web."
"I would only pay to pick my seat if the flight is especially long, like more than six hours"
"I'm not loyal enough to one airline to get their credit card"
Key Takeaways
Lowest price was the number one priority across all interview subjects
Nobody I interviewed liked booking on mobile web, citing that they liked the additional information they could see on desktop
Price didn't factor into paying for an upgraded seat, but time did.
The "Lowest Point" of the customer's journey, as mentioned in the background, wasn't always something we could solve with software. It's usually an issue of missing bags, flight delays, or other structural issues.
Synthesis
I made an affinity map based on user interviews. This painted a picture of what motivates the typical traveler and why they book flights on desktop.
Definition
Defining A Problem
When booking flights on mobile, users can suffer information overload and confusion between fares, flight times, and even airlines
Travelers mentioned that they didn’t care about the extra add-ons that airlines offered, citing that they were too expensive or that they didn’t care about where they sat
"How might we prioritize information on the website without making it too busy?"
"How might we increase confidence in booking?"
"How might we use branding/company voice to offer extra options in a courteous way?"
Concept
Booking a flight is straightforward, but through building this out, I learned that there are a lot of features that make it an easy task rather than something that is immediately easy. Travelers have to select how many people are in their party, even if all of my interviewees said that they only book for themselves and tell other people in their party about the details. Travelers must also select their flights, their seats, and their amount of baggage. This is easy, but does require a lot of building on my part.
The steps to book a flight are uniform across the industry, so I don't think there's a lot of room for innovation in process. Where I can innovate or experiment is in presentation.
Feature List
Essential
Ability to search for and book flights
Select dates, amount of travelers, baggage
Boarding pass
Transparent pricing
Should Have
Geographic auto-suggestion for departing airport
Filter for cheapest flights
Select seats
Easier calendar selection
Layover alerts
Nice To Have
Hub for in-flight purchases/entertainment
In-browser notifications
Baggage tracker
User Flows
Design
Testing
Determine maneuverability of the product
See if users find the alerts/notifications
Evaluate user attitudes towards calendars/date-pickers
Book the cheapest flight from LAX to Laguardia in NYC
Check in for your flight
Results
Users had no issues booking the cheapest flight
People love the ability to see the cheapest flight immediately
Users thought a standard calendar might work instead of one that shows all fares while booking
High Fidelity Wireframes
In building out the high fidelity version of the website, I added a standard calendar to the date picker and I added suggested destinations to the original arrival airport screen. I wanted people to see some of the promotions from the airline, and I hoped showing promotions to customers would be helpful.
Book the cheapest flight from LAX to LGA
Check in for another flight
Results
Attitudes around the "Suggested destinations" feature ranged from "indifferent" to "hate it"
0/5 users could find the search bar
Users breezed through everything after clicking the "Search" button, easily finding everything
Nobody paid much attention to the notifications, but they did like how easy it was to find the cheapest flight
3/5 users were confident in using the mobile web version, the other 2/5 said they'd stick with the desktop version
Select quotes:
"I don't feel like plane tickets need to be a 'Desktop purchase' if I'm using this."
"I know it's not tricking me into going to these destinations, but it's not relevant."
"I like the seat upgrade suggestion, that feels like a more helpful way to implement sales because it's still my choice."
Here are the changes I made after testing with all of the feedback I got from users
Redesigned flight search screen
Merged search bar with suggested destinations
Changed promo destinations into recently searched flights or flights users can track for future trips
Made layover alerts more specific
Added in-browser notifications to the boarding pass hub for up-to-date travel information
I do like what I designed, but looking back on it, I wonder if going for a traditional experience was the best move. Users sprinted through the tests and missed a lot of those subtle differences until I mentioned them at the end. I now know to expect some of that due to the user testing environment, but maybe a completely different feel to the process would make customers slow down and read the information. That's a technique I could employ in future projects where the subtle differences and information are really important.
This was the most crucial project I've done in terms of giving me serious experience in the design realm. The feedback I got from my users was instrumental to my understanding for this project.
Seeing people get frustrated by my work and feel negatively toward it enough to tell me was really eye-opening. While it doesn't feel good to whiff like that, it's important for me to experience as a designer so that I can work to avoid it in the future. It's also the first time that anyone has perceived something I've designed as deceptive and unhelpful, and that's more for me to work on and steer clear of.
This project also showed me that it's ok to take a big swing and miss. I didn't take the critique as a personal reflection of my work and my skill as a designer, I took it as an opportunity to make something better that still made users and clients happy. That's going to be more and more important as I continue to work.
Jay Papandreas
Denver, CO
2025
Jay Papandreas, 2025, all rights reserved