top of page
Travel Startup Bootstrap Web Landing Page by PanoplyStore.jpg

Colibri Airlines

Ux Design Institute
Professional Diploma in UX Design

jump to

final result

Context & Goal

For this graduation project I had to design a website for a  start-up airline. They were looking to create an online experience that is fast, easy and intuitive: one that’s based on a deep understanding of their target users.

The Goal was to design a new website for my client by focusing specifically on the flight booking process: how users search for and select flights online. To do this I’ll had to go through the full UX process. The end goal was to design and build a clickable prototype that can be tested with users, along with a detailed set of wireframes.

Competitive benchmark

Task: Review of 4 best-in-class airline websites: Ryanair, Wizzair, Easyjet and TAP.

The Analysis will focus on four key aspects of the user experience in each of the selected companies' websites: Homepage; Search flights and Select flights.

Top key findings


- Saving time to the user, by memorizing previously searched destinations and recognizing the users location;

- The use of icons near navigation makes it easier to identify what we are looking for;

- Using clicks over scrolls makes the user experience smoother;

- Providing a solution to quickly skip add ons the user doesn't want, it improves the users experience.


- Excess of marketing can be overwelming, the user might tolerate it if the airline offers the cheapest deals;

- Forcing users to have an account or tricking them into buying extras it is not a good practice;

- Execive visual noise and information at the same time.

- It's possible to select any date even if the flight isn’t available for the selected date;

- It's not possible to edit the search, the user needs to do it from scratch;

- It's difficult to confront prices of outbound and inbound together.

Ryanair booking process: Scrolls: 5 Clicks: 31

WizzAir booking process: Scrolls: 4 Clicks: 30

EasyJet booking process: Scrolls: 0 Clicks: 30

TAP booking process: Scrolls: 1 Clicks: 21


Online Survey

Task: Gather feedback from a minimum of 15 relevant users to the study, that have used an airline website in the past 4 weeks. Create an online survey with maximum 10 questions.

Goal: The main purpose of this online survey is to learn more about the goals, behaviour and the context of the people that use airline websites and apps:

- Understand the context;

- Understand what they are trying to do;

- Whether anything is preventing them from doing it;

- What other features they would like to see.

Number of filled surveys:

41 people participated in this survey only 33 were considered.



What I have learned with the survey


80.5% used an airline website or app in the past 4 weeks;

- 63.6% prefers using a smartphone over the laptop/desktop;

- 77.8% of the users were at home when they used the airline website or app;

- 47.2% used their smartphone and 30.6% a desktop or laptop.

Users goals:

- 47.1% of users booked a flight; 

- 23.5% checked the prices;

- 17.6% checked the flight schedule;

Users behaviours:

Most of the users choose the website for this reason:

- 44.4% Lowest prices;

- 25% Most convenient dates and times;

- 16.7% available destinations.


To book their flight it took them approximately:

- 46.4% booked in 1 day;

- 25% took less than 1 week;

- 14.3% took about 1 week to 2 weeks;

- 14.3% took about 2 weeks to 1 month.

- 87.9% could complete their task that day.

Price is the most important aspect to make users decide one airline over the other. Most users took 1 day to 1 week to book their flight, users that book in less time, usually prefers to use smartphone over the desktop/laptop.

Users experience:

- The information, that is unclear and not easy to find, especially concerning flight change;

- The checkout and check-in process have too many steps and should be faster;

- There isn’t always transparency, users get confused about the actual price of things and there are too many suggestions of extra options to purchase (car, hotel, insurance). The customer care and the app also need improvement.

- Most users were satisfied (51.5%) or very satisfied (18.2%);

27.3% of users had an average experience, while 3% had a poor experience. This means there were some pain points in usability therefor, there is space for improvement.

What decisions did I make based on these results?

- Focused on designing a clear layout, with important information visible and easy to find;

- Focused on making easy to skip steps without having to scroll so that the booking experience could be fast and focused on the users' needs.

- I made sure the price was visible and well explained.




Task: Watch the recordings of two usability tests for desktop. Take detailed notes, focusing on the goals, behaviours, context, positive interactions, and pain points for each participant.

User 1

What decisions did I make based on these results?

User 1

I made sure the interface adapts to the users and follow their mental models, and that tasks are clear and don't require learning.

- I took special care in the information hierarky, use of colour, text size and images, so that the path it's clear and easy to follow.

- In order to avoid missed steps, the next step only apears after the first one has been filled in.

In order to adapt to different preferences I  kept both options, type in dates and select, when designing the calendar layout.

Some positive aspects that I emulated:

- The website recognizes location;

- Being able to see the flights that are previous and after the selected date;

- Easy to notice flight time and duration;

- Noticeable prices without needing to click on it;

- Inspiration on Eurowings passenger Layout;

- Use of pop-up messages only when relevant to the user;

- Clear display of selected itenerary.

User 2

What decisions did I make based on these results?

User 2

- The website should know its users, it should know their language and location.

In order to avoid confusion, I focused on designing a layout where the user first reads the departure time and only after the arrival one.

- Some users prefer to select a fare with all they need (it's faster), others prefer to select a basic fare and add just the luggage they need later. On Colibri's website I gave the option to do both, to give the users control and possibility to quickly skip extra steps.

- To avoid adding extras by mistake and feeling deceived, I made sure the final price and the extra price was always clear, using a sticky button that informed the user about the extra price in each step.

Some positive aspects that I emulated:

- Flight search with fast fill in of the Airports;

- Very clear departure and arrival times;

- Nicer and more colourful layout.

Usability test

Task: To compleate the research, I did a testing round in order to reveal possible usability problems when booking in competitor airline websites. I defined my search objectives, prepared a recruitment screener to find users to test and then, prepared a depth interview and usability test scripts to use when recording the users.


2 users were tested, all tests were conducted remotly using "Zoom".

For user N I will show you bellow the usability test, the user M didn't give consent to publish the video, so I will show you the notes on the interview.



User N - Usability test


download video 309mb

User S - Notes based on usability test

What decisions did I make based on both usability tests?

- Only allow to select dates on the calendar that are available;

- Make the information about prices more visible;

- Display coherent information;

- Clicking on the logo always brings back to the homepage;

- Make visible the “change search” affordance;

- Previous searches should be already populated, to save the user time;

- Error messages always need to say how to fix the problem.

- Allow different fares and luggages to be selected on the outbound and inbound flights.

- Prioritize clicking over scrolling that it's more time consuming; 

- On the same calendar the user can select both departure and return flight dates;

- Making affordances visible;

- Clearly display all essencial information about each fare;

Some positive aspects that I emulated:

- Feedback message informing how long until the search results are loaded;

- Being able to see the fares before and after the selected date;

- Clear trip summary that pops straight after selecting both dates and fares:;

- Visible buttons (ITA)

Step 2 -Analysis

Affinity diagram

Task: In order to structure the qualitative research data in a logical way, I used an affinity diagram to help me understand and better analyse all the previous search. I used Miro for this task.

image opens Miro