Mastercard - Airport Limousine & Meet & Greet Website, APAC

In 2019, DragonPass was bidding for MasterCard's airport limousine & Meet & Greet website projects for the Asia-Pacific region and won it. This website provides the airport limousine & meet & greet booking service for MasterCard APAC cardholders.

My Role

I was responsible for the bidding design and won the project with the team. After I won the bid, I worked closely with the product manager (China) to confirm a series of functions. I was responsible for UX and UI work. At the same time, I was also assisting developers (China) in web development work in terms of UI.

Goals

Let the Mastercard APAC cardholders register a DragonPass membership via the website to obtain entitlements & benefits and book airport limousines and meet & greet services via the website.

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 the project, MasterCard will let all Asia Pacific banks onboard this website for their cardholders. In the first phase, there will be English and Chinese versions for banks based in Singapore and China. It will have more languages along the way. In the final stage, various languages will cater to Asia-Pacific countries.

Target Audience:
All Asia Pacific 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 limousine services, benefits vary on each bank
• World Mastercard cardholders: Eligible for 1-10 times Free airport limousine services, benefits vary on each bank

Research

I have researched multiple websites to ensure the booking process's simplicity and effectiveness and that users can get used to the website. I researched Blacklane, Trip.com, Agoda.com, TBR, AirAsia, etc.

User Journey Map

Information Architecture

Sketch the Paper Wireframe

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 the entire design, I sent it to stakeholders for feedback and made the changes. Then I conducted 3 user tests, collected feedback, and made the changes.

Use Mastercard Design Guidelines

Home Page

I came up with several versions of the home page design for stakeholders. After the discussion, we decide to use a simple image that contains travelers and airplanes.

Icon Design

I designed the icons for the airport limousine and meet & greet service.

Register, Verify identity

After the user enters the MasterCard card, the background will link to MasterCard’s API to verify the card. After the user completes the verification, their entitlements and vouchers will be displayed according to the back-end settings, allowing the user to enter their personal information and password to complete the registration.

User Dashboard

After successful registration, the user will get a DragonPass membership card. All membership, rights, and benefits management are in the DragonPass back-end system. Users can view their entitlements, vouchers, card type, order history, edit personal information, etc. They also can see the logo of the card issuer at the header.

Benefit Display

Users can view their entitlement and vouchers.

Switch Card Type

Users can switch cards from different banks on their own and use the entitlement and benefits of other banks.

Update Personal Details

Users can update their passwords and contact numbers on their own.

Book Limousine

The user can select an airport and address to make a reservation. The whole process is divided into 4 steps:
1. Enter airport, address, and other details
2. According to the region, display suitable car models and prices
3. Fill in passenger’s details
4. Review order, payment, use entitlement & voucher
Upon completion, the user will receive a confirmation email.

Book Meet & Greet

The user can select an airport and address to make a reservation. The whole process is divided into 4 steps:
1. Enter address and time details
2. Select services type, service varies on each airport
3. Fill in passenger’s details
4. Review order, payment, use entitlement & voucher
Upon completion, the user will receive a confirmation email.

Service Review

Users can provide feedback on the services they have used so the customer team can use it to enhance services.

Mobile Version

Impact

After the Bank of China onboarded this website, the registration rate was as high as 25%.. In addition, thousands of bookings daily, and the customer complaint rate is less than 1%.

However, there were only dozens of bookings per day during the Covid-19 pandemic in 2020.

In terms of marketing, it is happening between banks and their cardholders. It is the part where we can only give suggestions to banks and it is out of our control. Therefore, the registration rate is different in each bank.

What I Learned

• Less is more. If there is too much information for the user, they will take longer to digest it or even need clarification. Therefore, the content should be concise.
• 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. Therefore, it is good to leverage it directly to save time.
• If we do not understand the end user's country, culture, background, and habits, we may design a product that does not fit the market.