Background
Priority Pass, a reference in delivering premium travel experiences, with over 1,000+ lounges in their network, and millions of members, embarked on a Consolidation (retention) and strategic (growth) Project to elevate its standing in the dynamic travel industry. The project focused on simplifying code and design systems of three brands into a one single code Priority Pass-based, a single source of truth. The goal was to enhance efficiency, reduce complexities, and strengthen the brand's identity. So it’s a white label exercise.
The Growth aspect involved expanding offerings, integrating Travel Services for curated experiences and exclusive partnerships. The Ready 2 Order service addressed on-the-go needs, enabling members to customise and order services seamlessly.
Awards
🏆 Gold Winner of Priority Pass App redesign at 'London Design Awards' 2020 from Collinsongroup.
The Challenge
The challenge lied in executing a seamless merger of coding and design components without compromising the reliability and functionality of the existing apps.Simultaneously, the strategic plan to introduce Travel Services and the Ready 2 Order service added another layer to the challenge. Ensuring that the consolidated framework is flexible and scalable enough to accommodate these new offerings without disruptions or performance issues requires a forward-thinking and adaptive approach, preparing the framework for the anticipated growth through the introduction of Travel Services and Ready 2 Order functionality.
Role
Lead Product Designer
I led the UX strategy and the MVP (consolidation) of the Priority Pass app (iOS and Android). In addition, I Ied the user experience and user interface of different travel services, 3rd parties integration. I mentored 1 Junior product designer.
• Product Designer
• User Experience (UX) Designer
• Interaction (IxD) Designer
• User Interface (UI) Designer
• Visual Designer
Deliverables
• UX strategy
• Information Architecture
• User Flow
• Analysis current Design Systems
• Audit current Design Systems
• Creation Design System and colour variables/Tokens - Documentation
• Wireframes
• Usability Test
• UI app
• Prototype
• A/B Test
• Ready-to-Order Experience
• Travel Services Experience
Tools
Sketch, Miro, Figjam AI, Hotjar, Optimizely, Userlytics, Jira.
My Impact
• Registration Conversion Rate (CVR):
Successfully implemented an A/B test, resulting in a noteworthy +3.0% boost in the Registration conversion rate. This indicates enhanced efficacy in both attracting and converting users during the sign-up process.
• Login Sessions:
Successfully increased login sessions by +30% through the implementation of an A/B test, demonstrating enhanced user engagement and interaction.
• Explore Screen Traffic:
Recorded a remarkable traffic surge of +150% in the explore screen, attributed to the introduction of new travel services such as Covid-19 and car trawler. This signifies heightened user interest and exploration in the newly added travel offerings.
• Ready 2 Order feature:
Significant achievement with over 250,000 orders processed using the Ready 2 Order, a digital food and drink ordering method.
Final UI
The focus is on creating a modern and cohesive UI design that not only looks and feels up-to-date but also maximises efficiency by using reusable components across the apps (3 brands). At the same time, it's crucial to respect and maintain the distinct branding of each of the three associated brands.
#UX Strategy
I worked closely with the Head of Experience, Product Managers, Product Owner, and Product and Proposition Director to map out and emphasise the high level Product roadmap for the upcoming year. We outlined both short and long-term initiatives as part of the transformation and Growth. To enhance our user experience (UX) strategy, the Product Manager, the Head of Experience, and I collaborated to determine how the existing product roadmap could guide and contribute to shaping the UX strategy for the Consolidation project and beyond. Together, we worked on creating a detailed UX roadmap and plan tracker to systematically map out and monitor our UX initiatives in alignment with the overall product vision.
I led the highlighted sections of the Product Roadmap, focusing on the App Consolidation MVP and travel services.
Although we had valuable data and insights from previous years regarding user goals, the project's consolidation nature prompted us to align these goals with the expected outcomes of integrating a new design system and visual language.
#Empathise
I started to break down and analyse the information architecture and user flow of the current app.
This is an example of how we could speed up the process to create the User flow chart of Priority Pass app with GenAI. It took me 3 min to create the user flow and review it.
So, using Figjam AI, I prompted, “ Create a user flow chat of the Priority Pass app”
Analysis: We inherited six projects, 3 Brands x 2 platforms. These 6 projects were linked to 3 Compass Design Systems (CDS).This led to time-consuming challenges for both design and tech teams. The process involved designing for six projects, creating components for three brands, and consistently uploading them to Zeplin with the same structure each time. This scenario was not viable from business, engineering, and design perspectives.
Audit: In order to streamline the process, I conducted a comprehensive audit of components, across all three distinct brands. The strategy involved consolidating these elements into a single set of components for all three brands.
We wanted TEDS (Travel Experience Design System) to be functional for us, so We implemented atomic design principles. This approach allows for modularity, scalability, and consistency in the development of user interfaces. In this way designers and developers we could efficiently manage and update individual components, promoting a systematic and cohesive approach to the overall design.
We used the Google Material Design System as a reference for our component structure. However, we tailored the structure to ensure it was highly responsive and accessible, prioritising optimal speed of use.
A simplified depiction of the audit and future structural approach involved consolidating all components repeat it x3, one for each brand, into a single component per brand. The strategy included swapping colour variables and text styles for a more streamlined approach.
After completing the AUDIT and gaining a thorough understanding of the architecture and structure for the new TEDS, I moved on to conduct an analysis of our competitors.
Competitor analysis: I carried out competitor research on our main competitors. Focused on the inventory sections. While we didn't alter the functionality, I aimed to investigate how competitors position and organise key components, assess the user-friendliness of their experiences, and examine the information architecture of their main screens.
Dragon Pass app
Lounge Buddy app.
Airbnb
#Define
User: Priority Pass, Lounge Key and MasterCard Airport Experiences consumers, Wholesale and Retail.
Needs: Consumers to go through the experience with no disruption due to a single code base, and implementation of new components across the 3 brands.
Insights: Maintaining three distinct codes for three different brands (PP, LK, and MCAE) was deemed unsustainable from a business, design, and engineering perspective. Consequently, the decision was made to transition to a unified codebase (PP).
#Ideate
Since we didn’t alter the user flow concerning the old version of the app, I approached this in the following manner: Let's start sketching modular components for scalability, flexibility, ease of maintenance, and reusability, and let's start gathering feedback. We should consider to enable “Nearby Airports” API for the 3 brands. I will focus mainly on the Explore screen, Cards and DMC, since the rest are standard components.
#Iteration 1
-
• We need to consider "Favourites". Previously located in the "More" screen, we should now assess user response to having favourites integrated into the Explore screen.
• A card is required for when the user taps on "See What’s Nearby" to view nearby airports. Reevaluate the Explore screen, incorporating both Favourites and "See What's Nearby".
• Let's explore different card sizes. We'll require a list view, where cards are typically smaller.
• While module entitlements appear promising, we will retain the old screen for the Account section. We'll revisit this screen in the future for potential improvements.
• We must show the Logo brand in the DMC.
#Iteration 2
-
• "The business logic": Display only nearby Airports and Favourites in the Login state.
• Each individual Card size will require a Carousel with Caption variation and text.
• Implementing Grouping Card is an excellent idea; we'll also need a variation with caption and text.
• Marketing feedback, the Brand Logo should be positioned on both sides of the card.
• Remember to add Apple/Google wallet CTA in the DMC.
I started by outlining, and defining the wireframes-flow, before proceeding to create the components in the design system. This was done to enable stakeholders to provide feedback. Once again, we didn’t include any additional functionality compared to the initial version. The flow is the same.
Please note: The Pre-Book flow is web-based and therefore not included in the scope for redesign. It will remain unchanged. Not all the Lounges have a Pre-Book feature available.
-
• The onboarding screens for first-time user login will not undergo redesign, as it falls outside the scope of the MVP.
• In addition to the Digital Membership Card, we also have the Offer Card.
• The "Rate my visit" flow is considered out of scope for the current phase.
• Designing a new layout for the Account screen is also out of scope at this time.
• Pagination on Pictures Inventory details.
Card taxonomy
Before I started creating the components, I conducted some research on the visual language we intended to use, the styling, and, most importantly, how our users perceive our brand.
I created a mood board to capture and communicate the overall aesthetic/feeling that a project or design should evoke. That helped to understand the visual direction and set the tone.
Here there is a sample of the visual language direction...
Naming conventions: To create a scalable, maintainable, and user-friendly design system, it's essential to have a systematic naming convention for components. We worked together with engineers to match this with storybook components naming. So We followed this principles.
Colour variables/Tokens: For consistency I decided to use colour variables in the layer styles, in this way we can ensure that our design maintains a consistent colour scheme. This approach ensures that any updates to the hex value of a colour variable are automatically reflected in the layer style as well. To maintain consistency in the code, I exported the structure as a .json file for the engineers.
Components structure
Text Styles structure
Layer styles
When I started strategically planning to streamline and simplify the existing complexity and starting the creation of the new Design System, I ensured that we addressed key considerations. This involved prioritising consistency, efficiency, and scalability in both design and development efforts. Here are the key considerations to take into account before embarking on the creation of a Design System.
After these considerations, I moved forward with crafting the Design System with another product designer. It's important to note that these considerations were deemed essential for efficient process and rapid scalability. However, in a fast-paced environment where numerous dependencies are beyond our control, flexibility is key. We must adapt to the dynamic nature of the team.
I took the approach of having a consistent component styling for Android and iOS, for the sake of cross-platform uniformity and operational efficiency.
I approached the system with a holistic perspective, factoring in future developments such as entitlements and dual language. I also approached the Design System with an eye toward future expansions and integrations within the website.
Design principles: I followed the design principles to create effective, aesthetically pleasing, and user-centric designs: balance, contrast, alignment, repetition...
Accessibility principles: I followed the accessibility principles...Perceivable, Operable, Understandable, Robust...that said, I want to emphasise some points.
Collinson delayed prioritising accessibility efforts until a planned 2022 Uservision audit.
• We deactivated Dynamic Type due to issues with the "Mark for narrow" font for the Mastercard Airport Travel Experiences brand, choosing not to alter the branding font despite its accessibility implications.
• Some Brand colours lacked sufficient contrast against white background, a change outside our project's scope but slated for review during the audit. It will require brands changes.
• Screen reader improvements are needed, which will be addressed in the 2022 audit. Currently, we don't fully meet WCAG 2.1 AA standards but we aim to rectify this in the audit.
So, how does it work TEDS? Here's an example demonstrating how to transition a screen from the Priority Pass brand to the Lounge Key brand.
Following the implementation of all components of our newly developed TEDS (Travel Experience Design System) We embarked on a crucial phase of our improvement process: conducting a comprehensive usability test in collaboration with Userlytics.
Partnering with Userlytics allowed us to execute a thorough examination of the app's user experience, ensuring that our design changes aligned seamlessly with user needs and preferences. We recruited a diverse pool of participants representative of our target audience. They were asked to perform specific Tasks.
Participants seamlessly navigated the Priority Pass app, accomplishing tasks effortlessly and offering highly positive feedback. The company prioritised retention as its core objective.
Regarding Issues and recommendations, the majority have a Severity rating of B (B = Major usability problem: important to fix, so should be given high priority). However, a new account screen was already in development to address these issues. Consequently, We aimed to proceed forward, shifting our focus towards optimising travel services to enhance our growth.
One of our business objectives was to increase registration CVR and boost login session. To address this, I suggested an A/B test. This test involved adding a favourite icon to all inventory items in the logout state. Consequently, favouriting any item would prompt the login screen.
The results of this A/B test were very successful, leading to an increase in the conversion rate of registrations and login sessions.
Travel Services - Growth
1. Ready 2 Order: Ready 2 Order launched in collaboration with Collinson's strategic partner Grab, the airport e-commerce platform, and the largest marketplace for contactless orders and payments at airport restaurants.
During the initial phase of the pilot program, the focus was on promoting the service via the app. Users simply scan the QR code located on the tables of the lounges to access their exclusive, carefully crafted menus. Upon scanning, the user is presented with the menu options, makes their selection, and the order is promptly delivered to their table. Currently, this convenient service is exclusively offered in specific lounges.
In this process of designing the top-of-the-funnel journey, I explored the most effective way to present this service.
I collaborated with the marketing team to refine the messaging for this service, and the photos, aiming to strengthen the value proposition and clarify its usage instructions
Our primary objective was to raise awareness within the app. Thus, our approach followed this logic.
1.1 End Points affected - Business Logic
We had the onboarding screens, which still retained old tokens and styles as they weren't initially included in the MVP scope. However, to highlight the new R20 feature, I developed a tokenised template within the Design System for all onboarding screens. The logic behind it was:
1.1.1 Upon the user's initial login, display the onboarding screens.
1.1.2 For returned users, show R2O onboarding screen.
1.2 Analysis
The initial action was to showcase the product within the app. Each individual card representing an inventory item included a variation with a corresponding label (developed during the creation of the Design System). Another components had also a variation to integrate this label across the different end-points.
1.3 Prototype
As a business, we believed the placement of this feature is quite straightforward. Therefore, there's no need to conduct any testing here. Let's simply track the data and observe the number of orders from various lounges over the next six months.
2. Covid -19: Collinson opened the UK’s first pre-departure rapid LAMP COVID-19 testing facilities at Heathrow Airport, with more swiftly following. So we wanted to allow the user to go through the experience in-app since 75% of our users use the app against 25% using the website.
Given our partnership with various travel service providers such as "Airport Transfer," "Car Rental," and "Duty-Free Shopping," I took a holistic approach to incorporating not just COVID-19 testing but also these Travel services into the app's framework.
Given that all the components are already designed, implemented and tested, the solution was fairly straightforward.
2.1 End Points - Business logic
I reused the template for the onboarding screens
2.1.1 Upon the user's initial login, display the onboarding screens.
2.1.2 For returned users (second time), show the travel services onboarding screens.
2.2 Prototype
Lessons Learned
In the course of our app white label project, several valuable lessons were gleaned, contributing to a more comprehensive understanding of the process and enhancing our approach for future endeavours.
• Establishing clear communication channels and ensuring all stakeholders are aligned from the project's initiation is paramount. Regular updates and transparent communication help mitigate misunderstandings and align expectations.
• Building flexibility into project timelines is crucial. Unforeseen challenges and delays are inevitable, and having a contingency plan ensures smoother project management.
• Thorough and continuous documentation is an ongoing process. Keeping detailed records throughout the project lifecycle facilitates seamless knowledge transfer, aiding future maintenance and updates.