Mastercard - Airport Pass App, Middle East

In 2019, DragonPass was bidding for MasterCard’s Middle East travel app project and won it. This app aims to provide a global airport lounge service and airport dining discount for MasterCard Middle East cardholders.

My Role

I was responsible for the bidding design and won the project with the team. Then I worked closely with the product manager (UK & China) to confirm a series of functions. Finally, I was responsible for UX and UI work and assisted developers (China) in app development.

Goals

Let the Mastercard Middle East cardholders register a DragonPass membership via the app and enjoy the services of the global airport lounges and the dining discount.

Challenge

Due to the company's limited resources, I am the only UX & UI designer responsible for all work processes. I have to complete the designated functions of the project within a tight deadline, so I have to allocate time well to ensure that I can complete it on time to proceed to development works and go online.

User Analysis

After I complete this project, MasterCard will engage all Middle Eastern banks to onboard this app. Only the global airport lounges and limousines will be available in the first stage. In the final phase, there will be other airport services, such as the limousine.

Target Audience:
All Middle East Mastercard cardholders
Age：Above 18 years old
Feature：Travelers who go abroad once a year
Entitlement：Cardholders can enjoy different levels of benefits based on the various cards types, for example:

• World Elite Mastercard cardholders: Eligible for unlimited airport lounge access and unlimited dining discount, benefits vary on each bank
• World Mastercard cardholders: Eligible for 1-10 times Free airport lounge access and unlimited dining discount, benefits vary on each bank

Research

I have researched a few of the Middle East famous apps (such as Careem, Webteb, Souq.com) to figure out a similar user journey style that belongs to the Middle East countries to ensure the simplicity and effectiveness of the app. Furthermore, it is to ensure that most of the users in the Middle East can adapt to the app quickly.

User Journey Map

Information Architecture

Design Process

Due to the limited time, I skipped the low-fidelity wireframe and directly used the paper wireframe as a reference to design the user interfaces. After I completed it, I sent it to stakeholders for feedback and changes. I also conducted 3 user tests, collected feedback, and made changes.

App Icon Design

Designed multiple app icons and sent them to stakeholders and clients for voting. Finally, they selected this one.

Opening Page and Intro Page

Sign Up, Verify Identity

After the user enters the MasterCard card, the backend will link to MasterCard’s API to verify the card. After I complete the verification, the user’s entitlement and benefits will be allocated according to the backend configuration, allowing the user to enter their personal information and password to complete the registration.

Home Page

Users can search for airports and display related airport services according to the airport. Also, it will recommend airports based on mobile phone location.

Airport Lounge

Users can view the airport lounges details and use the DragonPass membership card to access the lounge.

Airport Dining Discount

Users can view the airport dining details and use the DragonPass membership card to redeem the dining discount at the dining outlets.

Membership and Entitlement

Users can view their membership cards and benefits. Users also can switch cards of each bank under their account to use the entitlement and benefits of each bank. Besides, users can add a new bank card and get new entitlements and benefits.

User Information

Users can view their card and payment history, change passwords, and view other information.

Animated Loading Design

There are 3 kinds of loading in different scenarios:

• Loading key content
• The whole page is loading and cannot go back to the previous page
• The content is loading and can go back to the previous page

Challenge

Due to the 2020 pandemic, they postponed the app's launch date.

What I Learned

• Research can bring in new insights and perspectives.
• I effectively allocated time to complete the project on time and with high quality.
• There are already good examples of some processes, and users are already getting used to them. It is good to leverage it directly to save time.