SKY AIR.

Designing a Seamless Airline Website for Better Usability

Role.

UX Researcher
Testing Facilitator
Designer

Key Skills.

Research
User Interviewing
Surveying
Prototyping
Testing

Introduction

Many airline websites struggle to meet the expectations of modern users.

Even though the aviation industry is built on delivering seamless travel experiences.

I embarked on a comprehensive UX research project as part of my UX Design professional diploma to identify these user expectations and pain points with a goal to blend the best UX practices into a cohesive and user-centered solution that addressed pain points while enhancing the overall digital experience for travelers.

Research Methods

Research was obtained from 3 main perspectives.

Competitive benchmarking, user interviews, and online surveys revealed insights on Ryanair, Emirates, British Airways, and Skyscanner's desktop websites.

1. Personal Perspective.

Competitive benchmarking with 4 websites offered key UX insights into usability, mental models, design principles, and accessibility, highlighting industry standards and areas for improvement.

2. Previous User Experience.

An online survey with 10 participants gathered broad user insights and identified trends, preferences, and pain points. It helped validate assumptions and inform early design decisions.

3. User Perspective.

User testing with 1 user revealed how real users interact with airline websites, uncovering usability issues and improvement opportunities to ensure the design met their needs.

Analysis of Problems

Research was analysed using affinity diagraming and revealed several common issues.

Below are the 7 most common issues identified from analysing the data collected with an affinity diagram.

1. Repetition.

“This is where they get you now.”

Unnecessary extra additions were repeatedly presented across multiple pages, creating a redundant and lengthy booking experience. This repetition not only increased the time required to complete the process but also led to user frustration and confusion.
‍
"Its all the extra stuff that I don’t like; the first 3 tabs are fine, but the extras are the parts I would skip over.”

2. Availability.

Landing pages cluttered with large promotional banners overwhelmed users and diverted attention from the primary search engine, which should be clear and easily accessible.

To address this, the landing page needs to be simplified, focusing on the search panel and essential tasks while minimizing distractions like offers unless users specifically seek them out.
‍
“If I know where I am going once again, I will just use the search bar at the top; all the other stuff is inconsequential if I know where I am going.”

3. Flight Details.

Users found it difficult to clearly identify the destination airport within a city, leading to confusion and potential booking errors.
“That’s a bit annoying; they should probably put something in that tells me which airport I am going to.”

Users were not clearly notified about selecting a different local return airport, leading to potential confusion and delays. Highlighting this option early in the process would save time and prevent issues.“That’s no good to me; my car is in Stansted.”

4. Status Information.

Unavailable fare options were presented without explanations, leaving users confused about why they couldn't be selected. Providing clear reasons for unavailability would improve transparency and user experience.
‍
“I wasn’t too hot about having options on the screen that aren't available to me; I don’t see the point in having that there. Why tell me what I can't have?”

5. Convenience.

The website inconsistently detected the user's location, departure airport, or currency, but not all three, leading to frustration. This lack of seamless integration created extra steps for users to correct the inconsistencies, detracting from the overall experience.
‍
"I dislike the fact that it was in pounds for sure; I think that is just annoying. They know I am in Ireland as well, so why wouldn’t they just put it in euros?"

6. User Support.

Users were not provided with clear instructions when unsure of what to do next, leading to confusion and frustration. Offering helpful next-step instructions would guide users more effectively through the process.
‍
“Yeah, so I thought there was meant to be something there, that I can't see how to actually book the flights. I would like the information to choose which fare; it just gave me information and price, and it didn’t prompt me to click the fare.”

7. Descriptions.

Many users were unsure of what the "Save your price" option meant, leading to confusion. Clarifying such messages would improve user understanding and enhance the overall experience.
‍
“The only thing that threw me was the "4 pounds, save your price," but then I realised, they could probably word that a little better.”

Solutions

Time to address each problem effectively.

I used customer journey maps and personas to gain a deeper understanding of user needs. The insights guided the creation of flow diagrams, sketches, and prototypes to address each problem effectively.

Repetition Solution

Availability Solution

Flight Details Solution

Status Information Solution

Convenience Solution

User Support Solution

Descriptions Solution

1. Repetition Solution.

To streamline the booking experience, I integrated flight extras into the fare class selection, presenting users with all relevant options—like cancellation flexibility, meals, and seating—at once rather than throughout the process.

Additionally, baggage requirements were decoupled from fare classes. All fare types now include a 10kg baseline allowance, with the option to add extra baggage later.

This approach reduces redundancy, simplifies decision-making, and allows users to focus on their travel priorities while maintaining flexibility.

