Flightright: Mobile-First Claim Check

Details

Type: Progressive Web Application (PWA)
Company: Flightright GmbH
Project Date: Jan 2019 – March 2020
Role: I was the Lead UI/UX Designer throughout the project cycle from planning and requirements gathering to wireframing, user testing, and implementation. Along with my Jr. Designer we collaborated actively with the Development, Legal, and Operations teams to brainstorm ideas and problem-solve.

Before Image After Image

Summary

Flightright is a legal tech company dedicated to giving their customers access to justice in the travel space. Flightright’s main product, the Claim Check, allows users to submit a claim for EU261 compensation when their flights are delayed or cancelled by the airline. If their flight disruption is eligible for compensation, Flightright will advocate on their behalf against the airline—even if it goes to court—and make sure that they get the money they are due!

The goals for this project were to improve the user experience of our mobile claim check, bring the visual design into alignment with Flightright’s new branding, and increase our mobile conversion rate to 3%.


The Challenge

Over 62% of users were visiting Flightright’s Claim Check on mobile devices, but were only carrying forward at a rate of 1.86%. Considering the conversion rate for Desktop users is 6%, this is a significant drop and we set out to figure out exactly why this was occurring. Through surveys, user interviews, and heat-mapping services like Hotjar we discovered that there were not only technical and usability issues using the Claim Check on mobile devices (such as buttons being cut off) but also a lot of user confusion around the information we were asking for, many things just weren’t clear to our customers.

Our goal for the project was to improve the user experience by simplifying the flow, making it more intuitive to understand, speeding up loading times, reducing the amount of taps needed to proceed, and also updating the design language to match our recent branding refresh. Through achieving a better user experience, we aimed to increase our conversion rate for mobile users to 3%.


Design Process

Together with my Jr. UI/UX Designer and one of our Project Managers, we drew out and workshopped the design flow across the different teams at Flightright, including Legal and Operations to make sure we had all the steps and edge cases that needed to be accounted for.

a thumbnail of a wireframe showing the entire customer journey

From this user journey we developed a simplified flow for the MVP of the project which would only cover delayed flights. The cancelled flights flow, and other miscellaneous disruptions, were slated for future updates. Focusing on just one disruption type really allowed us to dig deep and understand the requirements needed from the Operations Team as well as the nuances of our user’s pain points through user testing.

wireframe that was turned into a clickable prototype

User Testing

We conducted several user tests in 4 distinct phases over the course of the project:

  • Phase 1: Review the “Spanish User Test” with the old claim check to see where all the existing pain points are. The Spanish User Test was conducted with the live version of our original Claim Check with the Spanish translations.
  • Phase 2: This was our “Wireframe User Test” where we tested the first iteration of our flow (see above image) with staff before adding any styling to make sure we were headed in the right direction.
  • Phase 3: Dubbed “Design User Test 1”, we tested our flow with the first iteration of visual styling with staff.
  • Phase 4: “Design User Test 2”, we tested our flow with the completed new design with actual users. Here we discovered some new problem areas that we didn’t find when testing with staff and made further iterations.

Phases 1–3 gave us the base for which to work off of, but it wasn’t until we got our design in front of actual users in Phase 4 that we really understood the aspects of our flow that were not clear. The most confusion occurred in the “flight picker” steps, so we sought to make adding your flight itinerary in the Claim Check much more intuitive. Our motto here was “don’t make users think!” We clarified our language and actually added some additional pages with single questions to direct the user more efficiently. So that even though the flow looked more complicated when looking at it in a flowchart, it was much more straight-forward and easier to understand for our customers. You can see the adjustments we made below:

thumbnail showing the adjustments made to the user flow after testing it with Flightright customers

The final design was then handed off to developers and I assisted them in the front-end implementation of the project, flying to the Ukraine to work directly with Flightright’s development team there for a week.


Solution

thumbnail of the final design in a simplified flow

Prototype: View the Clickable Prototype on Axshare (Note: This is in German)

Click on the images to view at full-size.


Results

The project development was mostly completed, including an entirely new tech stack using Vue.js, in early March of 2020 but unfortunately due the the COVID-19 Pandemic it was put on hold and never pushed live. The company as a whole pivoted to create a new product to help customers get their cancelled flight tickets refunded from the airlines during the crisis. The project is currently still on hold.