top of page
185 copy.png

Fly UX

2021

Project Overview

As graduation project from the UX Design Institute I developed a clickable desktop prototype for the fictitious airline "Fly-UX", based on extensive research.

Context

For this project the UX Design Institute formulated the following context...

"A start-up airline called Fly UX is looking to create an online experience that is fast, easy and intuitive; one that is based on a deep understanding of their target user."

Assignment

My task was to design a new website for Fly UX, with a focus on the flight booking process: how users search for, find and select flights online. 

The end goal was a clickable (mid-fidelity) prototype that can be tested with users, along with a detailed set of wireframes.

To do this I went through the full UX process:

Research Phase

  • Competitive Benchmarking

  • Online Surveys

  • Usability Tests

Fly-UX Research

Competitive Benchmarking 

I started my research with competitive benchmarking, which allowed me to identify what my competitors are already doing right, and to note down what I could improve with my own design.

 

I reviewed the most popular airlines of North-America, Europe, Asia, and Oceania in 2021. Additionally, I looked at travel websites, such as Airbnb, booking.com and Tripadvisor, as shown in the examples.

Additionally, I reviewed the benchmarking documents of six fellow students. 

The websites that I judged as the most user friendly had in common that they: offered help texts or information buttons at all fields and icons, required only a small number of choices and clicks, and displayed noticable and well-worded CTAs.

What were you trying to do on the website or app (1).png

Online Surveys

Following up on my own analysis of the usability of already existing airline websites, I reviewed the results of online surveys shared by two fellow students providing insights into the context, behaviours and goals of a total of 74 airline customers

In order to receive realistic results the questions focused on real past flight booking experiences, as shown in the example.

Flight costs were by far the most mentioned by customers as a point of interest and determining factor during the flight booking process.

The answers to the question "What would you change about the website or app? What improvements would you make?" presented three main groups of suggestions: Reducing unwanted ads and extras, sorting flights according to their price, and making CTAs more visible.

Laptop

Usability Tests

Of course, what people say they do and want and need (in the future) does not always match their actual behaviours, and even though the online surveys were based on real past experiences, the next logical step was to conduct usability tests.

 

I conducted a virtual comparative usability test to observe an airline customer live during the flight booking process.

The two main goals for the usability test were (1) to learn about the context of people that use airline websites, and (2) to learn about their goals and behaviours while booking flights. 

Usability Test Script 14082021.png

I split the session into four parts:

  1. Short introduction explaining the process and purpose of the session;

  2. Background interview about general habits in regard to internet use, and specifically about a past flight booking experience;

  3. Flight booking task with airline A;

  4. Flight booking task with airline B.

You can read through the Usability Test Script by clicking on the image.

Copy of UXDI P3.png

Additionally, I reviewed two sessions provided by the UX Design Institute and noted down the key insights: anything that would help me make design decisions later on.

You can read through my Usability Test Notes by clicking on the image.

It was interesting to witness different people run into completely different problems during the same task, including problems that I would not have expected. Although not all problems shared high priority, I was determined to eliminate them if their solutions were easily accomodated.

Data Analysis

  • Affinity Diagram

  • Customer Journey Map

Fly-UX Analysis

Affinity Diagram 

In order to sort through the large volume of research data I had gathered and reviewed I organised an Affinity Diagram Session together with two friends with academic backgrounds in Cultural Anthropology and Film & Photography. 

 

During the session I presented all of the research data from my own competitive benchmarking analysis, competitive benchmarking analyses of four fellow students, results of the online surveys of two fellow students, and several clips of key moments from the user tests I had analysed - additionally to my notes.

 

We created a whiteboard in Miro and each noted down anything that seemed noteworthy for the design of FLY UX independently.

 

Next we joined our notes together on the whiteboard, read through all of them and cleared up ambiguities. We then took turns sorting a few notes together that seemed to be related to each other until we created several distinct groups.

 

It was important for me to create the Affinity Diagram with people who did not share a design background, to increase the likelihood of a different understanding of the data to validate or challenge my own observations and conclusions.

We created fourteen groups and named nine of them. Two post-it notes were left on their own, to be judged later on.

 

I decided to end the session at this point and to complete the affinity diagram on my own. 

After a good night's sleep I went through all of the data again and made sure to add every single observation that was not yet represented in the diagram and continued the process of grouping notes together and naming their categories.

I then changed the colours of the post-it notes to categories that would later be useful for a customer journey map: 

 

Positive Interactions; Goals; Behaviour; Context; Pain Points; and Conclusions.

My final affinity diagram consisted of (1) notes on the different stages of the flight booking process in specific, and (2) notes relevant for the design of all webpages in general. 

You can view the finished Affinity Diagram in detail by clicking on the image.

Even at first glance the Affinity Diagram showed clearly that perceivability was an important and recurring subject, and that airline customers experienced major pain points on the flight search results page, during the selection of add-ons, and in regard to diversity and inclusion.

Customer Journey Map

To re-focus my analysis on my end goal of designing the webpages for a flight booking process I sketched out a customer journey map, including the emotional journey airline customers seemed to be going through and the main high- and low lights that became clear in the affinity diagram per each step in the flight booking process. 

 

UXDI Project 6_ CJM (4).jpg

I then transferred the map into Miro and continued to define the high-level steps in correspondance with the high-level groupings from the affinity diagram.

