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
The feature team consisted of a UI/UX designer (me), Product owner, Business analyst and Project manager.

I worked collaboratively with the team to understand business requirements and what the user journey could potentially look like. After brainstorming sessions, I used the gathered information to map out the full end-to-end journey and created wire frames to document the process. The wire frames detailed the 'happy path' journey but also several other user case journeys where branches and errors might appear.

Other areas of considerations included designing several new components and UI patterns to fulfill the requirements since, being a new feature, many of these did not exist.

Solutions 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.

New style guide development

New step tracker design across desktop and mobile

Responsive tool tip design

New error UI and grid system

Design of new graphical elements

Back to Top