AirPay Mobile Top-up

Mobile phone top-up is an essential part of daily life. By redesigning the phone bill top-up page in Thailand and Vietnam, we have increased our market share and optimized the user recharge experience.

Tools: Sketch, Axure, Google Docs

Duration: 4 weeks (5/2019)

Background

AirPay is the digital financial services platform in Southeast Asia. It provides e-wallet services to consumers through AirPay Mobile Application. Consumers use AirPay App to make payments for everyday products and services, such as food, entertainment, transportation, mobile telecommunications and bill payments.

As a Product Manager in AirPay, I was in charge of redesign the top up services of mobile telecommunications.

There are 2 ways to top up mobile phone:

1. Direct Top-up: Input phone number through AirPay and select the top up value.

2. ePin Top-up: Purchase Cash card / ePin (electronic pin number) on AirPay, and make a phone call with the ePin to add value.

Problem

Design Impact

After redesign the page:

Final Design

Design Process

User Research

Users & Business Objectives

Design Iterations

In order to improve the mobile top-up experience and increase brand awareness to attract more customers using our mobile top up service, I designed the following improvements.

Phone Direct Top-up Page

Since the phone number rules are different in Thailand and Vietnam, and the promotions are different for different operators, it was designed with flexibility in mind to accommodate the needs of different countries and operators. At the same time, since the content of marketing campaigns differs from month to month, I designed a backend platform to facilitate the marketing department to set up promotions directly from the backend.

During the design process, I also have to consider how to improve the existing pages without affecting the user experience, reduce the engineering workload of engineers, and ensure the design can go live quickly. In addition, I had to consider the localization of the design. For example, the length of displaying Thai Baht and Vietnamese Dong, the length of Thai and Vietnamese text.

ePin Top-up

Special Case Design:

In order to maintain customers on AirPay platform and provide smooth mobile top up experience in AirPay, I designed the following flow:

If user comes to AirPay phone direct top-up page to top up “Viettel” number, we will direct user to cash card (ePin) top up page of Viettel. In this case, users are still able to perform phone top up function.

Final Design

Reflection

As a product manager and designer, I had to work with many stakeholders in the design and development of AirPay. For example, I needed to work with the marketing team to design a solution that would help their promotion plan to be better presented in the mobile top-up page. I also needed to communicate with engineers to check the feasibility of the solution. On top of that, it was necessary to study the long-term development costs and design and develop a solution that could be used sustainably. In this case, I am not designing an ideal solution for the user, but I have to consider all aspects of the user, the business and the engineers. This requires good judgment on the part of the product manager to prioritize and balance these requirements.

In addition, special cases and design internationalization are what I learned in this case study. For example, Vietnamese money has a larger monetary value with more digits compared to Thai. On the same page, the Thai top-up denominations have a three-column design, while the Vietnamese have a two-column design. In real life, there are often non-perfect situations and the design should take into account all edge cases.

Also, there are often special cases in the design, such as the Viettel example mentioned in this case study. This particular case had an impact on our existing process, but considering the market share, I provided an alternative and convenient way for users to top up, reducing churn rate and increasing user stickiness. Product managers and product designers need to be flexible and creative. We need to consider the different needs of users, business people, engineers, and finance people, etc to design the best solution that meets the needs of all stakeholders.