Skip to content

Designing a flight booking process for desktop

Improving discovery and selection of flights, seats and extras.

1. Overview of project

A start-up airline wants to create an online flight booking experience that is fast, easy, and intuitive. Exactly what this would entail required delving into what this meant for the user and the company. The case study shows how I employed a UX design problem-solving approach to design an online flight booking process that limits disruptions and increases flow in the airline traveller’s flight ticket buying process. The case study shares significant findings, developments, and moments in my UX problem-solving process.

Duration: 8 months

1.1 Team members

UX:
Quinten Williams

Affinity diagram included:
Rhett Martyn
Susan Williams

1.2 My practices

User Experience Designer
 (UXD)
UX Research
UX Design
UX Writing

1.3 My tools

SurveyMonkey
Camtasia
Zoom
Google Hangouts
OBS Studio
Pencil, pen and paper
Miro
Smaply
Figma
PowerPoint
Acrobat
Photoshop

1.4 High level process, methods and outcomes

I started the design process with a research phase where I looked at trends and user experience in flight booking. During the analysis phase I structured this raw research data into actionable insights. Rigorous research and analysis enabled me to define the problem to solve. During the design phase that followed, I conceptualised the design solution through an iterative process. I then created a prototype, tested and adapted it, and made a set of wireframes to hand over to the developers.

Research
Survey
Business context map
Competitive benchmark
Interview
Usability test

Analysis
Affinity diagram
Empathy map
Persona
Customer journey map

Design
User flow diagram
Interaction design for desktop

Prototype
Low-fidelity prototype
Medium-fidelity prototype

Validation
Usability testing

Handover
Wireframes

Design target

A budget traveler: The user is a value customer who is budget conscious. Our user can navigate the standard airline ticket online buying process, pays for themselves, and travels for work and leisure. They dislike a lack of clarity and transparency in flight offers and distrust extras and baggage offers. Because this user thinks the airline is trying to trick them, they spend time working out the cost-benefit of offers.

Key problems

Low levels of trust: A lack of unambiguous and relevant offers, unclear or misplaced value propositions, and constant upselling makes users feel like the airline is trying to trick them.

Lack of clear, relevant and transparent offers: Users consider transparency and ease of comparability in flight and baggage price the most critical factors but also value clear information about flight time, date, connections, stayovers and extras.

Interruptions of user flow: High standardisation of user flows in competitor booking processes means that unanticipated steps in the user flow, unclear information architecture and unclear page layout can be confusing.

Design goal

Increase user flow of booking process: Improve flight and extras discovery and selection process for a value customer going through the buyer decision-making process of problem recognition, information gathering, evaluation of options, and purchase-decision.

Key solutions

Improved task-orientated screens: Reduced cognitive load with a simplified search form and best practice controls, combined date selection with low fare calendar, created a one-click flight selection with auto-focus, separated bundle choices from flight choices, combined passenger info and extras, and created an easy skip or click-through for seat selection and cars.

Increased transparency of prices and options: An improved user flow and interaction design that reduces the ambiguity perceived by users by providing clear and transparent information and options at key decision moments within the user’s buying decision-making process using a combination of labels, buttons, info paragraphs, modals and task-orientated screens.

Measurement

Time on task: Finding and selecting a flight and fare; Adding personal details, bags, and extras; Completing purchase.

Task success rate: Finding and comparing flights; Adding personal details, bags, and extras; Completing purchase.

User error rate: Searching and selecting flights; Selecting fare; Adding personal details; Adding bags and extras; Adding seats; Adding payment details.

2. Research phase

Granular and rigorous, my primary and secondary research brought forward a wealth of qualitative data. During this phase, I delved into the main data areas of usability research: goals, contexts, behaviours, mental models, pain points, and good points of air travellers. I conducted the following methods: a survey, a competitive benchmark, business trend mapping, user interviews, and usability tests. The range of data sources would allow for more accurate interpretations in the analysis phase.

2.1 The survey revealed that respondents wanted to find or book flights online, but some had difficulty finding prices and were annoyed by price discrepancies and constant upselling.

The survey includes eight structured and unstructured questions that are focused on consumer and usability areas. The completion rate was above 90%, and the completion time was below 3 minutes. The respondents were adults with an age range of 25 to 65 years. Results have a confidence level of 95%, and a margin of error of 17%.

Objective:

Conducting the survey at this early point in the design process gave me insights into the goals of people that use airline websites. The survey would help me understand what people are trying to do, whether anything is preventing them from doing it, and what other features they would like to see.

