Fly UX

Back

Overview

Fly UX are a new airline start up and are looking to streamline their booking proces to gain an advantage over the larger airlines already in the market. Fly UX are focusing on the desktop website initially, but want a solution that is mobile responsive.

Goals

  • Gain a competitive advantage in the market, by streamling the booking process.
  • To build a medium fidelity protoype for the desktop website and produce the accompanying wireframe documentation.

My Role

User Experience Researcher & Designer

Tools Used

Figma, Screenflow, Miro

Date

July 2020

1. Research

Usability Tests

I started this project by reviewing two usability tests on two exisiting airlines Aer Lingus and Eurowings.

Challanging my note taking abilities, to collect the value insights I needed. I decided I would highlight information which was important with a colour code and key system.

This method allowed me to produce notes that are:

  • Clear and concise
  • Quick to produce in a small timeframe
  • Easy for people who were not present in the test to read and understand
Read my notes here

I also carried out my own usability tests, conducting comparatative tests on the websites of Jet2 and British Airways.

This gave the opportunity to prepare my own test scripts, following the same structure, a brief introduction, a short interview of the participant and the usability tests tasks.

Takeaways

  • I was able to gather really valuable insights not just from interviewing but also from observing the user.
  • I used ScreenFlow to capture the users camera and screen interaction, this worked great on a Macbook.
  • I learnt how even though you have a test script prepared, questions may need to be adapted due to the flow of the interview.

Competitive Benchmarking

In addition to the usability tests I was able to review competitive benchmark reviews that had been completed. From this I was able to gather really value insights of the current competitors in the market.

Takeaways

  • Smart defaults. This is a great feature to implement, used correctly - this can speed up the booking process by reducing the cognative load.
  • Validation. Helps the user complete what is required with minimal fuss.
  • Date Pickers. This is a key feature to any booking process and if implemented incorrectly, this can really hinder the User Experience

2. Analysis

Affinity Diagram

To make sense of the insights gathered during the research phase of this project, I worked collaboratively to produce an Affinity Diagram. Focusing on the primary and secondary goals, any pain points and mental models users may have.

Doing this highlighted very clearly common themes from the research phase allowing us to structure qualitative research.

See the completed diagram here

Customer Journey Map

Along side the Affinity Diagram I also created a Customer Journey Map this . I highlighted the users Goals, Behaviours and Pain Points, and summarised their overall experience at each stage of the booking process.

Takeaways

  • To many optional extras really hinder the experience for the user, this is usually down to the price of the extras and the confusing names/descriptions.
  • Users don't like the distraction, they want to be able to focus on the task at hand with minimal disruption.
  • Validation is a key to communicate errors to the user.
See the Customer Journey Map here

3. Design

User Flow Diagram

With the research and analysis stages complete it was time to being designing. I started off the design stage by creating a User Flow Diagram.

The purpose of this was come up with a solution that addressed the issues raised during the research stage.

I went though multiple iterations of this by hand before completing my final diagram. Detailing each screen state and each interaction.

Takeaway

  • Although time consuming I found this to be one of the most value tasks. I was able to really focus on each interaction.
See the User Flow Diagram here

Interaction Design

Building on the work of the User Flow Diagram, I then started to sketch out each screen state. Again I went through multiple iterations of this, to ensure I was creating a solution that fit the use case.

I also produced a low fidelity prototype to test out my solution before moving on to the medium fidelity prototype.

Takeaways

  • This allowed me to really visualise the screens states for booking process
  • Once happy with my sketches I chose to test by producing a prototype.

Prototyping

I then went on to produce a medium fidelity prototype of the booking process. This stage was great to test the core functionality and interactions.

My prototype can be seen below.

Takeaways

  • This allowed me to go in to more detail and focus on the micro interactions
  • It allowed me to validate my sketches, and use the prototying feature within Figma.

Wireframes

For the last part of the project, I was tasked to produce detailed wireframes of the medium fidelity prototype.

This would be used to pass on to the developer who would be building the website. The aim of this was to define the behaviours and functionality, of each of the main elements within the booking process.

See the wireframes here

Key Takeaways

What I learnt

  • This project gave me invaluble knowledge across the whole User Experience lifecycle and has given me the confidence to carry out the different tasks.
  • I learnt how important reseach is and how that really defines the success of the finished product.

What I would do differently

  • I would love to work on a project with a larger team, although I did work with another team member on certain tasks, I think it would be really great to work more collaboratively.
  • I would of liked to carry out some futher testing of my prototypes. I think this would have produced some really valuable insights on the solution I created.