Travelink
Airline booking website
Overview
This case study showcases the design process for an airline travel websites. This case study explores the redesign of a travel website platform aimed at simplifying the travel planning process while increasing booking conversions and user satisfaction.
My Role
Research: User interview, Competitive analysis, Customer Journey Mapping, Affinity Diagram
Interface design: User-flow, Lo fidelity and High fidelity design, Prototype
Usability Testing: Moderated usability testing
Challenge
Have you ever been so excited to travel, with everything in place—your flight booked, bags packed, and eagerly waiting for the big day? Only to arrive at the airport and hear the dreaded words, 'Not today,' because you booked the wrong date?
Travel-Link was inspired by a personal challenge I encountered while booking flights. I noticed that booking websites are often cluttered with marketing campaigns, offers, and up-sells, which distract from the main purpose—booking a flight. While I understand that businesses need to generate revenue, it shouldn’t come at the expense of frustrating users who are trying to complete the primary task they came for.
In this project, I applied UX design principles to create an intuitive user interface that prioritises the booking process while still allowing space for marketing campaigns, striking the right balance between user experience and business goals.
Travel-Link was inspired by a personal challenge I encountered while booking flights. I noticed that booking websites are often cluttered with marketing campaigns, offers, and up-sells, which distract from the main purpose—booking a flight. While I understand that businesses need to generate revenue, it shouldn’t come at the expense of frustrating users who are trying to complete the primary task they came for.
In this project, I applied UX design principles to create an intuitive user interface that prioritises the booking process while still allowing space for marketing campaigns, striking the right balance between user experience and business goals.
Process Summary
This is a high-level view of the design process, from early research and testing of similar travel apps with users to gather pain points, to analysing the data, as well as designing and testing the design with users.
Research
To tackle this challenge, I began by thoroughly researching similar travel and booking websites. I conducted a comparative analysis to uncover pain points and areas for improvement.
I used four different type of research methods, including:
- competitive benchmarking
- online surveys
- Interviews
- usability testing
The aim of this research is to gather a lot of feedback, identify pain-point, user needs,
understand how other competitors are solving this problem.
Usability Test
I conducted a remote moderated usability test, evaluating 2-3 airline and flight aggregator web apps. I asked participants to complete booking-related tasks on each platform. By observing how users navigated these tasks, I identified pain points and obstacles to avoid in my product, as well as opportunities to offer improved solutions.
Key takeaways
- Too much Information at once: Users found too much information displayed at once to be overwhelming, particularly around baggage rules, terms, and conditions.
- Simplify Navigation and Booking Flow: Users found the booking process lengthy and complex, often involving too many steps to complete a booking.
- Enhance Search Functionality: Users had difficulty finding flights that matched specific preferences, such as direct flights or flexible dates.
- Transparent Pricing Information: Users expressed frustration with hidden fees and unclear total costs.
User Quotes
Competitive Benchmark
In this research, I analysed four competitors within the industry to identify potential pitfalls and opportunities for outperforming them. By applying Jakob’s ten usability heuristics, I was able to pinpoint key usability issues and develop a targeted improvement plan
Surveys
I created a survey using google form to collect quantitative data directly from users, aiming to gather user goals, preferences, and Travel opinions.
Define (Analysing the data)
Affinity Diagraming
After gathering extensive data from all the research I have done, it is now time to make use of this data by analysing it, finding patterns, and creating an affinity diagram to group similar data patterns together. After making sense of the data, I created a customer journey map to visualise the customer’s booking process journey, considering their pain points, goals, context of use, and behaviours.
In collaboration with fellow UX designer Moon Abdul Rahman based in Germany.
In collaboration with fellow UX designer Moon Abdul Rahman based in Germany.
Key themes and patterns that emerged from this Affinity diagraming includes
1. Input Fields and CTA
2. Search Functionality
3. Promotion and Upsell
2. Search Functionality
3. Promotion and Upsell
4. Pricing
5. Selection of dates and Airport
6. Clear Copy
5. Selection of dates and Airport
6. Clear Copy
Customer Journey Mapping
With the substantial data I gathered during the interview, I was able to identify patterns and group them into similar themes. I then began visualising the complete experience and all touch-points for users booking an airline. To achieve this, I used Customer Journey mapping, as it is the best tool to visualise the end-to-end journey of users navigating our app or website. It also allows stakeholders to see the steps without designing any interface
This process also identified key areas for improvement to ensure a positive experience throughout the airline booking process. It offered valuable insights on enhancing user satisfaction and creating more user-entered solutions
This process also identified key areas for improvement to ensure a positive experience throughout the airline booking process. It offered valuable insights on enhancing user satisfaction and creating more user-entered solutions
Design (Creating an experience though Interface design )
To begin the Interface design process, I expanded the customer journey map into a user flow to enhance the touchpoints of the user's experience journey.
Flow Diagram
The goal of this user flow was to create a clear path for the user from the start - the end, reducing friction and improving usability to enhance satisfaction and provide a seamless, enjoyable experience.
Sketching (The power of pen and paper)
The process enabled brainstorming and iterative refinement of design solutions, helping to identify potential issues early. Research insights were incorporated into the design to ensure a user-centered approach.
Lo-Fidelity design (Testing Early with user)
While sketching is an easy way to generate multiple design idea, Lo-fidelity design allows me to start testing and validating design concepts in a realistic setting to identify usability issues, gather user feedback, an also fix the interactions.
Rethinking the flow diagram
The most common feedback I received during user testing was that the steps felt lengthy and that the summary page could be more prominent. Users pointed out that they will like to review the details one more before proceeding to payment
New Flow Diagram
Hi- fidelity & Prototyping
With the Lo - Fidelity in place i started designing the Hi-fidelity design By consistently referring back to my flow diagram and also making sure i’m designing for user pain-point a solution that solves this pain-point.
Clear Proposition
It takes users around 10–20 seconds to decide whether to stay on or leave a website. First impressions matter, and showing customers what they need while guiding them through every interaction on your website is essential. On this homepage, I ensured we created a positive first impression and made the search bar more prominent than any other content on the site
Search Functionality
Search functionality was simplified. I noticed that suggestions were confusing because some airlines only fly from specific airports. Displaying all available airports in each location made it easier for users. The flight type option in the search bar also helped users select between return, one-way, and multi-city trips. Additionally, the calendar’s visual cues were helpful for users to see which days they selected.
Search Result
According to the research I conducted, most of the challenges users encounter are on the search results page.
Below are users' quotes:
“I would like to see if there are other times available. For instance, if there’s a flight at 12 PM and another at 4 PM, both should be displayed.”
“It’s giving me the outgoing flight from Cork to Faro, but showing me only the flight on the 24th is a bit confusing, actually.”
“It says... um, it looks to me like I was leaving at 13:30 in the afternoon, but really it leaves at 11 AM. I would find that confusing.”
While designing this page, I took most of the users' pain points into consideration to address these issues.
First, we applied the power of progressive disclosure to avoid overwhelming the page by showing users only what they need.
We also effectively communicated how to select departure and arrival airports, reducing any need for extra thought
Below are users' quotes:
“I would like to see if there are other times available. For instance, if there’s a flight at 12 PM and another at 4 PM, both should be displayed.”
“It’s giving me the outgoing flight from Cork to Faro, but showing me only the flight on the 24th is a bit confusing, actually.”
“It says... um, it looks to me like I was leaving at 13:30 in the afternoon, but really it leaves at 11 AM. I would find that confusing.”
While designing this page, I took most of the users' pain points into consideration to address these issues.
First, we applied the power of progressive disclosure to avoid overwhelming the page by showing users only what they need.
We also effectively communicated how to select departure and arrival airports, reducing any need for extra thought
Progressive Disclosure
This design principle allows me to present necessary information by giving users what they need to know, when they need to know it. This helps reduce complexity in the design. With this approach, I was further able to let users proceed without feeling overwhelmed. For instance, upgrades and seat selection options are hidden until the action required to reveal them has been completed by the user
Annotating the design
Annotating the design for developer hand-off
Result and Learning
This is a personal project there are no metrics to measure the impact. However, There some learnings which i Highlighted below
Iterative testing captures user pain points early
Regular user testing helped identify potential issues early on, such as users struggling with the multi-step booking process. addressing these pain points in each iteration allowed for continuous refinement, ultimately leading to a more streamlined and user-friendly booking experience
Clear Communication Enhances User Confidence
Displaying flight details clearly and allowing users to review key information, like dates and times, reduces confusion and increases trust. Users appreciate the ability to confirm details before proceeding to payment, minimising errors and last-minute uncertainty.
Regular user testing helped identify potential issues early on, such as users struggling with the multi-step booking process. addressing these pain points in each iteration allowed for continuous refinement, ultimately leading to a more streamlined and user-friendly booking experience
Clear Communication Enhances User Confidence
Displaying flight details clearly and allowing users to review key information, like dates and times, reduces confusion and increases trust. Users appreciate the ability to confirm details before proceeding to payment, minimising errors and last-minute uncertainty.
