Project Overview

The Priority Pass (PP) program is used by millions of people around the world, giving them access to over 1200+ airport lounges. The website has a high volume of traffic and attracts thousands of unique users each month.

As part of the continuous enhancement of the website there was a need to completely overhaul the membership journey form. The form was designed several years ago and did not align with many of the current best UI practises.

The Process

I spent time with several people in the business to understand the end-to-end journey for a user who comes onto the website, finds the information they're looking for and goes through the membership form.

Using data, analytics and heat maps to understand what pages users spent the most amount of time on, how long it took them to land on the membership join form and where the drop off was, I was able to get a view on the traffic funnel. I made several enhancements across the site to drive traffic to the membership form and also redesigned its UI to encourage users to complete the journey via a better experience and minimise the drop off rate.

Solution and Designs

The membership form required a complete overhaul of the UI and UX. I introduced several new design elements and UI components:

  • Split the form into segments and introduce a step tracker for users to clearly understand their progress. This was optimised to work responsively.
  • Grouped related information together and removed unnecessary fields to further break down the information and speed up the time it took users to complete the journey.
  • Designed a clearer grid system for better layout of elements as the previous design did not use one. This enabled me to keep all fields in 2/3 (left) of the screen and 1/3 (right) to be used for additional information where required.
  • Introduced a basket view into the form to help users remember their membership selection.
  • Designed new supporting graphics to be used across the form. I put together a mood board of reference images and then created the graphics using Photoshop.
  • Crafted new form elements, such as input fields (with specific padding), inline error messaging, clearer CTAs including Primary, secondary, tertiary and inline links and responsive tool tips.
  • All completed designs were created in Sketch and handed over to developers via Zeplin.
  • Worked closely with our external development agency to ensure designs were followed correctly and provided QA support during the process.