Results:

  • More than half respondents choose budget airlines
  • Respondents often return to the same airline
  • Respondents could usually fulfill their tasks
  • Most wanted to find or book a flight
  • Some wanted flight info, to check-in, or cancel
  • Some had difficulty finding prices
  • Annoyed by price discrepancies
  • Annoyed by constant upselling
  • Important to understand trends within the industry
  • Further research on popular airlines needed
  • Focus on key user flows

2.2 The business context map showed that shifts in the airline market necessitate transparent offers, easy comparative shopping for users, and timely and relevant communication.

Traditional airlines face the threat of being sidelined from marketing and sales by digital retailers that have better data and analytics about airline customers.

Objective:

The redesign of the booking process requires an understanding of the broader context and trends within the industry. Drawing from a range of published interviews, articles, and reports, the context map helped identify drivers outside the company that will shape the industry in the next few years. The objective was to place the company in relation to wider demographic trends, rules & regulations, economy & environment, competitions, technology trends, customer needs, and uncertainties.

Results:

  • Regional and national regulations govern the industry
  • Regulation protects and constraints
  • Traditionally slow-moving and conservative
  • Increasing customer-side innovation
  • Digitisation of the entire travel experience
  • Personalisation of the customer journey
  • Increased entrance of low-cost carriers
  • Increasing centralisation in the industry
  • Joint ventures between companies
  • Technological disruption increasing
  • Customer acquisition shifts
  • Transparent offers and easy comparative shopping
  • Timeous and relevant communication from airlines
  • Feel at ease in the buying experience
  • Improve flight search, compare and select
  • Increase airline product desirability
  • Needs business viability and technological feasibility

2.3 The benchmarking showed potential for improvement in flight search, comparison of prices and features, and selecting fares, baggage, seats, and extras.

The precedents are low-cost airline brands across developed and developing regions and a global hotel brand with low-cost to premium offers. Benchmarking the main booking user flows on each website enabled me to identify design patterns that could be emulated or avoided.

Objective:

Conducting the competitive benchmark at this point was intended to help me determine how best-in-class websites solve the problems we are trying to solve and to help us highlight the design patterns and conventions we could or should emulate.

Results:

  • Incorporate booking process standardisation
  • Competitor movements are important
  • Changing design details to improve usability
  • Some established design patterns reduce usability
  • Flight search and comparison can be improved
  • Improve prices, fares, and features comparison
  • Selecting baggage, seats, and extras can be improved

2.4 Interviews revealed that travellers consider transparency and ease of comparability in flight and baggage price the most critical factors but also value clear information about flight time, date, connections, stayovers and extras.

I used an interview script to guide my questions regarding personal information, travel website usage, and a recent flight booking experience. I recorded the interviews and made detailed codified notes.

Objective:

The redesign of the flight booking process required an understanding of customer decision-making units and their decision-making in the buying process. Interviews with actual flight ticket buyers helped me gather information about airline customer types and their user goals, contexts, behaviours, pain points, and mental models.

Results

  • Travel for leisure and business
  • Mostly book their tickets for themselves
  • Family and friends influence the buying process
  • Familiar with standard online booking processes
  • Different levels of computer ability
  • Find flights on airline websites and flight aggregators
  • Flight aggregators to narrow down options
  • Often buy on the airline website
  • Flight price and baggage price is the most important
  • Time, date, connections, and stayovers also important
  • Desktop interfaces made flight discovery easier
  • Want improved fees and offer transparency

2.5 The usability tests on low-cost carriers in emerging and developed regions showed that users anticipate a standard booking process and that registration before knowing the total cost of extras disrupted decision-making.

The usability tests were focused on the booking process of low-cost carriers in both emerging and developed regions. I recorded the sessions and took notes: I then categorised the data (user goals, contexts, behaviours, pain points, and mental models), structured the data (along each step of the booking process), and collated insights from individual participants.

Objective:

Understanding the flight booking user experience that we want to create in our redesign required being sure about what works and doesn’t work on existing websites. During the usability test we observed how people navigate the flight booking process and undertake their buying decision-making process: what are they trying to do, how easy or hard it is to do it, who are they with, where they are, and what devices are they using?

Results

  • What is evident to one user can be unclear to another
  • Travelers anticipated a standard booking process
  • Buyers struggled with unexpected design patterns
  • Clear prompts help users progress
  • Default values, and autofocus help users progress
  • Unclear design disrupts buying decision-making
  • Unanticipated screen orders confused users
  • Unclear button and label placement slows user flow
  • Clunky micro-interactions slowed user flow
  • Unclear image and text meanings could confuse users
  • Clarity and transparency increase trust in offers
  • Presentation of fares caused confusion and distrust
  • Bags and extras choices caused confusion and distrust

