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
Role & Practices
Business context trends
Customer journey map
Sketching user interaction
Pencil, pen and paper
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.
I created an eight question survey. The survey had both structured and unstructured questions that focussed on consumer and usability areas. The respondents were working professionals in the age range of 25 to 65 years. The survey had an estimated survey completion rate of 70% and an estimated completion time of 3 minutes.
The results show that about half of the respondents usually flew on budget airlines, and would return to the same airline in the future. Most respondents were trying to find or book a flight, but some wanted flight info, to check-in, or to cancel. Respondents for the most part could fulfil their tasks, but not without some pain points: difficulty in finding prices, the occurrence of price discrepancies, and constant upselling were highlighted as majour areas of annoyance.
The survey results have a confidence level of 95% and a margin of error of 17% and were exploratory rather than definitive.
The business context and trend map was desktop research that drew from industry reports, published interviews and articles. The research gives a broad overview of the context in which a new airline enters the market.
The airline industry, traditionally protected but also constrained within regions and nations by regulatory frameworks, has been slow-moving and conservative. This that is set to change. Industry leaders believe the entrance of low-cost carriers, inceasing centralisation, joint ventures, and technological disruption will fundamentally shift this industry in the next few years. An area of the industry which is undergoing big shifts is that of customer aquisitions: how airlines interface with customers during their buying process. Airlines face the threat of being sidelined from marketing and sales by digital retailers that have better data and analytics about airline customers.
The research showed that the customer side of the market is characterised by increased digitisation of the entire travel experience and increased personalisation throughout the customer journey. Customers want transparent offers and easy comparative shopping, they want timeous and relevant communication from airlines, and they want to feel at ease in the buying experience.
According to the idea of the sweet spot of innovation, novel products occur as a mix of what is desirable (for users through user experience design), what is viable (in business), and what is currently feasible (using technology). In my project, I would aim to increase the airline product desirability while remaining sensitive to business viability and technological feasibility. The specific focus in the project was on improving the flight search, select and extras features in the buying process.
With the standardisation of booking processes a significant factor in the industry, knowing what competitors were doing was important. I looked at low-cost airline brands across developed and developing regions and a global hotel brand with low-cost to premium offers. The research was focused on the main customer choices on each website while following the booking process. The competitive benchmark enabled me to identify established conventions in the industry and make initial notes of design decisions that could be emulated or avoided. Differences and variations in design details had a substantial impact on usability.
Contact me to request access to the competitive benchmark.
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.
The people I interviewed usually travel for leisure and business. They mostly book their tickets for themselves. Family and friends were influential in the interviewees’ buying process, but not always in the same ways. All the interviewees were familiar with standard online booking processes, but they had different levels of computer ability. My interviewees used airline websites and flight aggregators to find flights. They often narrowed down airline choices on flight aggregators and buy on the airline website. The main factors considered were flight price and baggage price, followed by time, date, connections, and stayovers. On the whole, my interviewees thought desktop interfaces made flight discovery easier, but still felt transparency in fees and services offered could be improved.
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.
Observing how people navigate the flight booking process and undertake their buying decision-making process was valuable to understanding the flight booking user experience.
I conducted several usability tests focused on the booking process of low-cost carriers in both emerging and developed regions. I recorded the usability tests and took notes. I then organised the data according to five main categories for the user research: user goals, contexts, behaviours, pain points, and mental models. I structured the captured data along each step of the booking process: from searching for the homepage to choosing a flight and adding some bags. I collated insights from individual participants according to their data categories.
What stood out for me testing the workflows was that although what was evident to one user may have been unclear to another, travellers largely anticipated a standard booking process. Buyers struggled with unexpected design patterns. While clear prompts, default values and autofocus help clients progress along the buying decision-making process, unanticipated screen orders, unclear button and label placement, and clunky micro-interactions were causes of usability problems. Unclear communication through image and text was also a concern: Clear and transparent offers were valued and trusted, but the presentation of fares, bags and extras often only caused confusion, distrust, and a decreased flow.
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 who the user was I was designing for, and I understood and could articulate the problem I intended to solve for this user type.
Three analysts undertook the sense-making where raw unstructured data became actionable structured data.
The process went as follows: We held a workshop during which we reviewed the raw research data, created data points using a colour coding system, and found patterns in these data points. These patterns became a collection of themes and sub-categories. Once ordered, we numbered the groups according to their relative stage in the customer journey and indicated whether the group had relevance to the entire customer journey. I transferred the data online, and we refined its ordering. We identified 23 themes at different points in the flight booking process relevant to the user experience.
Creating an affinity diagram was critical in pinpointing usability problems in the flight booking process. For instance: Although customers highly valued their ability to research flight tickets. However, customers’ information gathering and evaluation stages became hindered by several factors: the lack of unambiguous and relevant offers, unclear or misplaced value propositions, unanticipated information architecture or steps in the workflow, and confusing elements in the visual design. The affinity diagram 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.
Contact me to request access to the affinity diagram.
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.
A clear insight that emerged was that clients valued being able to choose flights via price and feature comparison, and they wanted to be reasonably sure that they were choosing the lowest price. Concerning potential buyers was the pricing of flights, baggage and extras. For instance, not all buttons to select offers were intuitive, it was unclear if displayed prices were for one or two travellers, and value propositions and price were not always linked. Concerns around baggage and extras were also numerous: potential buyers were not always sure about baggage options, whether bags were selected, or the fare included. These buyers sometimes viewed optional extras as providing little value at a high cost and felt the fare bundles were not transparent. Customers wanted adequate information and customer service on the website, but they also did not trust all the info on airline websites to be accurate or dependable.
Contact me to request access to the empathy map.
The persona is a fact-based contextual design problem that draws from the affinity diagram and empathy map.
We came up with a use case for a semi-regular flyer that buys tickets for themselves and is familiar with the flight booking process. This buyer wants transparency in the fare and extras offerings, has some baggage requirements, and compares flight options in the order of importance of price, date and then time.
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.
We used the customer journey map to see through the eyes of what we called a value customer as they booked a ticket. This process enabled us to define the buying process and high-level user flow.
The customer journey showed us that although users could navigate the buying decision-making process, there were critical areas in the discovery (information gathering and evaluation) and selection process where flow and desirability could improve. Each stage of the buying process had areas where design improvements could enhance the user experience. For instance, we found that different parts of the buying decision-making process needed to work together seamlessly, and the placement, tone and appearance of the features had to be specific: the flight comparisons process had to flow into the flight selection process, and communication of the value of offers had to be precise. Such seemingly minor details were critical influencing factors of the buying decision-making process.
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. This process helped identify patterns in the structured data, highlight critical areas for improvement, and learn from successes. By rating each step as positive or negative overall, we could prioritise areas that needed drastic improvements.
Contact me to request access to the customer journey map.
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.
I created a flow diagram to define a user flow for a primary use case. The target was a value customer: an adult traveller booking for two with some baggage requirement who wants to compare tickets before buying. This traveller emphasises finding low prices on convenient days and times. Having clear and transparent info in an intuitive booking process that serves different stages of the buying decision-making process was critical.
The user flow diagram was a mediation between identified problems and possible solutions. I started the process by conceptualising the flow diagram using sketching. Using the customer journey map as a guide, I identified and described each screen in the workflow, its features, and the user actions on that screen. I then refined the screens, their features, important micro-interactions, and user actions. When I had a good idea of the user flow, I transferred it to a digital tool and refined it further.
The process enabled me to design for previously identified goals, context, pain points, behaviours, and mental models. I supplemented gaps in research and analysis with further reading and reflection on best practice principles and patterns. This process helped me to address and solve the issues codified in the customer journey map: I resolved the value customer’s pain points, aligned with their mental models, and built on good points.
Sketching as a problem-solving approach enabled me to create potential design solutions that incorporated earlier findings: I had to consider lists of ideas and problems to solve and a diagram for a primary user flow.
Sketching was valuable in making concrete design solutions. For instance, this process helped me combine steps to find flight dates and prices faster, improve bundle selection by placement on a new screen, and have seats easily selected, changed, or skipped. As a thinking process, sketching showed me where there were research gaps and where the flow diagram could improve. Through sketching, I could design a way for users to find flights faster and choose bundles easier.
Sketching enabled rapid incremental changes to the proposed solution because it allowed quick iterations between ideas. Sketching also allowed ideas to quickly transform into tangible forms that could be shared and discussed. Early sketches were very loose and experimental, and through the sketching process, the screens became resolved. The sketches were then composed into a digital collage of the screens in various states, and I made a low fidelity prototype. Although I used the final sketches to guide the making of the prototype, these concepts were subject to change as the design process unfolded during prototyping.
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.
I transformed the final sketches of the conceptualisation phase into a low fidelity prototype to get a feel for the movement through the design. This analogue clickable prototype enabled me to visualise and test the user flow, navigation and interaction design. It also allowed me to visualise the basic layout, hierarchy of elements, copy, and labelling. I spotted 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.
Building on the work before, I created two medium-fidelity prototypes of the proposed user flow, screen layouts, text and interactions for the new airline booking process. The prototypes build on and refine the user flows and interaction design.
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.
Making the prototypes required me to have 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. Creating a design system and grouping similar components and variants allowed consistency in the prototype and enabled me to make quick changes.
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.
The focus of the usability test was the user flow and interaction design of the booking process. Before conducting the usability test, I listed the proposed design solutions that needed validation. Preparing for what needs testing ensures that you keep the process on track and get the information required. Unanticipated problems would reveal themselves in the usability test regardless.
Observing how people used the design influenced the prototype in several ways: I added, changed and refined the design. For instance, I added a save button for the number of passengers, an auto month shift in the calendar select tool, and edit buttons for departure and arrival seats. I changed the modal for bundles and extra info into a tooltip, and I changed the tooltips that appeared while hovering on seat choices into a contextual help sidebar. I refined various micro-interactions throughout the flight booking process, like transitions after selection actions and 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.
Wireframes are a documentation process that creates a set of descriptions of how the software works. They use a combination of image and text to relay a design solution. Because prototypes do not include all details to build a design these details should be explicated in a wireframe document. Building the wireframes, furthermore, can help spot problems in the design. I created a cross-referenced set of annotated wireframes that are clear, precise and concise for a developer to consult while building the interactive elements of the design solution. My annotations focussed on the logical description of the content, functionality, constraints and behaviour of interactive and conditional elements in the design.
Contact me to request access to the full set of wireframes.