skip to Main Content

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

Design target:
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.

Design goal:
Improve the ticket discovery (information gathering and evaluation) and selection process for a value customer.

Proposed solution:
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.

Proposed measurement:
The most important areas of improvement can be measured with behavioural UX KPIs.

  • 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

Design target:
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.

Design goal:
Improve the ticket discovery (information gathering and evaluation) and selection process for a value customer.

Proposed solution:
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.

Proposed measurement:
The most important areas of improvement can be measured with behavioural UX KPIs.

  • 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

1.1 Practices

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

1.2 Methods

Research
Survey
Business context trends
Competitive analysis
Interview
Usability test

Analysis
Affinity diagram
Empathy map
Persona
Customer journey map

Design
User flow
Sketching user interaction

Prototype
Low-fidelity prototype
Medium-fidelity prototype
Usability test

Handover
Wireframe

1.3 Tools

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

Process and methods

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.

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 Survey

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 Business context map

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 Competitive benchmark

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

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 Usability tests

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 Affinity diagram

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 Empathy map

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 Persona

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 Customer journey map

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

Articulating the problem to solve

Design goal:
Improve the ticket discovery (information gathering and evaluation) and selection process.

Design target:
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.

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 User flow diagram

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. View the full user flow diagram here.

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 dropdownsearch for destinations using
  • Easy and clear way to select two adults
  • Intuitive date selection using a calendar
  • Intuitive low-price selector
  • 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
  • Add and remove options micro-interaction
  • Important text – labels, headings, descriptions
  • Key screens – specific prompts and offers

4.2 Interaction design for desktop

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
  • 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 Low-fidelity prototype

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. View the full low-fidelity prototype here.

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 Medium-fidelity prototype

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 between the homepage to seat selection. The second prototype focussed on a micro-interaction of contextual help while selecting seats. View the full medium-fidelity prototype here.

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 Usability test of prototype

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. Annotated wireframes

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

Concluding thoughts

This case study delves into the practical matter of designing a booking process, and it outlines ideas and approaches in the field of UX design. The project that is discussed employed the entire UX problem-solving cycle in designing an online booking process for a hypothetical airline. Each phase of the project informed the next: research and analysis phases were critical in formulating the proposed solution in the design and prototyping phases. At a high level I learned the following:

  • Undertake exploratory and rigorous fact-finding/interpretation
  • Remain attentive to feeding the larger purpose
  • Focus on identifying design problems and design solutions
  • Make prototypes and wireframes that solve the problem
  • Make solutions that work in a business context

My key learning in the project was that although UX design is about details, it is vital to keep track of the big picture while working with those details. It is crucial to start the UX design process with rigorous research and analysis and to know when to follow this through with prototyping and testing. I developed three strategies to help me keep on track:

  • Take note of high-level insights and ideas throughout the process
  • Routinely gauge to what extent a phase is sufficiently completed and when to move on
  • Use sketching-writing to get relationships of ideas onto paper and ready for discussion

The reason to undertake research, analysis, and designs is to illuminate design problems and create potential solutions. To be meticulous in any given process can only help improve a design solution up to a point, and at that point, to gain more depth or to stay on course, it is more useful to move on.

Back To Top