Competitive Benchmark

Why I used this methodology

To compare and evaluate the current airlines’ apps by using metrics relative to the performance and to understand the industry standards.

Process

The first step in the process is to analyse how competitors are solving the booking process. I focused on three European airlines, two of which were short haul carriers and the other was a long haul carrier. I also analysed AirBnB as a travel related competitor.

Findings

• Booking a flight is a highly structured process, where the user steps through a series of screens.
• Throughout these steps the user is required to complete specific tasks such as selecting dates and filling out passenger forms.

My hypothesis

Across the airline industry there is a well-defined process for booking flights, so breaking that convention could backfire.

Remote usability test

Why I used this methodology

To learn about the user context, goals, behaviours. Also, to upskill how to conduct interviews and draw insights from the users.

Process

The next logical step was to perform a usability test. To achieve this, I recruited a friend who travels by air on a regular basis and books their flight online. I conducted the test remotely.

Since I did not have an existing product but was researching for a new one, I decided to use two existing competitor apps instead. They were SAS and Norwegian apps. I prepared an in depth interview and test to be completed within one hour.

Tasks to complete:

Book a flight for a City break. Fly from Copenhagen to Paris from November 9th to 11th but flexible with departure dates. The trip is for two people. The flow stops before the seat selection.

What did I find?

• The SAS interface was less cluttered and that prevented the flow from being interrupted.

• In the Norwegian app test, it was more challenging for the user to book a flight. There was confusion on selecting the flight and the fares, which were not clear. The user was getting lost at different points in the flow.

My hypothesis

The user had never used the SAS or Norwegian app before. But they still knew how to navigate through them. This confirms that industry conventions are well known.

Journey map

Why I used this methodology

To crystallize where customers get stuck or frustrated on their path to purchase and beyond. It’s a visual representation that synthesizes data on personas and user behaviour.

Process

The purpose of the customer journey diagram was to continue shaping and structuring the data previously obtained, and to create a visualization. To achieve this, I put myself in the mind of the user and attributed their positive and negative points to each steps of the flow.

Tasks to complete:

From the customer journey diagram I now know the key user goals and more importantly the common pain points and mental models that prevent the user from having a smooth booking experience. They are:

• Unexpected transition between departure and return flights.
• Selecting different fare types
• Unclear information about whether the flight is direct or not.

My hypothesis

Going through this process allowed me to understand that a user’s experience depends on their goals. These goals are not always global and each step can have its own mini goals. The mini goals can either improve or dis-improve the user’s experience.

Sketches

Process

At this point I began to develop a solution to the problem. This involved creating sketches of the screens that would form part of my solution. To achieve the initial design I followed the methodology below:

1. Using the flow diagram I identified the key screens I needed to design.
2. Create a list of key features for each screen.
3. I focused on a single screen, where I put the user goal first.
   Then I took the feature list and sorted it by priority to achieve that goal.
4. With these criteria I made several variations that tried to solve this problem.
5. I reviewed each of these variations, and I selected the one that best satisfies the user goal. And making sure that I included all the key features.
6. Once I identified the best sketch for each screen. I brought the sketches together to validate that the solution satisfies the user’s end goal of booking a flight.

My hypothesis

By listing the key features and the user’s goal for each section, I was able to design UI elements that have purpose in mind.

Medium fidelity prototype

Process

With the sketches I was able to begin creating an interactive prototype of my solution.

This medium fidelity prototype focused on taking the sketches I created and making a realistic and intuitive prototype. Where you can see how the end to end booking process worked.

At this point I didn’t focus on the theming or branding of the app, since I wanted to focus on building recognizable UI elements with different states.

Design System

Why I used this methodology

After the design and I had developed a strong framework from the lo-fi prototype and in preparation for the high fidelity prototype I need to create the UI design system in order to maintain consistency through all the experience and improve the usability.

Process

After having a clear vision of what the website should look like I decided to create some foundations like colour palettes, typography and icons. With that having done I started to build the most important components for the website which are:

• Grid
• Buttons
• Input fields
• Flight Cards

Conclusion

Setting up components made it fast and easy for me to create a hi-fi prototype with a consistent product styling.

High fidelity prototype

Process

As an extra step I decided to create a more realistic prototype. My focus was to improve the look and feel of the prototype as well as include small animations.

Conclusion

From creating this prototype I was able to identify areas of improvement within the solution. As well as validate design decisions with the UI elements.

Handover document

Why have I used this methodology

This was the final project for my UX course. The focus here was to create a handover document that provided detailed information to the software engineers and other stakeholders on how to build this solution.

Process

This was the last project I had to do for the course. In it I included extra information, such as the states of the buttons and form. Also extra to help navigate within the figma file, as well as font and color systems. –For its development I had to detail all the information to hand over to the developers.

Conclusion

To develop this wireframe I had to go through the entire flow. It was useful to reflect on the work and see what could be further improved.