Create Your First Project
Start adding your projects to your portfolio. Click on "Manage Projects" to get started
Flow Air
Date
January 2024 - May 2024
Role
UX Designer, User Researcher
Project type
Desktop website
The Professional Diploma in UX Design from the UX Institute set the following brief:
Your client is a start-up airline. They’re looking to create an online experience that is fast, easy and intuitive: one that’s based on a deep understanding of their target users.
User Research
Online Survey
I needed to understand insights into the 'big picture' user goals, behaviours, contexts, and experiences, in a quick and resource-efficient way. What I gained was a helpful, though broad-brush, first glance at the user, and the beginnings of my journey to empathise with their experiences - good, bad, or otherwise!
My role:
Designed and hosted an online survey through Survey Circle. In total, there were 48 responses within the 30-day period that it was open. Of course, Survey Circle has limitations - principally, that it may be biased towards a specific demographic of those in, or interested in, academia and / or research projects.
Some survey insights
1 / Users are price driven and need clarity about (some) important logistics
All respondents surveyed stated that price was the most important goal when booking flights. Insights also revealed that 77% of respondents were concerned about whether a flight was direct or had a connection. Data showed that fewer respondents placed importance on luggage / baggage allowance (37.5%) and seat selection options (25%).
2 / Users want transparency, and help
The most frequent issues identified by users during the flight booking process are; finding the best price (64.5% of respondents), getting customer support when needed (33%), and lack of clarity regarding flight details and restrictions (31%).
3 / Users shop around, but it involves some serious legwork
When asked what their goal was when they last used online booking sites, less than half (45%) of respondents booked a flight from an airline carrier. While almost a third (29%) used an airline carrier's website to compare prices.
4 / Users expend effort coordinating their plans
Data reveals that 71% of respondents had booked flights on behalf of other people (friends, family, or colleagues). Respondents stated they shared or coordinated booking by “Sharing screenshots on WhatsApp”, “Forwarded confirmation emails”, “Discussed over text”, or “Sent them the email receipt”.
Competitive benchmark
I also needed to establish a baseline standard against which the Flow Air experience could be analysed, and to provide context for decision-making during the design phase. This ensured that the design process would be evidence-led, rather than based on guesswork.
My role:
Using UX heuristics, I carried out an in-depth evaluation of two existing airline websites, along with desk research on others within the same market segment. This summative evaluation enabled me to identify usability strengths and weaknesses among competitors and uncover opportunities for innovation.
-
Throughout the process, Ryanair does a very efficient job of condensing information to the minimum when it comes to a running summary of user's selections, and what is displayed on the flight card. Consequently the user has very little recall to do, and the text on screen is not overwhelming.
-
The destination search function on Ryanair offers up some useful assistance to the user; destinations are greyed out if you can't fly there from your departure location, and the list of destinations dynamically changes as the user inputs into field. Arguably, however, there is an overload of functions. Search by 'region' must involve an assumption of the user's level of confidence in geography. And catering for searches by 'popular attraction' seems to appeal only to outlying use cases
-
At the start of the journey, at the search stage, Ryanair feels like it eases you along; input fields guide you along by opening options sequentially and affordances such as buttons are strong and consistent, making it clear where to click next. Two things weaken this user experience; first, there is an overwhelming amount of promotions and pop-ups, which distract and interrupt the flow. Second, the design of buttons varies to accommodate upselling, which weakens their effectiveness.
-
The layout and design of British Airways is less intrusive. There is an ordered appearance which focuses engagement more so than Ryanair. However, the visual hierarchy and usability is somewhat compromised by this very minimalist design. Such that at first glance, at flight selection, there is no clear idea of what to do first. At further points in the process the design used for buttons is also used for column headings, which weakens the affordance.
-
Little details make the flight search more protracted and less intuitive than it could be. British Airways asks users to 'Type three letters' into the departure / destination search, but is that a name or airport code, or something else entirely? The calendar also opens showing only one month, and doesn't highlight intervening dates, leaving the user with added mental load.
-
British Airways sorts results by departure time, and won't let me do it any other way. I find this surprisingly difficult to work with when I am also presented with 20 (!) slightly different results, which I then have to scroll through and remember.
-
British Airways has amalgamated the upselling of 'extras' within the flight summary stage. Compared to budget carriers, this considerably reduces the number of steps the user has to take, making the journey feel quicker and more fluid. Chunking information, and concealing additional details in drop-down menus, reduces the burden on users and offers a feeling of efficiency.
Some competitive benchmark insights
-
Conventions including drop down calendars, three or four tier fare pricing, an interactive airplane in plan-view for seat selection, and 'flight card' format are all well established across the industry.
Usability
Testing &
User Interview
A crucial part of the research stage was gathering insights directly from users. I needed to understand how people interacted with and experienced airline booking systems. This observational, qualitative research technique complemented both the quantitative (online survey) and qualitative (subjective) competitive benchmarking, providing a well-rounded approach to the research.
My role:
I organised and conducted a remote usability test and interview, developing a test script and managing the consent process. The first round of usability tests I carried out focused on existing airline booking websites, Ryanair and British Airways, in an A/B format. I also observed and took notes on two pre-recorded usability test sessions, which evaluated Aer Lingus and Eurowings.
Some usability test insights
Positive Interactions
-
Users noticed when the website 'knew' them "oh, it already has Cork in there!". The same was true for specific regional languages e.g, Ireland (English).
-
Users all stated that removing options that weren't possible e.g., certain flight dates, or destinations available from the selected departure airport, helped them to make their choices.
-
Users experienced positive interactions when they were faced with familiar conventions e.g., the use of drop-down calendars, and three-tier pricing.
-
User flow was improved when options they couldn’t make were taken away, or greyed out. Similarly, users valued warnings when options they selected may depart from typical flights e.g., having foresight that selections may be ‘open jaw’.
Pain Points
-
Users experience was interrupted when the websites did not reveal sufficient information, for example flight options that did not show times, or availability of flights on a given day. The same occurred with bespoke options e.g., ‘save your price’.
-
A key interruption occurred when it was not clear to the user that selecting the price confirms the booking option. Because this was not intuitive the error was repeated.
-
Users were frequently unaware of the running total of costs, which led to feelings of mistrust, and confusion.
-
A key pain point was that a user was able to get to the end of the search and select process before being made aware that the flight was ‘open jaw’. However, the system gave the user freedom and control, and once the mistake was identified it was possible to correct it.
-
Users reported that the sequence of booking was not always logical. In one instance, when a flight was selected, it included seat booking functions, yet the subsequent step also offered seat booking options; duplicating the effort.
Defining the problem
Affinity diagram
The next step was to define the problems users encounter when interacting with airline booking systems, using the extensive research data collected. It was also essential to communicate these issues clearly to stakeholders and design teams. The first stage of this process involved creating an affinity diagram, using a creative sorting method to organise the data, which served as the initial step towards improving the customer experience.
My role:
I followed a three step process:
-
I conducted an initial "sieve" to group similar data. This step marked the beginning of triangulating the data to identify patterns and usability trends.
-
I performed a second, more detailed sieve. At this stage, I aimed to be as precise as possible. By drilling down into the details and re-grouping post-it notes where necessary, I could define specific issues — labelled as headings — to be addressed through design.
Customer journey
map
Having gained a deeper understanding of the issues to be resolved through design, I needed to present this from the user's perspective. By aligning the data derived from the affinity mapping exercise with the user's experience from start to finish, I was able to establish a focused set of goals and opportunities to inform the design stage. This approach also helped create a compelling artefact for communicating with stakeholders.
My role:
I reviewed the gathered evidence from the research phase for each step of the booking process. Placing myself in the customer’s position—as their advocate in design—I considered the emotions and reactions, both positive and negative, encountered throughout the entire experience.
Problem statements
-
There is an opportunity to improve an awareness and understanding of the process, and to reduce the number of steps or skip optional steps entirely and make the user feel more in control and informed
Airline booking is a complex process, requiring many choices. This takes time and can lead to confusion, which can manifest itself through frustration.
-
There is an opportunity to improve layout and a feeling of flow through a better balance of promotions and their place in the process, and to enhance the ‘voice’ of the product with better CTAs
Airlines are commercial operations. Therefore, it is understandable that marketing will be a key part of the online booking model; however, CTAs, promotions, and upselling can distract from user flow, are also vague and therefore ignored.
-
There is an opportunity to be more forthcoming and offer prompts, to keep the user informed
Flight booking involves several dependencies that can lead to unexpected outcomes—such as unavailable flight days, stopovers, limited fare options, or ‘open-jaw’ tickets. Users are often unaware of these constraints until after making a selection, and poor communication of this can result in frustration or mistakes.
-
There is an opportunity to help users find prices that suit them early in the process, to build trust and engagement as part of their research process, and to improve the clarity of costs throughout the journey
User goals and behaviours, such as using aggregator sites to compare fares, show a strong focus on price. Booking a flight is often a significant one-off expense or part of an emotional experience like a holiday or family visit. When prices are hard to calculate or rise unexpectedly, it creates feelings of mistrust.
-
There is an opportunity to distill the information and options presented by the system, to reduce decision times and keep users engaged
From selecting departure and destination locations, picking dates, and browsing fares to choosing baggage, seats, and entering passport details, users must process a lot of information. Many report feeling overwhelmed, often quickly scanning data while scrolling, leading to errors.
-
There is an opportunity to give the user more control to set their own parameters, and not to make users feel forced to navigate options when they may not have completely formed plans
Users are often frequent, experienced flyers booking to secure low fares or last-minute getaways. They typically know exactly what they want, and excessive manual data entry (e.g., filling in fields) leaves them feeling burdened.
Design, Prototype, Validate
User flow
Having uncovered deep insights through user research, and defined the problems to be resolved through design, the next step was to design the 'ideal' linear flow based on this evidence.
My role:
First, I sketched the ideal user flow, from landing page to the booking summary screen, focusing on the most common use case. Through an iterative approach, I developed and refined the flow and mapped it out in full using Miro.
Sketch
prototype
With the ideal flow in place, the next step was to design solutions and start the process of iterative development. Beginning with low-fidelity sketches - using nothing more than a pen, paper, and scissors - allowed me to test and refine the user flow and website structure, and have freedom to explore design ideas. I'm a big advocate of sketching as a quick way to produce results, it allow greater creativity than drawing digitally, and as experience has shown me - is a fun and engaging way of working with, and presenting to, stakeholders!
My role:
I developed sketch prototypes for each screen state, for the full user flow from landing page to payment. At this stage I was considering all key interactive element for each screen, ideas for the realistic copy, and what CTAs would say to the user.
Interactive
prototype
With the user flow and design developed in low fidelity, it was time to build an interactive prototype. As well as further iteration of the design, I could start to build in design patterns, and produce interactive elements. Importantly, at this stage I could use the interactive prototype to conduct further a usability test to validate the design approach and experience.
My role:
Using the analysis frameworks (affinity diagram and customer journey map) and sketch screen prototype as reference, I built wireframes for each screen, using Figma. Each screen state captured all the key interaction elements. I was able to add hotspots to link the screens together, producing a 'clickable' interactive prototype.
Select UX interventions:
Landing page
-
Research showed that most journeys are return flights, so this is selected by default.
-
Users reported that they often found it difficult to understand whether flights were direct, or connecting, so an option is provided to show only direct routes.
-
The best-in-industry approach uses form fields that are pre-highlighted, to guide the user and reduce mental load. So that approach is implemented here too.
-
Smart defaults auto-complete the closest departure airport location to the user.
-
Research showed that users visit flight comparison sites and carriers to find the best prices. Providing a cost estimate (and, importantly, highlighting the lowest price) at an earlier stage of the booking process assists this crucial early engagement on the customer journey.
-
Research shows that users experience difficulty contacting customer support, so a button is added to the toolbar to ‘Talk to an advisor’ - e.g., to open live chat.
-
Research showed that when users book flights and accommodation, the two systems don't talk the same language. Therefore, once flight dates are selected, a summary shows 'Number of days / nights' between arrival and departure, so users can match up their bookings.
Flight selection
-
Having undertaken further usability tests, the user stated “it was difficult to understand where I was in this bit of the process. It felt like I was repeating the same thing”. The design was revised to include a more detailed progress indicator at the top of the page, and a visible identifier ‘Step X of X’.
-
Research showed that one of the user’s primary goals was securing the best price. When this information was difficult to find, it became a frequently mentioned pain point. The design responds by sorting results by price (ascending) by default. The design of the ‘flight card’ applies the same graphic (purple highlight) as the calendar for ‘best price’.
-
The date carousel shows a full week - either side of the user’s chosen departure / return - and clearly describes which date is ‘cheapest’.
-
Up to three flight cards are shown in the results. This design response applies the principles of Hick’s Law; to simplify choices and remove barriers to decision making, therefore improving flow. The total number of results is displayed in a button so that users are aware of further options, but have control over whether they see them.
Flight confirmation
-
When validating the design through a further round of user testing, the subject stated “This is OK. I’m not really taking much of this in, though. I just want to see my flights and the price, to be honest.”. In response to feedback, simple lines are used to ‘chunk’ the content more clearly. Full fare details are also now hidden by default, but available for users to review by clicking a button.
-
Research shows that a this stage, before users have committed to entering passenger details, they will share flight details and coordinate with other travelers. Responses to the online survey suggest this is often through screenshots or text. Including a button to share a link to the page simplifies this process for the user.
Seat selection
-
Competitive benchmarking demonstrated that an interactive seat layout is a widely used convention in flight booking. Most users therefore understand it well. Research also shows that users consider seat selection to be one of the least important parts of the booking process, suggesting that in the main it is well implemented by such conventions.
-
Reflecting on the user feedback from the flight selection stage, a more detailed progress indicator at the top of the page, and a visible identifier ‘Step X of X’ has been introduced because of the greater number of interactions and screen states within this stage.
-
Users will pick their favoured seat(s) and it is likely that they would want the same seats on another flight . To shorten the process, the same seats are offered, if they are available.
Choosing ‘extras’
-
User research showed that how upselling ‘extras’ is handled through the booking process frequently generated pain points, and feelings of frustration.
-
By crafting the user flow, ‘extras’ are restricted to one screen state just before payment.
-
Offering users a shortcut past this stage. Users interviewed at the research stage didn’t select add-ons at the booking, but often closer to departure when they knew more about their plans.
-
Making it easier to select add-ons for multiple travelers, using ‘select all’ options.
-
Not interrupting the flow, by opening hotel or rental car booking ‘partner’ websites in a new window.
-
Presenting add-ons in an easy-to-understand way that matches the real-world experience of catching flight; what is available at the airport when you arrive, and what is available when you reach your destination.
Handover
Handover
The final step in the process was to prepare detailed specification notes, in preparation for developers to turn the prototype into a real product. My experience in the built environment has taught me that preparing specifications carefully, with clarity, and a keen eye on quality, is the key to achieving the best outcomes.
My role:
I prepared detailed annotations within the interactive prototype, specifying the functionality and behaviour of how the product should work.
Reflection
Lessons
learned
As an experienced designer, I always reflect at the end of a project— evaluating delivery, my contributions, and gathering feedback from teammates, stakeholders, and clients. I assess what went well, what could have gone better, and identify ways to improve for next time.
With more time, I would...
-
Expand benchmarking beyond the airline industry: While the focus was on airline booking sites, it would be valuable to explore how other industries offering similar services handle UX for fresh insights.
-
Widen the survey participant pool: Using a research forum provided access to engaged respondents but introduced bias. Gaining feedback from actual airline customers or focus groups would offer a more comprehensive view of patterns and trends.
-
Increase diversity in usability tests: Usability tests were highly effective, but the participants had similar gender, ethnic, and socio-economic backgrounds. A more diverse group would provide broader, more inclusive insights.
-
Explore alternative ways to narrate the user experience: With a wider and more diverse research approach, creating User Personas or an Empathy Map could reveal greater variation in goals, contexts, and behaviours.
-
Conduct collaborative affinity diagrams: Conducting affinity diagram exercises with a diverse group would enhance creativity, bringing richer perspectives and improving the outcomes.
-
Test continuously: The usability test at the interactive prototype stage was invaluable, as was A/B testing. Continuing the iterative process through further testing cycles would help refine and perfect the design.
Building on the experience
-
Much like in the design of the built environment, the first idea in UX is rarely the best. Welcome challenges, adapt as needed, and creatively respond when validating assumptions in the real world.
-
Develop UI skills: I’m eager to deepen my understanding of UI design. Advancing to high-fidelity prototyping would provide an excellent opportunity to learn from specialists and bring the UX to life.
-
Balance detail with strategy: I enjoyed refining interactions and solving design challenges. By regularly referencing the Customer Journey Map and Affinity Diagram, I ensured that my work stayed aligned with the strategic framework and user needs.