3. Analysis phase

The research created a large volume of qualitative data about air travellers and their experience of the online booking process. This raw unstructured data still needed to be transformed into actionable insights. The methods used to help make sense of this raw data were the affinity diagram, empathy map, user persona, and customer journey map. By the end of the analysis phase, a coherent story through those data points was evident: I could clearly state the user I was designing for, and I understood and could articulate the problem I intended to solve for this user type.

3.1 The affinity diagram revealed that although users highly value the ability to research flights and extras, their flow is restricted during the early stages of the information gathering and evaluation stages by a lack of clear, relevant and transparent offers.

Three analysts undertook the sense-making where raw unstructured data became actionable structured data. Through a workshop process that included both digital and analogue elements, we identified 23 themes at different points in the flight booking process relevant to the user experience.

Objective:

The affinity diagram was intended to make qualitative research data useful by placing structure that data through a collaborative analysis. This method helped us be confident about the patterns of usability problems in different areas of the buying decision-making process: from discovery to evaluation to decision. It was critical in pinpointing usability problems in the flight booking process.

Results:

  • Users highly value the ability to research flight tickets
  • Information gathering and evaluation stages hindered
  • High standardisation in user flow in booking process
  • Lack of unambiguous and relevant offers
  • Feels like the airline is trying to trick the user
  • Unclear or misplaced value propositions
  • Unanticipated IA or steps in the workflow
  • Confusing elements in the visual design
  • Decreased user flow when selecting dates
  • Decreased user flow when selecting fare options
  • Decreased user flow when selecting bags and extras
  • Decreased user flow when adding personal details

3.2 The empathy map showed that users focussed on price and feature comparison and wanted certainty on pricing, baggage, and extras.

Making the empathy map helped us gain certainty on details of user experience that are most important to users. We extracted data and isolated key product dimensions and usability factors from the affinity diagram directly relevant to the airline traveller’s perspective: the user, their goals, and what they say, do think, and feel.

Objective:

Making the empathy map helped us gain certainty on details of user experience that are most important to users. We extracted data and isolated key product dimensions and usability factors from the affinity diagram directly relevant to the airline traveller’s perspective: the user, their goals, and what they say, do think, and feel.

Results:

  • Chooses flights via price and feature comparison
  • Want to be sure what is the lowest and highest price
  • Want certainty on pricing of flights, bags, and extras
  • Buttons to select offers need to be specific
  • Unclear if prices were for one or two travelers
  • Value propositions and price were not always linked
  • Many concerns around baggage and extras
  • Not always sure about baggage options
  • Sometimes unclear whether bags were selected
  • Unclear if the fare included bags or certain extras
  • Optional extras viewed as little value at a high cost
  • Felt that the fare bundles were not transparent
  • Want adequate information and customer service
  • Information on site not entirely trusted

3.3 The persona showed that travellers focus on price and feature transparency and will compare options to find the best value days and times.

What made this persona valuable is that it used a story format to narrow the focus of the design problem to a specific use case. The story helped bring together user goals and design goals for that case.

Objective:

We wanted to further refine our user representation for quick future reference. Our persona is a fact-based contextual user representation with a specific design problem that draws from the affinity diagram and empathy map. It was intended to provide a reliable and realistic representation of a main user for our website.

Results:

  • A use case for a semi-regular flyer
  • Buys tickets for themselves and others
  • Familiar with the flight booking process
  • Wants transparency in the fare and extras offerings
  • Has some baggage requirements
  • Compares flight options for best value
  • Price, then date, and then time impact decision

3.4 The customer journey map showed improvements were needed to enable users to discover, select and compare flights and extras.

The customer journey map enabled us to drill down into each of the high-level steps flight booking process. The documented quotes, goals, pain points, behaviours, good points, and noteworthy mental models defined specific problem areas. By rating each step as positive or negative overall, we could prioritise areas that needed drastic improvements.

Objective:

We chose to create a customer journey map to see the entire buying process through the eyes of what we had termed a value customer. The method was intended to help us isolate patterns in the structured data, highlight critical areas for improvement, learn from successes, define the buying process, and plot a high-level user flow.

Results:

  • Users could navigate the buying process
  • Critical areas to improve flow and desirability
  • Minor details are critical influencing factors
  • Seamless steps in the decision-making process
  • Discovery and selection start with information
  • Evaluation of information before buying
  • Specific placement, tone, and appearance of features
  • Flight comparisons influence flight selection
  • Communicating precise value propositions

4. Design phase

