Home > Projects > Fly UX

FLY UX is a fictional low-cost airline who is looking to create an online experience that is quick, easy and intuitive.
The aim for this project is to design a new website, primarily focusing on the flight booking process: how users search, find and select flights online.
The end goal is to design and build a clickable prototype that can be tested with users, along with a detailed set of wireframes.
In order to do so, the following UX process approach is applied:
Role: UI/UX Designer
Tools used: Sketch, InVision, Miro, FIGMA, Zoom, Lucid, Adobe XD, Mailchimp
Period: 2019

1. RESEARCH/DISCOVERY
Before designing our new flight booking software, it is important to look at how competitors and other organizations are trying to solve the same problem. The goals of this phase is to identify user goals, behaviors, context, pain points, positives, emotions & mental models for people booking flights.
Methods applied in research phase;
1.1 COMPETITIVE BENCHMARKING
To understand how best-in class airlines are solving the problem that Fly UX is trying to solve, a number of airlines were analyzed to see what we can emulate, what we can improve and what kind of conventions to follow. Organizations analyzed: AirBnb, British Airways, Norwegian, SAS, Qantas & Qatar.
INSIGHTS FROM COMPETITIVE BENCHMARKING
Things to improve/do better/avoid:
-
Location of search bar, not having to scroll down to see 100% of it
-
Visibility of bottons
-
Unnecessary features like promo code in search bar
-
Car rentals and hotels in search bar
-
Advertisement taking over site
-
Annoying pop-ups related to log-in in each step of the booking process
-
Pop-up telling user that time is expiring
-
Avoid long text (information) in fares
Things to emulate:
-
Progress indicator
-
Low Fare Calendar & Regular Calendar
-
Users like to be prompted into the next step (e.g. a subtle approach whereas telling them what do do next)
-
Shopping carts with prices
-
Informing users their benefits of logging into an account or registering
-
Keeping the search bar available in the search results to avoid user having to go back to do another search, explaining fares with both photos and short clear text
-
Clear top line menu with; logo (that if user clicks on it, it forwards them back to home page), Search, Login.
-
Horizontal search bar
1.2 ONLINE SURVEY
To gather user requirements, an online survey were applied to identify goals, behavior and context of people booking flights online. No more than 10 questions were asked as the more questions asked, the less people are going to fill out the survey. In addition were all the questions kept on one page, so that people could see that there were only 10 questions. A mixture of multiple choice, structured and unstructured questions were asked in order to gain both qualitative and quantitative insights.

1.3 NOTE-TAKING
While watching recordings of two usability tests (Aer Lingus and Eurowings) for desktop, detailed notes focusing on goals, behaviors, context, positive interactions and pain points were taken.
SOME INSIGHTS FROM NOTE TAKING
Pain points:
-
Lack of prompts/signals and visibility on buttons like 'Search flight'
-
Use of jargon/words making it impossible for the user to understand (e.g. 'Collect avoid')
-
Not being informed well enough on examples like there only being one flight available
-
Prices not communicated well enough (e.g. price for 1 or 2 adults)
-
Unknown features with no further explanations
-
Repetitive content (e.g. additional services)
-
Airline not 'remembering' the user after being a customer for over a decade
-
Not seing and understanding the difference in the fares presented
Positive interactions:
-
Being warned in a helpful message when selecting a "open jaw
-
Airport origin is automatically populated
-
Pop-up suggestions in forms making it time-saving and easy
-
Flight time, Duration and Prices being well presented within search results
-
Being presented with alternatives if there are no flight results are a positive
1.4 USABILITY TESTING
Two airlines, KLM and SAS (Scandinavian Airlines) were tested in a remote usability test.