2. Availability Solution.

The landing page prioritizes user goals by placing the search panel prominently at the top, exactly where users expect to find it based on their mental model. This design decision ensures that users can quickly and easily begin their primary task without unnecessary navigation or confusion.

To maintain focus and usability, the page is free from advertisements or other distractions that might compete for attention. By creating a clean and intuitive layout, the search panel becomes the clear focal point, providing a seamless and efficient entry point for users to start their journey.

3. Flight Details Solution.

To prevent confusion when booking flights in cities with multiple airports, the return arrival airport is clearly highlighted if it differs from the selected departure airport. This ensures users are fully aware of any discrepancies before finalizing their choices.

To further enhance clarity, a popup notification alerts users to this difference before proceeding to the next step. This proactive approach minimizes booking errors, enhances transparency, and ensures users make informed decisions about their travel plans.

4. Status Information Solution.

To enhance transparency and improve the user experience, any unavailable options on the website are either hidden entirely or visibly marked with a clear explanation of their unavailability.

This design choice ensures that users are not left wondering why certain options cannot be selected, minimizing frustration and confusion during their interaction with the site. By providing context, such as restrictions due to time, location, or availability, users remain informed and can adjust their choices without feeling misled or frustrated.

5. Convenience Solution.

To assist users who may be unsure about the next step in booking their flight, the system provides clear, on-page instructions outlining the purpose of the current task and what action to take.

This ensures users understand the process and feel supported as they navigate the booking journey. For users who remain inactive or appear confused for an extended period, the system takes additional steps by dynamically highlighting the relevant text or instructions.

This proactive approach not only guides users through the process but also reduces frustration, creating a smoother and more intuitive booking experience.

6. User Support Solution.

The website automatically syncs location information to simplify the booking process. Key details such as the user’s departure airport, currency, language, and current location are pre-filled in the relevant fields.

This automation reduces the number of steps users need to complete, saving time and effort while enhancing convenience.

By tailoring the experience to the user’s context, the system creates a smoother, more efficient process, allowing users to focus on their travel plans without unnecessary manual inputs.

7. Descriptions Solution.

To improve user understanding and reduce the likelihood of mistakes, the description of this option has been made more detailed and informative. It now clearly explains the options function as well as any associated costs, ensuring users are fully aware of what they are selecting before making a choice.

This enhancement helps users make more confident decisions by providing all necessary information upfront. By eliminating ambiguity, users are less likely to experience frustration or regret, ultimately improving their overall experience and satisfaction with the interface.

Clickable Prototype

Feel the Effects.

Interact with the website to further understand its improvements.

Testing & Changes

A usability test was conducted on the prototype.

This test, even with just 1 participant, allowed me to gather valuable insights on usability and areas for improvement.

Based on this usability test, several improvements were identified for the prototype, which have not yet been implemented. These adjustments will be addressed in the next iteration to enhance the user experience.

Baggage Clarification

Price Breakdown + FAQ's

1. Button Clarification.

During the usability test, the user was unaware that clicking the "Select Flight" button would reveal details about the available fare classes. This lack of clarity caused confusion about the functionality of the button, as the user expected it to perform a different action.

To address this issue, rewording the button text to "See Fares" would better communicate to the user that more detailed information about the fare classes will be displayed after clicking.

This simple adjustment would help set clear expectations and guide users more effectively through the booking process, ensuring they understand the next steps and the information they will receive.

2. Improved Seat Description.

During the usability test, the user expressed confusion about the differences between the luxury seats in Business Class and the extra legroom seats in Economy Plus. They wanted more detailed information to help them understand how each option compared in terms of comfort, amenities, and overall value.

To improve clarity, additional information should be provided about the features, benefits, and unique aspects of each seating option.

This would enable users to make more informed decisions based on their preferences, enhancing the overall booking experience.

3. Include More Information on the Process.

During the usability test, the user was uncertain about the purpose of the "save the price for 24 hours" function and how it worked. This lack of clarity made the user hesitant to engage with the feature, as they felt they lacked enough information about the process.

To address this, the offer should be made more prominent and visually distinct, conveying that it’s a commonly used and valuable function. Additionally, more detailed information about the process should be provided, ensuring users understand how the feature works and how it benefits them.

This would help build trust and encourage users to take advantage of the price hold option.

4. Baggage Warning.

During the usability test, the user added a 20kg checked bag for the outbound flight but forgot to include one for the return trip. To prevent this oversight, a baggage warning pop-up could be added, prompting users to confirm their baggage selection for both legs of the trip or allowing them to go back and adjust the baggage for the return flight.