The research and analysis were specific but only gave hints at how to solve the identified design problems. It was still necessary to come up with a coherent solution. During this phase, I switched from understanding, articulating and defining the usability problems in airline booking processes to offering potential solutions to these problems. Conceptualising the high-level flow through the system and creating the interaction design for the system helped create potential solutions. I came up with many possible design solutions, and by the end of the process, I had a well-defined design solution ready for prototyping.

4.1 The user flow of the flight booking process separated, combined and focussed screens on specific actions to ensure travellers can discover, compare and select options in a familiar but improved manner.

With the customer journey map as my guide, and sketching as a method, I identified and described each screen in the workflow, its features, and the user actions on that screen. I refined the screens, their features, important micro-interactions, and user actions. I supplemented gaps in research and analysis with further reading and reflection on best practice principles and patterns. Later I transferred it to a digital tool.

Objective:

At this point in the design process, it was necessary to start planning how users will flow through the design. The aim was to create a high-level flow diagram of one primary use case for booking flights that addressed the issues highlighted in the customer journey map. This would later guide the design of individual screens.

Results:

  • Text and dropdown search for destinations using
  • Easy and clear way to select two adults
  • Intuitive date selection using a calendar
  • Intuitive low-price selector
  • Integrated low-fare calendar with date selection
  • Clear price comparison on flights
  • Can see low prices on convenient days and times
  • Order of prompts important – find cheap flights first
  • Clear and transparent information on extras
  • Ability to control baggage and extras
  • No need to add personal details to get price for extras
  • Add and remove options micro-interaction
  • Important text – labels, headings, descriptions
  • Action-orientated screens – specific prompts/offers

4.2 Interaction design sketches conceptualised actions, screens and prompts in the stages of discovery, evaluation, decision-making, and payment that were task focused and self-evident.

Sketching as a problem-solving approach enabled me to create potential design solutions that incorporated earlier findings regarding user goals and pain points. Early sketches were loose and experimental, but through the sketching process, the screens became resolved. These concepts were subject to change as the design process unfolded during prototyping.

Objective:

Building on the flow diagram, the interaction design was aimed at visualising the screens and screen states for users flowing through the booking process. Interaction design through sketching would allow quick incremental changes to the proposed solution, and to transform ideas into tangible forms that can be shared and discussed.

Results:

  • Homepage focuses on the search form
  • Combined date, low price search, and flight search
  • Placing bundle selection on a new screen
  • Have clear bundle options, and feature offers
  • Have seats easily selected, changed, or skipped
  • Have more control over extras like bags and wifi
  • Add a car with one-click
  • Familiar payment screen and payment options
  • Improved language and image usage
  • Have extra information available when required

5. Prototyping phase

With a clear concept in hand, it was time to start prototyping the proposed solution. Prototypes provided quick mock-ups of the workflow and the interaction design. In a movement from the analogue to the digital, I transformed the design concept sketches into a clickable low fidelity paper prototype, noted problems and successes in the design solution, and proceeded with the medium-fidelity prototype.

5.1 Creating a clickable low-fidelity prototype from sketches resulted in improved micro-interactions on the search form and low-fare calendar, simplified layout of modals, clear labels on price tables and itinerary, and simplified processes for adding seats.

I transformed the final sketches of the conceptualisation phase into a low-fidelity prototype to get a feel for the movement through the design. It allowed me to spot problems in the proposed solution that were not evident in the user flow diagram or static sketches. I could address these issues with higher specificity in the medium-fidelity prototype.

Objective:

Getting usability information from the sketches would help design efforts in the medium-fidelity prototypes. This required transforming the sketches into a clickable prototype for a specific user flow and then testing navigation, interaction design, basic layout, and the hierarchy of elements.

Results:

  • Micro-interactions on search form to increase flow
  • Mico-interaction on low fare calendar to increase flow
  • Layout of information modals can be simplified
  • Adjust labels on price tables can be clearer
  • Adjust labels on itinerary to be clearer
  • Adding seats, and blocking seats, can be simplified

5.2 The medium-fidelity prototypes resulted in improved features in task-orientated screens along the buying and decision-making journey, like increased low-fare information availability and a one-click flight selection process.

The prototypes build on and refine the user flows and interaction design. I created two medium-fidelity prototypes of the proposed user flow, screen layouts, text and interactions for the new airline booking process. The first prototype focused on the flow from the flight search on the homepage to the payment screen. The second prototype focussed on a micro-interaction of contextual help while selecting seats. 

Objective:

With the aim of solving the previously identified problems, the prototypes required an open correspondence with the research and analysis, to supplement insights, and to keep on generating ideas through sketching. The prototyping process allowed me to shift, tweak or change designs as issues became visible. Aspects of the design changed according to digital requirements.

