Beacon Air
The Brief
Design a mobile web experience for airline booking
My Role
Tools
Figma, Photoshop, Illustrator
Background
For one of my capstone projects through DesignLab, I chose to work on a brief based around designing a mobile web experience for a transportation service, like an airline or a train. I chose to go with an airline for a few reasons, the biggest factor being my own personal resistance to purchasing airline tickets on mobile web.
For the brief itself, I had to adhere to a few guidelines created by the fictitious company:
Discounts should be featured prominently
In-browser notifications that could tell users about changes to their flight/reservation would be nice to have
Design must include the booking process from beginning to end and the check-in process.
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
Research started by comparing and contrasting mobile web offerings from established budget airlines, which are all comparable from a booking standpoint. There's a date and destination selection, then flight selections, followed by seat/upgrade selections, and then checkout. Their branding and policies are where they really 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
Relies heavily on the Boeing 737
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)
Key Takeaways
Budget travel is a popular space in the airline market and is only becoming more popular
Booking has a very standard practice across the industry
Having a credit card through any of these airlines seems to be beneficial, but how loyal are customers?
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%
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. Travelers said they would pay for a better seat if the flight was longer.
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
Instead of a persona, this synthesis took form in an affinity map based on user interviews. This painted a picture of what the usual traveler looks like and what their motivations were, without adding too much outside noise. Personas can be great when targeting a specific customer, but air travel is more diverse than what a breakdown of one customer might be able to offer.
Definition
Defining A Problem
When booking flights on mobile, users can suffer information overload and confusion between fares, flight times, and even airlines
Travelers often 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
I started with a very minimal prototype that prioritized the necessary information that a traveler would need when booking a flight. One thing I noticed between airlines is that their presentation of layovers was either deceptive or nonexistent. Booking a flight might mention a layover but not the length or location. Some airlines would make you do the math, which is confusing for travelers who don't think too much about their timezones. I recently had to book a flight and noticed that certain airlines are better about this than when I made this project, but I felt like it was something I could use to differentiate the client from the competition.
I wanted the brand's voice to be helpful, but not annoying, so I added a few options to the booking process that travelers might find helpful. On the flight selection screen, users can scroll through the terms they searched and they will also see other regional options that can get them to the same place, but maybe even cheaper or faster depending on the flight availability. I also added the seat upgrade button as an option at the end, but didn't go out of my way to incorporate seat choice into the task flow. After listening to users, I determined this might be an optimal way to present this choice.
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
Key Takeaways
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 few changes. 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 it would be a cool, helpful way to get people to take the airline up on their promotions.
Book the cheapest flight from LAX to LGA
Check in for another flight
Key Takeaways
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.
I've learned so much in DesignLab, but this might be the most crucial project I've done in terms of giving me serious experience in the design realm. While the client might have been fictitious, the users were not, and the feedback I got from them 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 feels good to know I'm learning from the experience in real time. I think that's the first time I've given someone a task in a test that they didn't understand immediately, and that'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.
More importantly than that, it showed me that it's ok to take a big swing and miss. I didn't take their critique as a personal reflection of my work and my skill as a designer, and I took it as an opportunity to make something better that still made users and clients happy. I think 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