Fly UX

The brief: Create a better flow for the booking process of the imaginary airline "Fly UX" for the UX Design Institute.

  • Concentrate on the process from searching flights throught to seat selection. 
  • Focus on user experience only, not UI design.
  • Complete a full cycle of the UX process.
  • Take the product all the way from an idea to detailed wireframes.

Step 1: Research

I believe research is the most important part of any project. One needs to know what problem the users are trying to solve and how we best can help them solve it. It's important to put ego aside in this phase. It is not about what we think the users need, but about what users actually need. 

Competitive benchmark

Learning from the best

I compared the booking processes from Norwegian, KLM, Lufthansa and Vy - competitors in the same and in similar industries. 

- Learn industry standards and conventions.
- Compare the funtion of various flows and features.
- Learn from pain points and gain inspiration.

- The time and effort that goes into well-conducted comparisons.
- The advantage of a structured approach, even in seemingly simple excercises such as this. 

Online survey

Getting a sense of where to start

I used my network to gain insight to potential user's goals, behaviours and contexts. 

- Practice formulating solid, open-ended questions.
- Avoid biases as much as possible.
- Learn about user's context and most frequent use-cases. 

- I chose to work on Fly UX with a desktop design. This was based on an assumption that most people use their computer/laptop to book flights. This survey presented a great opportunity to either validate or negate this assumption. Unfortunately, I thought of this afterwards. The lesson I take with me going on as a UX professional is to remember to always question my own assumptions. Especially in an early research stage. 

Note taking

Mastering an underappreciated art

As a trained anthropologist I do not take note taking lightly. Note taking is the first step in processing your interview data and a lot of insight is generated in this process - if done well. 

- Take notes to two prerecorded interviews and usability tests. 
- Learn about the users experience: goals, behaviours, pain points, mental models and contextual information. 
- Create structured, concise, but detailed notes. 

- Though note taking does not seem fancy or flashy, it brings a lot of value to the research process. 

Feedback from project supervisor:

"Your note taking project is brilliant! Really easy to read and follow, if this were in a team setting, it would really benefit those who didn't partake in the research. The use of different colours to colour code your points in your note taking project is really effective. It makes the document really easy to scan through and you can find what you're looking for really easily. Well done!" 

Usability testing

Understanding user behaviour

For this part of the research stage we were ask to conduct a usability test of two already existing airline websites. 

- Write an interview/test script
- Conduct a digital usability test
- Draw insights to user's contexts, goals, and behaviours. 

- The test took longer than planned. This is perhaps the result of putting two social anthropologists who love to discuss in a usability-test-setting. In future projects I ought to be less afraid to move the test along, even if it means interrupting the candidate sometimes. 

Further research methods learned in this phase

In-depth interviews

Stakeholder interviews

Card sorting

A/B testing

Heuristic evaluation

Step 2: Define/Analysis

Affinity Diagram

Collaborative analysis

Creating an affinity diagram is an intense experience. My collaborator and I: Reviewed the data, noted down every aspect of the research data that stood out to us, structured the notes, found patterns, and restructured. We grouped issues and challenges creating categories based on most frequent user flow. 

- Learn how to put structure on qualitative research data.
- Learn the power of collaborative analysis.

- The importance of getting some other pairs of eyes on the data - what people pick up on and where they find patterns varies greatly. There is strength in collaboration. 

Customer journey map

Structuring qualitative data

Based on the research and affinity map, I created a customer journey map for the most frequent flow - a vacation-related booking for adults. First defining high-level steps, then documenting goals, behaviours, pain points and suggested changes for each step. I also added a quote from users here and there to make the document more lively. 

- Learn how to translate research data into a structured document.

- I actively tried to keep my map concise and to the point (as was the task), as I am used to getting feedback on being TOO elaborate and detailed. However, for this method I was told that greater detail is beneficial. In the future I can thus restrain myself less and really get into those fantastic nitty gritty details. 

Other tools introduced in this phase


Customer value curve

Empathy maps

Step 3: Concept

Flow diagram

Working out the issues

My aim here was to fix all the issues uncovered during research.
I defined the high level flow for our primary use case. Sketching first by hand, later on figma, every screen and interaction in this process. 

- Define the high level flow for booking flights.
- Address all the issues highlighted in your customer journey map.
- Prepare for designing screen details.

- The attention to detail necessary to create good design includes conscious choices about every click, every button, every piece of information presented. Meticulous work, but it delivers results.

Interaction design

Switching to solution mode

Building on the flow diagram I sketched the screens and screen states for users flowing through the Fly UX desktop app.

- Address all the issues and user goals identified.
- Use sketching as a tool for problem solving, before prototyping or digital wireframing.

- I was surprised to learn that our project managers were not at all concerned with the aesthetic qualities of our sketches. Sketching is a tool for problem solving, not for showing off one's drawing skills. Nice-looking sketches are great, but it is the quality of the solutions that counts. 

Step 4: Design


Creating a solution

- Create a medium fidelity prototype for the desktop application. 
-  Add detail in the form of interactivity.
- Learn powerful design tools along the way.

- This was my first time using Figma - using any proper design software really. So the list of lessons learned during this project is long. Getting better acquainted with the functions and terminology in Figma along the way, I see in hindsight how I could have designed the prototype even better from the get-go. Yet, keeping in my that this is my very first prototype ever, I'm pleased with the results. 

You can try the prototype yourself by clicking the illustration of it!

You've done a really good job with your solution, I love the use of progressive disclosure, where ever it can be used. It gives the whole process a bit of something. It works well for the initial stages of this process. I think you've designed a really nice flow. 


Communicating the details

- Create wireframes for your prototype from the homepage up and to seat selection.
- Make sure the wireframes contain all the necessary detail a developer would need to build the application accurately.

- Gaining more knowledge of the possibilities within Figma. 
- Learning how to communicate with other professionals and developers, and using their vocabulary. 

The slideshow below features a selection of the wireframes I created. 


A deep understanding of what goes into a UX process start to finish,
as well as training in all of these methods, tools and approaches. 

Control of: Miro and Figma.

Awareness of my skills and strengths in qualitative research,
and how to apply these in a UX process.

Update january 2022 (one year later):
As my skills in UI design have improved I challenged myself to a redesign of the screens from this project which makes for a fantastic  comparison. Click here to see the results of before and after!