The Challenge
When tasked with designing a fictional airline website as part of my UX Design Institute course, I quickly saw a major frustration among users with aggressive marketing tactics, such as pushy recommendations, and rigid navigation, hampering their flight search. These pain points not only hurt the user experience but also diminished trust in the brand.
Thanks to my background in marketing and communication, I understand the importance of transparency in building a strong customer relationship. My goal was clear: to create a frictionless and transparent booking process that would make users feel confident in their choices and ensure a smooth experience.
- My Role: UX Designer
- Timeframe: April–October 2024 (Part-time)
- Tools: Pen & paper, Miro, Lookback, Dovetail, Figma
- Techniques: Benchmarking analysis, usability testing, affinity diagram, customer journey map, flow diagram, wireframing, prototyping, annotations
Research
Analysing the Competition
To begin, I conducted a benchmarking analysis of existing airline booking systems, looking for common issues and best practices. This allowed me to identify key pain points that many users were experiencing.
User Testing: Insights that Took Flight
I conducted two usability tests and reviewed recordings from additional user tests provided by the UX Design Institute. This research revealed several key pain points:
- Filters resetting: users struggled with resetting filters every time they adjusted dates.
- Misleading fare recommendations: higher-priced options were highlighted as “Our recommendation,” despite offering minimal benefits.
- Hidden baggage costs: Additional fees for baggage were difficult to find, causing users to feel blindsided.
- Confusing price displays: the total cost summary included additional services like hotels, causing confusion over the true price of the flight.
- Unexpected taxes: additional charges appeared late in the process, surprising users and causing frustration.


“It’s asking me to hold a lot of information in my short-term memory, forgetting settings every time I change the day. It’s annoying.”
“I see a marketing ploy. When they say ‘our recommendation’, I assume it’s in their best interest, not mine.”
“Before showing me what the price of my flights, they’re trying to get me to also book a hotel via them and showing that as the first price. It’s too much of a push.”
“None of these [timing filters] are an option to cut out unsociable hours for young kids. So I find that presenting those options was a waste of time.”

Personas: Designing for Millennial Families
The persona I focused on was a millennial traveling for leisure, typically two adults and a young child. These users value comfort and convenience over price, especially when it comes to direct flights and family-friendly schedules. They are willing to pay a bit more for a stress-free experience.
Mapping the Journey: Focus Areas for Improvement
I created an Affinity Diagram to organise these insights and created a Customer Journey Map to visualize the user’s entire booking experience. This exercise revealed three primary focus areas for design improvements:
- navigation flexibility
- clearer pricing
- more neutral marketing.
Design Solutions
From Insights to Wireframes
With the research insights in hand, I began the design phase with a flowchart. This helped me clearly visualise the user’s path through the booking process and identify all the key actions and each screen states needed to create a seamless experience. Next, I sketched initial wireframes to explore different layout options, iterating quickly to experiment with various elements and interactions.
Features That Landed: Key Solutions
I moved on to mid-fidelity wireframes in Figma, where I incorporated the key features that would address the identified pain points
1. NAVIGATION IMPROVEMENTS:
- Clear progress indicator: a visible, clickable progress bar shows users where they are in the booking process.
- Forgiving navigation: users can easily go back and modify part of their search without restarting the process.
- Persistent & relevant filters: filters remain applied across pages, with the most common ones accessible with one click (direct flights checkbox and price slider).

2. NO MORE PUSHY MARKETING:
- À la carte extra services: Optional services like additional baggage and seat selection are presented in an accordion, giving users more control without feeling pushed. They decide to click to know more if they are interested.
- Neutral fare presentation: No “Our recommendation” fares or red highlights. The price is shown without unwanted upsells, focusing on transparency.

3. TRANSPARENT INFORMATION:
- Upfront pricing: clear total price for all passengers with all taxes and charges included. Cost for additional bag displayed before selecting a fare. This helps eliminate surprises at checkout.
- Visual overview card: summary of the key information of user’s booking (dates, cities, passenger names, bags and seats). This feature was informed by user testing, as participants double-checked these specific details before checkout.

Iterating on Feedback
After creating a functional prototype, I conducted a second round of usability testing. Some button placement and UX copy needed refinement to enhance clarity and minimise any potential confusion. Feedback and testing confirmed that users appreciated the transparent pricing and the visual overview card before checkout.


“I usually hesitate between the first two fare options. And It’s usually about luggage. I like that it’s clearly stated here that an extra bag costs €60, which makes the math much easier.”
“This [overview card] like that, if all airlines could do this, it would all be so much clearer for me!”


Takeaways: Lessons for Future Flights
Although this was a fictional project, it taught me valuable lessons about balancing user needs with business objectives. Transparency was the main priority, but I also considered how business constraints might affect the user experience. Future testing would be required to assess the impact of my solutions on actual sales.
Given more time, I would conduct additional rounds of usability testing and in-depth interviews to further refine the personas and test more scenarios. This would provide a more comprehensive view of user needs and improve the overall design.
My next steps are to create a visual identity for the fictional airline and build a design system to refine the prototype further.