top of page

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:

 

1. Research/Discovery

2. Analysis

3. Design

4. Prototyping

5. Wireframing

 

Role:                     UI/UX Designer

Tools used:          Sketch, InVision, Miro, FIGMA, Zoom,                                             Lucid, Adobe XD, Mailchimp

Period:                 2019

Home page

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.

 

Reseach/Discovery

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.

 

​ 

Competitive bencmarkig

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.

Online survey
mailchimp logo.jpeg

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.

 ​

Note taking

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.

Usability testing
zoom logo.png

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)

Analysis

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.

 

Methods applied in research phase;

2.1 Affinity Diagram

 

2.2 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.

 ​

Affinity Diagram

The Affinity Diagram session resulted into 10 groups whereas each group contained several notes being either neutral, positives and negative.

 

Affinity diagram.png
One observation per post it
IMG_0201
IMG_0240
nVbXI6NIQ2yj+jVtdkkaUw
%ZEpoE7jQViITyyjdwlk8A
AACfpkiyQUWybCrVZulh1w
Affinity diagram session
Affinity diagram

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.

Customer Journey Mapping
draft CJM.png
CJM 11.png
miro logo.png

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.

Methods applied design phase;

3.1 Flow Diagram

 

3.2 Interaction design for desktop design

Design
lucid logo.png

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.

Flow Diagram
IMG_0725.HEIC

"User Flow from Home Page to Seat selection whilst Booking flights"

The User Flow from Home page to Seat selection whilst booking flights (1).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.

Interaction Design for desktop

4. PROTOTYPE

 

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

Prototyping
Sketch Logo.png

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.

Skjermbilde 2021-04-29 kl. 14.24.16.png

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

Wireframes

5. WIREFRAMES

 

Wireframes are applied as they communicate clearly to developers what we're exactly going to build - a blueprint for the development stage.

adobe XD logo.png
1.0 Home Page

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)​

​​​

THANK YOU FOR VIEWING!

  • Email
  • Linkedin - Grå Circle
bottom of page