fly ux
The Brief
Your client is a start-up airline called Fly UX. 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. Task Your task is to design a new website for Fly UX. You’ll focus specifically on the flight booking process: how users search for, find and select flights online.
Your end goal is to design and build a medium-fidelity, clickable prototype that can be tested with users, along with a detailed set of wireframes.
the problem with existing
flight booking sites
There are vast amounts of flight booking sites available for travelers. The options can vary from booking through the airline directly or using third-party aggregator platforms.
Ask anyone you know how they feel about booking their flights online, and the general feedback you get is that of frustration and confusion. The experience on the whole leans towards that of a negative one. It's a service accessed by a broad spectrum of customers, and yet the usability of booking platforms and navigating their many nuances leaves people feeling cold, even if they've just booked a flight to the Maldives.
In this project, I have focused on one use case flow: searching for a flight, through to payment. I have gone through the UX process, from research and analysis to building a medium-fidelity prototype and producing wireframes that can be handed over to developers.
phase 1: RESEARCH
competitor benchmarking
This project was an opportunity to acquaint myself with how existing flight booking platforms function; to identify commonalities, successful features, and areas of weakness.
I wanted to compare reputable, established industry names alongside increasingly popular 'metasearch engine' products.
By carrying out this research I could identify:
-
Any usability problems and flow issues
-
The strengths and weaknesses of the competition
-
Industry conventions
-
Innovative features or functionality
-
Market gaps
-
Tone and copy of competitors
-
Clear, effective design
user interviews & usability tests
During the research phase, I conducted several depth user interviews to understand:
-
What the users' goals are when using flight booking platforms
-
The context of use - the physical or social environment
-
How existing flight booking platforms help them achieve their goals
I created an interview script as a basis for my interviews, making sure to ask open-ended questions, and keeping the interview conversational.
Alongside the interviews, I ran usability tests to examine the quality of the user experience when using flight booking platforms - observing what users actually do and where the pain-points are.
phase 2: analysis
affinity diagram
The affinity diagram process was a valuable opportunity to transcribe and organise the raw data collected during the research phase. I invited a colleague to help me review all of benchmarking, interview notes, and usability test videos, and note down any observations (positive and negative) that could be relevant to the design of my booking site. The note-taking was conducted independently to prevent any bias in our interpretations.
We took the unstructured data and started to group the notes into 'categories'. The categories started off relatively broad and became progressively more specific and meaningful as we continued the analysis.
This exercise was a great way to foster discussion and collaboration. It brought about a shared understanding of the problems people face with existing flight booking products.
.jpg)
customer journey mapping
Using my research findings I created a Customer Journey Map to help visualise what the user experiences, as they search for and book flights.
Each column represents a stage in the flight booking process. Not all of the columns represent an interaction with the booking platform, but presenting the broader context of the process helped with identifying some extra design opportunities e.g. during the "Research" phase.
I went back through the research findings and noted any of the users' goals, behaviours, and pain points. I then assessed whether each experience was positive or negative. This experience was then depicted with smiley/sad faces accordingly.
I enjoyed presenting the research findings in a structured manner. The layout of a Customer Journey Map is something that you can understand quickly. You can see instantly the process areas that cause the most dissatisfaction. In a professional setting, I imagine this would be an ideal document to present to colleagues who were not directly involved in the research phase.
"This could be an expensive mistake"
As illustrated on the Customer Journey Map, the flight booking process is impaired by moments of confusion, frustration, and ultimately dissatisfaction for the user.
Right from the beginning of the search, many products simply aren't forgiving of the user. They don't offer the affordances, flexibility, and clarity that the user needs to be reassured that they are making the correct decision.
what i took from the research phase:
-
The site needs to be perceivable: searching for flights should be the primary action. Don't distract from the user's primary goals.
-
Be predictable: indicate to the user how long the process will take, what they need to do, and what happens next. Show visibility of the booking "journey" throughout.
-
Give feedback: Show when fields are active, ask "did you mean...?" if there is a typo, and autocomplete as the user is typing.
-
Provide flexibility: on search parameters and when filtering results.
-
Transparency: search results must be clear and highlight any potential deal-breakers.
-
Reassure: CTAs and copy need to be obvious and understandable.
-
Add innovation: the ability to share results, lock price, and search by month/year/country.
-
Be consistent: clear visuals of the price and itinerary at all stages of the booking process.
phase 3: DESIGN
user flow diagram
Using Miro, I started forming the design of my booking site. I had to envisage how users would flow through the application as seamlessly as possible. For each stage of the flow, I needed to consider the actions and micro-interactions required for the user to complete the task.
If this were to be a product released into production I would consider all of the possible ways a user would navigate through the site, and how each page would work based on their different actions.
Using the paradox of specificity, I would pick the top 3-5 flows and make sure that the product works for those scenarios.
However, for this project, the requirement was to focus on the primary use case: the linear process of searching for and booking a flight. The process flow below shows the steps of the primary use case, along with optional modals and skippable steps.
low fidelity prototype
Based on the stages outlined in my user flow diagrams, I started sketching desktop screen layouts. These sketches included consideration of the primary user flow, positioning of the main navigation, and how the interactions would be displayed to the user. This was a valuable opportunity to translate the ideas I had into something tangible.
When considering the navigation and controls, I explored successful existing examples online. I also researched design principles and patterns, and how they could be applied to my design. This project was not about reinventing a booking system or coming up with an innovative new method of booking, it just had to help users successfully and efficiently achieve their goals.
While sketching, I had to consider whether my product would be easily perceivable to the user, so I followed some of the standard UX conventions, to ensure ease of use.
The main benefit of prototyping in this manner was that it is so quick and inexpensive; I could test the flow and make corrections with no time or cost implications.
medium fidelity prototype
When I was happy with the low-fi mock-ups, I created a med-fi clickable prototype in Adobe XD.
I built in the interactions based on my primary use case. I found that creating a med-fi prototype required much more attention to detail, and I could see how valuable the low-fi prototypes are at testing and eliminating problems earlier on in the process.
As interactions were added, I could then judge whether the layout, navigation, and copy made sense. It was great to see my product "coming to life", and sharing a link meant that others could play around with the prototype and provide valuable feedback.
Creating a med-fi prototype was a great way to refine the execution of my design, while still allowing for testing ideas and any potential change of direction. The limited functionality options, however, did make it feel like my prototype was still a distant representation of how my end product could potentially look and feel.
_gif.gif)
wireframes
Once the med-fi prototypes had been completed, they were used as the basis for my annotated wireframes. If my product were to go into production, I would use the wireframes to communicate to a developer what my product needs to do: outlining the specifics of how the product works - its controls, rules, and feedback.
I needed to consider and define:
-
What the macro and micro rules would be for each page
-
What elements to include: input controls, navigational and informational components.
-
What a successful or unsuccessful interaction would be
-
What feedback is given to the user after each interaction e.g error handling
ON REFLECTION
This was the first project that I completed with the UX Design Institute. It was really enjoyable to apply my existing skills to this process.
For me, the most notable aspects of this course have been:
-
The importance of user research: don't jump straight to solutions!
-
Understand the context of use
-
Observe: look at what users actually do
-
Listen: it can give insight into opportunities you may not have previously considered
-
Affinity mapping: start independently and then discuss - avoiding group think
-
Clarity of hierarchy and flow
-
A newfound appreciation for microinteractions and affordance
-
The importance of testing and reiterating
How would I do things differently?
-
Conduct more user interviews and tests, in order to collate more research information
-
Complete an affinity diagram with more people, to see if greater insights are reached
-
Test the prototype more thoroughly, on more people
-
Work out the flow and prototype for longer (or multiple) processes e.g. from beginning to end of the booking.
Technical skills I have acquired:
-
Adobe XD (prototyping and wireframing)
-
Miro (user flow diagram)
-
Remote usability testing (Zoom and Microsoft Teams)