Beacon Air
TL;DR
Brief
Redesign or create a new mobile web experience for an airline. The client wants to make sure that discounts were prominently featured and suggested in-browser notifications be tested but didn't require them.
My Solution
I made a mobile-first experience that attempts to provide as much information as necessary to make users feel confident in their choice to use mobile web for booking rather than an app or desktop web.
Outcome
After making a design decision that users disliked, I listened to their feedback and that helped me make something that users enjoyed while still meeting the client's needs.
My Role
UX Designer, UI Designer, UX Researcher
Deliverables
Prototype of the MVP for this feature.
Background
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.
Research started by comparing and contrasting mobile web offerings from established airlines and finding them all to be very comparable from a booking standpoint. There's a date and destination selection, then flight selections, followed by seat/upgrade selections, and then checkout. I performed a SWOT analysis on a competitive section of the marketplace: budget-minded carriers. I chose JetBlue, Southwest, and Spirit Airlines as my three competitors with JetBlue being a higher-end budget-minded carrier and Spirit at the lower end. Southwest slots right in the middle for budget and has a more human-forward experience than Spirit, but JetBlue's higher prices do come with better accommodations for travelers.
I also interviewed five people one-on-one to get a cross section of travelers. One thing I made sure to do was get a diverse pool of subjects because air travel is something that people do across all demographics.
Before my interviews, I took stock of my own actions when booking during air travel. I noticed that I try to find the cheapest flight I can that will also be comfortable, but I never choose my own seat. For one thing, it can add an unexpected expense to my travel budget, but it also adds a barrier between me and checking out. I wondered if there was a price point or percentage of the total where people would purchase a seat upgrade, and I set out to find that in my interviews.
SWOT Analysis (Click to expand)
User interview insights
Interviews went well, and I mentioned that I had a diverse group of interview subjects, but I was surprised at how much everyone's behaviors aligned. It didn't matter between US citizens and folks abroad, young or old, we all tend to book our flights the same way: We have a specific date that we need to be somewhere, we balance the cheapest fare with the nicest airline we can afford, we don't want layovers unless they're absolutely necessary, and then we mostly skipped seat upgrades before checking out. I asked if anyone had brand loyalty to a certain airline, or if they had a credit card through any airlines, and while only one person had an airline credit card, nobody felt any affinity toward one airline over another.
Another interesting fold: Nobody used mobile web to book flights. Everyone I spoke to said that they felt like plane tickets were decidedly a "Desktop Purchase." Users want all of the information that a desktop canvas can afford and they want to be confident in their purchase. Mobile experiences currently provide a lot of information, but it can be confusing to differentiate between flights and users said they were less confident in booking on their phones.
I wanted to find a certain price point where people might be more inclined to book a seat upgrade, and what I learned was that there wasn't a price point. Rather, there's a time point where people decided it might be worth spending more to get the seat of their preference. That point varied, but when people get over a four or five hour flight time, they start to consider the upgrade and their comfort.
I also spoke to the subjects about the customer's journey, specifically the worst parts of it. Aside from hidden fees that popped up during checkout, everyone's lowest point in their own journey was something that a software product can't really solve. People hated their layovers and had struggles with lost luggage, one subject told me about a time where he booking through a third-party service turned into a disaster when one leg of his flights was canceled and he couldn't re-book until the service opened the next morning. These are all miserable experiences, but they're just not anything that I could design a solution to when booking. What I could do, however, was design something that gave customers the ability to avoid those issues entirely or give them enough information to make them feel empowered and confident in those moments.
Problem statements
When booking flights on mobile, users can suffer information overload and confusion between fares, flight times, and even airlines
How might we prioritize information on the website without making it too busy?
How might we increase confidence in booking?
Multiple users mentioned logistical breakdowns, such as delays/layovers/customs
Multiple users mentioned problems with booking fees showing up at the end and providing customers with unexpected new costs
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 sell customers on these options without selling the options to them?
How might we use branding/company voice to offer these options in a courteous way?
Low-cost airlines typically offer these things during the booking process and users mentioned that these feel like they get in the way of booking, rather than offer any value
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.
Booking arrival and departure was essential, as was selecting one flight from a list of flights. 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.
My product should have a list of airports to select, but it would be nice to have a geography-based suggestion populated when users open the site. It also should have a calendar to help users visualize their travel dates, even if I think the current calendar implementation on airline websites is cluttered and not intuitive to use. Research suggested that it should have layover alerts on the flight selection screen and the brief asked to use an in-browser experience for check-in.
Adding to the customer experience, I brainstormed a scheduling iteration where users started by entering the destination first and selecting from a calendar that let users see the cheapest range of flights. I wanted to suggest seat upgrades rather than ask customers to decline them as airline websites do now. Again, there's not a price that stuck out to customers for that upgrade, but if the site suggested an upgrade for a certain amount of time, they might do it. I also included alerts for long/short layovers and wanted to work out the specifics with users in testing. Short layover alerts were designed to make sure travelers could make the next leg of their trip without sprinting through the airport. Long layover alerts were designed so travelers could avoid spending a full day of travel in an airport. Finally, the client brief asked for in-browser notifications, so I added those to the screen with customers' boarding passes.
User task flow
Direction
From my interviews and research, users all wanted a transparent experience with the airlines, and they mentioned how much they didn't like the extra screens. I didn't want this to be a confusing experience, so I decided that a familiar interface would be best. My thought was that I could add subtle differences to set this experience apart from traditional ones.
I wanted to add information without making the experience overwhelming and I wanted to display helpful notifications that add to the customer's knowledge about their trip, which could help them avoid those low points in the customer journey. For example, if users know that even a short delay could make them miss a connection, then at least they know the risks associated with the choice because the information is on the page.
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.
Low Fidelity Wireframes 1
Low Fidelity Wireframes 2
Low Fidelity Wireframes - Tablet
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.
In the brief, the client asked that their deals and discounts be displayed prominently on the page. I had a banner ad on the front page and there were other discounts lower on the page. As mentioned, I wanted a helpful voice for the brand, and in line with that, I thought it could be nice to see suggested destinations that are on current discount when users were searching for their destination. This did not go as planned in the testing phase.
After sprucing up the wireframes for user testing, they looked like this:
High Fidelity Wireframes
Testing consisted of five moderated user tests where I sat with users as we went through the two task flows, Booking and Checking In. I wanted to test the maneuverability of the site and gauge users' attitudes as we went through the task flows. I quickly realized that I made a design mistake by separating the search bar from the destination choices, and this frustrated users. In fact, 0/5 users were able to find it. After they found it, they got through the task easily, but that would need some tweaking.
User attitudes after testing
Select quotes:
As referenced earlier, I added discounted fares to the destination suggestion screen. This was met with mixed results from users, with their attitudes on it ranging from "indifferent" to "hating it." I was surprised because I thought this might be a helpful way to suggest destinations and deals to users, but it confused users at first because they couldn't find the search bar and their assigned destination wasn't in those suggestions. Some users found the suggestions to be deceptive rather than something that added to the experience. This was the exact opposite effect I wanted, and the trust in the product couldn't erode because I couldn't build it in the first place. That had to go when I made iterations.
After starting on the wrong foot, the tests got much better. Users breezed through the remaining actions and didn't find those screens confusing. Users loved a "best price" signifier on the top option and they also liked the idea that they could sort their searches by things other than price, but agreed that they wanted the price to be the default sort option.
Users also liked the alerts that showed layovers and their lengths, which was a positive, but several of the testers missed them entirely and I had to ask them about those alerts later in the interview. We agreed that the alerts should be less vague, so I asked them what that threshold looked like, and 4/5 users agreed that above 4 hours for a layover would be a long layover. Users determined that a short layover was any layover that would make them run through the airport, and with gates closing roughly 20 minutes before estimated time of departure, I decided that any layover under 30 mins would be considered short enough to warn users.
At the end, I asked how confident users felt in making their purchase on the mobile web version of this site and 3/5 said they were very confident that they made the correct purchase and that they would use this version of the site as opposed to the other 2/5 who said that they would still stick with a desktop version of this website.
I redesigned the flight search screen to not only merge the search bar and the suggestions, but I changed the destination suggestions from irrelevant discounted fares into recently searched flights or flights that users wanted to track for future trips. I felt that the ads and discounts are still prominently displayed and that they don't need to interfere with the customer's journey. I also made the layover alerts more specific and added in-browser notifications to the boarding pass hub that would give travelers up-to-date information and remind them of impending deadlines.
Final High Fidelity Wireframes
Final Tablet High Fidelity Wireframes
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