Results:

  • Search form lightbox modal on the homepage
  • Simplified search form with best practice controls
  • Auto-complete and auto-suggest on airport search
  • Past search remember and suggestions
  • Combined date selection with low fare calendar
  • Split flight select screens from fare select screens
  • Results for departure and return on the same page
  • Low fares are indicated on the results page
  • One-click flight selection with focus on selection
  • Clear labels and feature offers on price tables
  • Itinerary and price breakdown update dynamically
  • Clear bundle information on itinerary
  • Clear price breakdown
  • Tabs for surrounding dates
  • Tab is focused on the current date
  • Personal info, bags and extras together
  • Easy to see what bags and extras included
  • Easy to add or remove bags and extras
  • Easy to skip seat selection – entirely optional
  • Seat selection flow is an easy click-through process
  • The continue button behaviour is consistent
  • Client info focussed only on what is needed

6. Validation Phase

It was necessary to conduct usability tests of the medium-fidelity prototype to ensure that the proposed design solution met users’ needs. The validation process would ideally follow an iterative process where feedback could influence the design and prototyping phases until finalising the design. The iterative nature of the validation phase in this project was limited in scope because the project was part of a study.

6.1 The usability test allowed for refinement of the booking process design by improving micro-interactions, contextual information, and controls to assist users with navigating the critical steps in the buying process.

In preparation for the usability test, I listed the proposed design solutions that needed validation. This helped ensure keep the process on track and get the information required. Unanticipated problems would reveal themselves in the usability test.

Objective:

At this point of the design process, we had a prototype of the user flow and interaction design of the booking process. Conducting a usability test was intended to observe how a user interacted with the design, influence the design of the prototype based on user feedback, and validate the design.

Results:

  • Added, changed, and refined the design
  • Added a save button for the number of passengers
  • Added an auto-month shift in the calendar select tool
  • Added edit buttons for departure and arrival seats
  • Bundles and extra info changed into a tooltip
  • Tooltips of seat choices changed to contextual help sidebar
  • Refined various micro-interactions in the booking process
  • Added transitions after selection actions
  • Added contextual help at the top of pages

7. Handover Phase

With a clear solution to the problem, it was time to prepare the documentation to hand over the design to the next stage of the larger project: build. I created a set of annotated wireframes with developers in mind.

7.1 My annotated wireframes focused on interactive and conditional elements, providing clear and concise documentation that showed how screens and actions work together.

Wireframes use a combination of image and text to relay the workings of a design solution. I noticed that building the wireframes helped me spot small and sofar hidden problems in the design, and gave me an opportunity to correct them.

Objective:

Wireframes are a documentation process that creates a set of descriptions of how the software works. Because prototypes do not include all details to build a design these details should be explicated in a wireframe document.

Results:

  • Logical, clear, precise, and concise for a developer
  • Cross-referenced set of annotated wireframes
  • Focussed on interactive and conditional elements
  • Outline content, functions, constraints, and behavior
  • Show how screens and actions work together

Result and concluding thoughts

Mockup with the homepage on desktop.

This case study delved into a collaborative process of research and design of a booking process.

Undertaking exploratory and rigorous fact-finding and interpretation was critical to success. While working with the details of precedents and interviews, the team remained attentive to feeding the larger purpose of redesigning a booking process, keeping in mind a balance of user goals next to business goals. Conceptualising and making user flows, the interaction design, prototypes and wireframes were critical in enabling me to transform insights into an actionable product design.

Preliminary benchmarking shows that the new design improved the user experience of a flight booking process by reducing ambiguity and providing clear and transparent information and options at critical decision moments within the user’s buying decision-making process.

I learned that UX design is about the big picture and details. I developed three strategies to employ during the process that helped me stay on track: document high-level insights and ideas, routinely gauge the completeness of phases, and use sketching and writing to get relationships of ideas onto paper and ready for discussion.

My big takeaway was that being meticulous in a process or a method can only help improve a design solution up to a point. Gaining more depth or staying on the course also means getting enough information for a decision and moving on.

Read another UX case study

Who African Centre for Migration and Society
What Information architecture; Navigation; Page layout; Image-text relationships; User flow to stories; Research; Prototyping; Testing
Result Increased speed and accuracy of users finding relevant stories

Quinten Edward Williams

I am a researcher, designer, and artist working in UX. This portfolio website is focused on my UX research and design.

Quinten Edward Williams

I am a researcher, designer, and artist working in UX. This portfolio website is focused on my UX research and design.

Back To Top