Case Study - FlyUX
The Challenge
Everyone has had that frustrating experience of trying to research, compare and book flights on a website that just wasn't user-friendly. Unclear navigation and long-winded booking processes can be confusing and stressful.
To achieve my Professional Diploma in UX Design I researched, designed, prototyped and tested a new flight booking tool which would make the process simple.
Role: This was a solo project. I undertook all the research, design, prototyping and wireframing, with support from collaborators to produce an affinity diagram.
Timescale: Jan-June 2021 (part-time)
Tools: SurveyMonkey, Camtasia, Zoom, Miro, Adobe XD, InDesign and Photoshop
Research
UX is a problem-solving discipline. Everything starts with understanding the problem you need to solve. I used a variety of qualitative and quantitative research methods to understand the goals, behaviours and contexts of users, informing my approach to FlyUX.
Desktop Research
Competitor Benchmarking
I started by researching existing airline websites and aggregators to understand the existing design conventions and identify pain points.
The research focused on British Airways, Japan Airlines, Skyscanner and Delta. Some of the key findings included:
-
Poor signposting through the booking process, leading to frustration and confusion
-
Popups and adverts can be distracting obstacles for users
-
Key information like baggage allowances is often provided late in the process, but other unnecessary information appears earlier.
Online Survey
To gather some quantitative data based on actual interactions, I also ran an online survey using Survey Monkey.
With limited time and resources for this project, I shared the survey on Facebook with friends and family. As a result of the Covid-19 pandemic, relatively few of my connections had booked flights in the past year, limiting the pool of potential respondents.
I received 28 responses. Because the sample size was so small I had to be careful about relying too heavily on the findings, but they struck a chord with the findings from other research. The sense of frustration with limited functionality and use of jargon was obvious. Key findings included:
-
Most common use cases were price comparison and booking flights
-
Adverts and additional services are frequent pain points
-
Users who opt for a website rather than an app prefer to compare lots of information on a larger screen.
Usability Testing
I needed to see how real people interact with existing flight booking tools to understand their goals, behaviours, contexts and mental models.
Due to Covid-19 restrictions it was impossible to run in-person usability tests, so this was conducted over Zoom and recorded with Camtasia (the free version, hence the watermark).
I prepared a test script in advance and ran a 60-minute usability testing session with a participant who was a personal friend. Again, the pool of participants was restricted as a result of pandemic travel bans, so I recruited a person who had travelled as close as possible beforehand.
The test combined a booking task on two different airline websites with an in-depth interview to get more detailed insights from the participant. (And of course, I got written consent to use their test footage in my portfolio.)
Analysis
The research phase generated lots of rich data about the goals, behaviours and contexts of users when using airline websites. I used different methods - and bit of help from some collaborators - to make sense of it.
Affinity Diagram
An affinity diagram was the perfect way to triangulate the findings gathered from different types of research and identify common themes. Due to the Covid-19 pandemic we couldn't meet in person, so I enlisted two colleagues to work with me online using Miro.
All three of us worked through all the research conducted so far and added observations to sticky notes that we shared on the Miro board. Then we started grouping observations together on the board based on things they had in common until we could give each group a very specific, descriptive name.
Eventually, we had a set of groupings that we could categorise to show what the common observations were at each stage of the user experience - from initial research across multiple airlines and aggregators to selecting seats on the plane.
Customer Journey Map
The final affinity diagram imposed some order on the chaos. I used this visual summary of user goals, behaviours, contexts and pain points to put together a customer journey map which shows how users respond to each stage of the process.
A recurring theme of the research is shown clearly in the map: the multiple steps involved in inputting information to confirm a flight booking feel like an obstacle, even though they are necessary. FlyUX should make it clear how many steps are left and make the process feel as smooth and natural as possible.
Design
A customer journey map is a great starting point for understanding how users need FlyUX to behave. From there I started to flesh out how FlyUX could make the experience smooth and simple.
User Flow
We know how users feel about moving through existing booking websites. So how could FlyUX do better?
I started by designing the user flow, showing what the user inputs, how the software responds, and the decisions users make throughout the process. It's so useful to be able to put pencil to paper and literally map out each stage - it makes it quick and easy to play around with different possibilities and spot the steps that aren't working.
After much crossing out, arrows everywhere and at least two drafts that turned out not to be final, I took my completed sketch and created it in Miro.
Interaction Design
Next I needed to define how the software behaves when users interact with it. What rules govern how it will respond? What feedback will it give users so they know an action was successful?
Sometimes the image you have in your head doesn't work in practice, so getting it down on paper was the best way to work through early designs. It's an iterative process that has to start on paper for me, as with the user flow: it's so much easier to scribble things out, compare old and new ideas and physically lay out each screen state. Even though sketching has never been my strong point, I find it vital for being creative!
As you can see from this image gallery, I went through a lot of iterations of this interaction design. It was where FlyUX really started to come together.
Prototypes & Wireframes
Taking FlyUX from pencil and paper to a real experience required testing and validation. Having an interactive prototype gave me opportunities to refine some interactions before creating the final detailed wireframes.
Prototyping
I built a medium-fidelity prototype in Adobe XD. The beauty of this approach is that it's interactive enough for user testing, but less time or resource-intensive than building in high fidelity.
Validating the Prototype
I conducted usability testing on the prototype to validate the work I'd done so far - giving me the chance to identify pain points before the build stage.
In this test I got some really useful feedback about the way I had originally designed the calendar in the date picker. 31 May was a Monday in this example but this meant it appeared next to 1 June - not where the user looked for it, which didn't match his mental model of a calendar.
I made some changes to account for this by moving the extra day back to where the user expected to see it. A further round of testing showed that this worked better for users, and the update is reflected in the final prototype and the wireframes.
Wireframing
Finally, once the prototype was in good shape, I took each frame and annotated it to create wireframes that would be a helpful framework for a developer. This level of specificity appeals to my picky nature so I really enjoyed getting FlyUX ready for handover.
Outcome
FlyUX offers a simple, streamlined user experience for flight booking based on in-depth research using a variety of methods.
With more time and resources in the next phase of development, I would conduct usability testing with more participants and have a larger sample size for the online survey. That would give me broader qualitative insights and more statistically significant quantitative results.
However, it was a valuable learning opportuity to flex my UX muscles. It absolutely proved the importance of conducting usability testing with the prototype before moving into the building phase, a technique that will stay in my toolbox for future projects.