SOME INSIGHTS FROM THE USABILITY TESTS
Positives interactions:
-
Search form is well located in the front and at the top of the home page
-
Feature 'Direct flights' in search form
-
Being able to see the entire week with prices and dates in search results is a positive as customer could be flexible on dates and would like to choose a good price
-
Progress indicators
Pain points:
-
Ads on home page
-
Not locating necessary information regarding layover duration
-
Not noticing/understanding what is included in fare (e.g. luggage)
2. ANALYSIS
Step 2 of the process is to analyze all insights gained from the research as it is only through analyzing this data, that we can clearly articulate the problems we aim to solve for the user. To make sense of the large volume of raw data and truly understand the problems which needs to be solved, two techniques were applied, affinity diagram and customer journey map.
2.1 AFFINITY DIAGRAM
As affinity diagram is considered to be the best tool for organizing unstructured data, the technique were applied, starting with the affinity diagram session together with a research partner.
The Affinity Diagram session resulted into 10 groups whereas each group contained several notes being either neutral, positives and negative.

![]() | ![]() | ![]() |
---|---|---|
![]() | ![]() | ![]() |
![]() | ![]() |
2.2 CUSTOMER JOUREY MAP
The customer journey map was sketched out roughly on a A3 paper first, before being recreated and refined in Miro.



3. DESIGN
As user's needs, behaviors, goals, feelings, mental models, context, pain points and positive interactions are both researched and analyzed, the next step is to design a solution.
Two design techniques are applied, a Flow Diagram, followed by an Interaction Design for Desktop.

3.1 FLOW DIAGRAM
First step of creating the Flow diagram was to do rough sketches on paper, before recreating the sketches in Lucid. The Flow Diagram visualizes a high-level user flow for the new desktop website, including screen states, user choices and interactions as they go through the flight booking process from Homepage up to and including Seat Selection. The diagram also adresses issues identified within the customer journey map.

"User Flow from Home Page to Seat selection whilst Booking flights"
.png)
3.2 INTERACTION DESIGN FOR DESKTOP
The flow diagram addresses all the issues and user goals covered in the research and analysis phase. Based on this flow diagram, an interaction design showcasing each screen and screen state from users flowing through the flight booking process, from Home Page to Seat Selection.




4. PROTOTYPE
To validate solution created, the tool prototyping is applied. The prototype were developed in Sketch and then made interactive in InVision.

USE CASE:
From: Barcelona
To: Athens
Outbound date: Sat, 20 jun
Return date: Sun, 25 jul
Travelers: 2 adults
Fare: Flex
Calendar details: you can choose between the regular calendar and the low price calendar.
Note: This is a prototype and not everything is interactive, hints are therefore provided.

INSIGHTS GAINED FROM PROTOTYPE & TESTING OF PROTOTYPE
As the prototype is a work in progress and not the finished product, a user who works as a developer tested the prototype.
Outcome: The overall experience were good as user got from starting point to seat selection without problems, however, as no prototype is perfect and there is always room for improvements, the following areas were identified;
Identified areas of improvement:
-
Screen 1-5: Travelers input field: text 'adult' should be colored light grey instead of black
-
Screen 1-18: The different input fields must be highlighted in light blue when activated mode
-
Screen 6 to 16: Toggle should be light grey instead of dark blue in disabled mode
-
Screen 20: make red box "Select return" a button which forwards user to anchor-point that is set on return fares presented to avoid user having to scroll dow
-
Screen 20, 21,22: The dropdown panel should be 100% visible without having to scroll down to see all of what is included in the fare
-
Screen 24-29: The size the footer should be decreased, aiming for the same size as the other screens
-
Screen 32: Anchor point a bit higher
-
Fares: Making all fares possible to select
5. WIREFRAMES
Wireframes are applied as they communicate clearly to developers what we're exactly going to build - a blueprint for the development stage.


OUTCOME- WHAT I'VE LEARNED
Throughout this journey of six months I have both learned and improved on transferrable technical skills and soft skills - it's been fun, instructive with a steep learning curve.
Personally, the most valuable lessons learned this far has been the importance of following the process, making design decisions and creating solutions based on the analyzed data gained from the research.
Technical skills:
-
Sketch (Prototyping)
-
Miro (Customer Journey Map)
-
Figma (Affinity Diagram)
-
Remote usability testing (Zoom)
-
Lucid (Flow Diagram)
-
Adobe XD (Wireframing)