Additionally, another helpful feature would be to automatically add the same baggage allowance for the return trip unless the user manually removes it. This would streamline the process and reduce the chances of users missing important baggage selections, improving the overall booking experience.

5. Baggage Confirmation Clarification.

During the usability test, the user appeared to believe that by adding a 20kg checked bag to the trip, Passenger 1 had lost the original 10kg allowance for their journey. The system did not provide a clear warning or explanation about this change, leading to confusion.

To address this, better clarification of the baggage allowances should be provided on the confirmation page. This would help users understand their full baggage entitlement, ensuring they are fully informed and reducing the risk of errors during the booking process.

6. Bigger Price Breakdown Button and Add FAQ’s.

During the usability test, the user indicated that the button to view the price breakdown was too small and nearly went unnoticed, leading to uncertainty about the cost. Making the button more prominent would help users feel more confident about the price, encouraging them to complete the booking.

Additionally, incorporating an FAQ section on the page or before checkout would address common user questions prior to purchase, while providing another set of FAQs after booking could help resolve any post-purchase concerns. This added support would improve the overall user experience and increase trust in the process.

Challenges

Project problems I was faced with.

Find out the limitations and challenges encountered.

1. Balancing Brand Identity with User Preferences.

Establishing and maintaining a consistent brand identity while aligning with diverse user preferences was a significant challenge. The visual elements, colours, typography, and imagery needed to reflect the brand's values while ensuring clarity and usability for users. Bold branding choices had to be thoughtfully balanced to avoid overwhelming the interface, and consistency across all pages and interactions was critical to creating a seamless experience.

2. Navigating Research Constraints.

Comprehensive user research, including competitive benchmarking, surveys, interviews, and usability tests, was essential for understanding user behaviours and pain points. However, balancing the time-intensive nature of research with tight project deadlines posed a challenge. By prioritizing high-impact research activities and integrating agile methodologies, I ensured critical insights informed the design process while maintaining project momentum.

3. Limitations of Prototype Testing.

Testing the mid-fidelity prototype revealed challenges due to its incomplete functionality. With only one primary pathway, booking a flight, mostly interactive, the prototype lacked the realism needed for entirely reliable results. However, this phase was vital for identifying early design issues and refining the user experience. Moving forward, iterative refinements and additional testing with higher-fidelity prototypes will enable more actionable insights.

4. Interpreting and Analysing User Feedback.

Analysing feedback during usability testing highlighted challenges in interpreting user actions, facial expressions, and comments, particularly when opinions conflicted or when socially desirable responses influenced the data. Balancing observable behaviours with user input required careful analysis to extract authentic pain points.

Key Learnings

What I learned as a result of this project.

Various aspects were learned or improved upon throughout the design process.

1. The Importance of In-Depth Research and Brand Identity.

One of the key takeaways from designing this airline website was the realisation of how time-consuming the research phase can be, but also how critical it is to invest ample time upfront in both research and brand identity development.

Establishing a clear and consistent brand identity early in the process is essential to creating a website that not only reflects the brand’s values but also resonates with users. By dedicating more time to these foundational steps, it would ensure that the design addresses user pain points effectively and creates a more seamless, user-centered experience.

2. The Challenge of Early Testing with Incomplete Prototypes.

I learned the value of conducting early testing to identify issues and address pain points early on.

However, I also discovered the challenge of gaining truly insightful feedback when testing prototypes that are not fully developed or do not provide a realistic user experience. While early tests can highlight usability issues, the limitations of an incomplete prototype often make it difficult to gauge how well the design actually solves the user’s pain points.

Future Considerations

What I would consider with my future projects.

From my learnings, challenges, and limitations, there are various things I would adapt to my future projects to improve workflow and the general project process with a team.

1. Focus on Accessibility. 

In future projects, I would place greater emphasis on WCAG (Web Content Accessibility Guidelines) and accessibility considerations, both during the initial design phase and throughout the iterative process.

‍Reflecting on this project, I realise that accessibility wasn't as central a focus as it should have been. Ensuring that a website is accessible to all users, including those with disabilities, is crucial for inclusivity and creating a seamless experience for everyone.

2. Mobile-First Design Approach.

For future projects, I would prioritise a mobile-first design approach, especially for websites like this one where mobile usage is more common.

Designing with mobile as the primary focus ensures a more streamlined and optimised user experience, which can then be scaled up to other devices. It's much easier to adapt a mobile design for larger screens than to scale down a desktop version to fit mobile, and taking this approach from the start will lead to a better overall design that meets user needs more effectively.