Airline Website

In my first UX Project I learned how to plan a Competitive Benchmark.Competitive benchmarking is an extremely useful research technique that allows you to identify what your competitors are doing right, and learn from what they are doing wrong.

For this project I chose to focus on four airlines, in particular on their desktop websites "Flight offers" section. The important thing is the optimal layout in this kind of pages, because the research for the offers and the input fields have to be easy to identify and fast to fill for every user. I saw that every offers page has always 4 types of section designed (I hope) and located in different ways, so I'm going to analyse them. For the worst page I'm going to redesign the UI and doing some improvements and corrections to the UI.

Objectives

‍Learn how best-in-class websites solve the problem we are trying to solve.Understand the conventions we should follow.Highlight the best practice that we should emulate.

‍Tasks

1. Identify four websites to benchmark against.
2. Define which aspect of their software you want to look at.
3. Review each website by taking screenshots with plenty of commentary to explain what's happening and why you think it's noteworthy.

Competitive Benchmark

‍Learn how best-in-class websites solve the problem we are trying to solve.Understand the conventions we should follow.Highlight the best practice that we should emulate.

‍Tasks

1. Identify four websites to benchmark against.
2. Define which aspect of their software you want to look at.
3. Review each website by taking screenshots with plenty of commentary to explain what's happening and why you think it's noteworthy.

Lufthansa

1. The title of the page is clear and concise.
2. The section where user can select the departure airport and the flight class is not placed in the best place. The style is minimal and it could be much bigger and visible.
3. The filter section occupies too much space and could be positioned directly under section 2.
4. City section has a nice style and allow the user to open an offer instantly

Iberia

1. "Flight Offers" could be more attractive as a Title.
2. The section where user can select the departure/arrival airport has no importance and the input fields could be larger and more visibile.
3. The exclaimer text could be smaller and placed at the end of the web page.
4. The flight list for September offers is minimal and too large.

Volotea

1. The title is good. I think is more attractive with the lowest price in this field.
2. The section where user can select the departure/arrival airport has a good layout and is near the period section, so it's easy to set the input information for the users.
3. The exclaimer text could be smaller and placed at the end of the web page.
4. The flight list for September offers is minimal and too large.

Ita Airways

1. The title is good. I think is more attractive with the lowest price in this field.
2. The section where user can select the departure/arrival airport has a good layout and is near the period section, so it's easy to set the input information for the users.
3. The exclaimer text could be smaller and placed at the end of the web page.
4. The flight list for September offers is minimal and too large.

Usability Test

“The deepest form of understanding another person is empathy…[which] involves a shift from…observing how you seem on the outside, to…imagining what it feels like to be you on the inside.”

Designing something requires that you completely understand what a person wants to get done.

Usability testing is the most powerful tool a UX researcher has. It allows to gain rich insights directly from the user. These insights inform our design decisions, helping us to make better products.

‍

Note Taking

User Profile A

User Details

• Gender:  Female
• Occupation: Housewife
• Internet browsing: iPad, iPhone
• App: Sports App, Social media, Games

Selection Criteria

• Price
• Mid-Long Destination
• Flight Time
• Book online
• No SkyScanner using

‍

User A - Task 1

Homepage

• (11:40) User go straight in airport dropdown CTA to input the departure airport in the landing page.
• (11:54) User click ‘confirm’ CTA without any problems.

Search

• (12:20) User choose the graphic calendar CTA than write the date in the input field.
• The user choose the date on calendar with pointer because is afraid to miss the right days if has to write down manually.

Fares

• (16:11) User would like to see more flight times available.
• (18:30) The different prices for the kind of fare is well communicated.
• (18:44) After closing the departures fares user can’t find the ‘proceed forward’ CTA.
• (19:03) User click on the date horizontal picker to go forward.
• (19:40) User open multiple times the fares dropdown and flight details dropdown.
• (19:54) User feels confused and lost because can’t go forward from the fares page.
• (21:00) User think that there should be something to proceed somewhere in the page.
• (22:00) User knows what ‘price lock’ CTA means and find it useful.
• (22:30) The price lock is well communicated in the bottom page.