I added direct quotes from key moments of the usability tests to the emojis, to underscore my choice of emotion and to help bring the map to life. 

Any gaps for the customer goal section I filled through combining my notes with the actions possible on existing sites. 

You can view the finished Customer Journey Map in detail by clicking on the image.

 

The Customer Journey Map served as an extremely helpful tool for following steps, making it easy to remind myself of the purpose and the do's and don't's for each screen (state) I was designing. By checking back in with the Customer Journey Map at every design stage I ensured I was designing based on the needs of a large and diverse group of target customers versus my own. 

Design Phase

  • Flow Diagram

  • Interaction Design

Fly-UX Design

Flow Diagram

After weeks of extensive research and data analysis it was finally time to start the design of the Fly-UX website. The first step was to define a high-level flow, a primary use case. This way I ensured I understood how users would flow through my design and that I included all the issues highlighted in my customer journey map.

 

Again, I started with simple sketches on my tablet.

Each screen (state) was represented by a box, and each interaction was represented by a circle.

Happy user flow1.png

As soon as I was happy with the basics of the user flow I transferred it into Figma, and added more details and colours to show which screen states belonged to the same screen for scanability. 

You can view the finished Flow Diagram in detail by clicking on the image.

Even though I went into a deeper level of detail than necessary for the Flow Diagram, the short descriptions of what could be found on each page and the specific reactions to the interactions made it possible for me to focus on the design and placement of those contents during the next phase.

Screenshot_20220222-155522_Concepts_edited.jpg

Interaction Design

Building on the flow diagram I started sketching the first screens and screen states for users flowing through the Fly-UX website.

Screenshot_20220222-155538_Concepts_edited.jpg

From the start, I knew the search menu had to be an eye-catcher on the home page. This was what customers expected. Here you see the first ideas for a flight search menu that expanded after interaction and a first attempt at making sure the task at hand has enough space to be fully functional. For this, I had the idea of opening large pop-up menus next to the main search menu.

Screenshot_20220222-155649_Concepts_edited.jpg

However, this design quickly filled up the entire screen, creating a lot of noise. Here you see an attempt to draw the customers attention to the task at hand by making the pop-up menu larger than the main menu...

Screenshot_20220222-155958_Concepts_edited.jpg
eebce6a8-5408(Design Test).png

The research data clearly showed that major pain points existed in regards to the flight results and selection page. Here you see two attempts at creating a quick overview of a customer's top three outbound (and inbound) flights - and how to include the forthcoming highlight of best prices and airports.

Quick usability tests with friends and family helped me decide which parts of these initial designs I should keep and which I should discard or adjust.

One of the ideas I could not shake was to keep a one page overview for the entire flight booking process. While this is often the norm for mobile app design, it is not common or viewed as necessary for desktop design. However, the researched showed: the less clicks and scrolls the better. I was determined to make sure customers did not waste time searching for anything on the Fly UX website. Eventually, I found a satisfying solution that combined my new ideas with established design conventions. 

To summarize my design choices as briefly as possible; I opted for a customer-centered, minimalistic and consistent design that ensured straightforward interactions through help texts and progressive disclosure. 

Honourable mentions; the interactive maps and flex options! I added these features to accomodate the rapidly growing number of airline customers that are working digitally and are looking to set up their home office "wherever the sun shines" throughout the year. 

Prototype + Hand-over

  • Medium Fidelity Prototype

  • Annotated Wireframes

Fly-UX Protoype
Laptop
mid-fid prototype homepage v1.png
eebce6a8-5408(Prototype Test).png

Medium Fidelity Prototype

Finally, I built a clickable prototype in Figma that contained enough detail and interactivity to test the high-level flow, screen layouts, text, and basic interactions.

 

I kept colours to a minimum and chose a plain font, because I wanted to make sure that I handed over a design that could then be taken on by a professional visual designer. Still, I incorporated enough personal touches to create a positive user experience.

The biggest change from the initial sketches to the  prototype was the placement of the "passenger details" section before the "add-ons" section, in order to enable speedy booking. 

Before submitting the prototype to the UX Design Institute I conducted a number of usability tests. These helped me increase the visability of information icons and fix interaction errors in Figma before finalizing my project.

What a journey! Here is a (4min) recording of a click-through of the final prototype for the Fly UX desktop application, from the homepage up to and including seat selection.

Laptop
wireframe .png

Annotated Wireframes

While mid-fidelity prototypes may serve as a great starting point for visual designers to do their job well, developers require a lot more extra details to build a product accurately.

Therefore, along with the prototype I created a set of annotated wireframes that explained the various purposes and behaviours of all of the components.

You can read through the Annotated Wireframes by clicking on the image.

Personal Learning Outcomes

  • The majority of the positive interactions and frustrations users experience are indeed related to current best practice designs (or lack thereof) 

  • An affinity diagram session with non-designers is pretty much a bonus usability test

  • Babysteps are the key to accurate problem defining and solving

  • Adding interactions in Figma early on saves a lot of time down the line

  • Test as much as possible throughout the process, it never hurts the design

  • Sleep on it

Untitled design (1).png

I have truly enjoyed my study at the UX Design Institute and the process of learning to apply psychology to software technology professionally, with a human-centered approach.

Laptop
flyuxxxx.png

High Fidelity Design Ideas

Of course I couldn't help myself... So here you see the result of me playing around with glassmorphism.

bottom of page