Overall

• It was okay
• Problem with the Search button in offers page

The user would like to have more time option for the flight and more icons to understand better every button. The bigger cons comes from the button to proceed in the flight option. But the overall experience is quite good for the user.

Liked

• The user find useful the option to see the price for the previous and subsequent days.
• The opportunity to see what’s the Departure/Arrive airport after selected in the homepage. It gives the check to the user if don’t remember.

Disliked

• Didn’t liked the search flight button because didn’t hit the user.
• Wasn’t not so many information in the price communication

User A - Task 2

• User go in the wrong field to book a flight.
• User didn’t see the date input and the big calendar pop-up.
• User would be willing to pay more for a continental flight and not for a short one.
• User didn’t understand If the travel flight package refers to the departure or return.
• The user found helpful the notice inherent the change of airport in the return flight.
• The user didn’t easily find the button to proceed forward.

Overall

The experience could be much easier for the user. The date input could be better understandable. The user find a bit difficult to navigate in booking flight pages but some advice are very useful to prevent the choose of some option that are not well communicated. The user is surprised to see big warnings for the different return ariport: she thinks that could be communicated before going on that page. She likes the form of the date input.

‍

User Profile B

User Details

• Gender:  Female
• Occupation: Housewife
• Internet browsing: iPad, iPhone
• App: Sports App, Social media, Games

Selection Criteria

• Price
• Mid-Long Destination
• Flight Time
• Book online
• No SkyScanner using

‍

User B - Task 1

• The user prefer the big graphic calendar input than the simple text input for the date picker box
• The user is confused by the position of the departure time
• The user don’t like the color using in the all page
• The user find unuseful the price lock card

Overall

‍The flight is easy to book, but she think that the page where user need to select the country could not be so clear to understand. The user think that there are too much information about flight time and there are not so many option about baggage option. The user is surprised to see the big time layout for flight time in the middle of the screen. The user don’t find useful the price lock communication. The user appreciate the clean layout of the website. The user is surprised about 4Pound block flight option.

‍

User B - Task 2

• User already know the flight website
• User find useful the bigger date picker in the calendar and big buttons to implement the number of people
• The communication about the departure and arrival time is clear for the user
• User can’t understand why the BizClass isn’t available
• User find the flex option useful
• User can’t understand the 4 pounds tax to block the price

‍

Overall

For the user the overall experience on the website was better than Airlingus. That’s for the better using of colors and layout to make the website easier to navigate. The user find very useful the list of the most important airport and the big calendar for the date selection in the first page.

In general, all users preferred a graphic calendar instead of the manual dates input field. All users focus in the upper part of the page and often do not correctly display buttons that were localized at the bottom of the page. I think this problem could be solved by keeping fixed the height of the page (maybe using some multisteps in the same field) , and then the buttons could be clearly visible in the bottom position. In AerLingus Website, where there was less icons using to represent functionality, the user was generally slower in navigation. Some features were not well communicated and this was confusing the user.

‍

Affinity Diagram

After carrying out a Usability Test, a Competitive Benchmark, and having taken notes from two usability tests the time has come: join all this raw informations and transform them into something more ordered. To do this I started an Affinity Diagram. I placed all the relevant information on some post it and I started thinking about how to group them in similar groups.

After collecting the information on paper I decided to move the work on Figma, in this way I could have better managed the amount of sticker and organize them easily without filling a whole wall. Due to the impossibility of working with a collaborator I carried out the Affinity Diagram by myself.

1. Brainstorming

The highest number of information has been obtained from the Taking Note process. Having analyzed the process for booking air flights, I found out some patterns that repeat themselves on each platform, soI decided to divide the elements into the following groups:

• Goals
• Criteria
• Home Page
• Fares Page
• Reactions
• Behaviour

2. Grouping

After creating the groups and ordering each post it I decided to mark them with a sticker to indicate the type of information:

• Positive
• Negative

3. Final Layout

Customer Journey Map

‍

User Flow

‍

Interaction Design

‍

Prototype

‍

Annotations

‍

‍