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

User experience perspective:

●      No recent phone top up history for user

●      No search contact by phone number (only search contact by name)

●      No auto suggestion on telco carrier (users have to manually select the carrier). But user should have the flexibility to change the carrier.

●      When using telco cash card to copy the ePin information for phone top up, the copy experience is not user friendly. (It copies whole page information, not only the ePin number)

Marketing and promotion perspective:

●      Discount and promotion display at a later page (at payment page, not the first page). Should move the cashback and discount to earlier screen to improve the conversion rate.

●      The design of promotion and marketing events is not very attractive.

Objective

●      To provide smooth user experience for mobile top-up.

●      Increase customer stickiness

●      Reduce the customer typo/error/mis-operation for mobile top-up.

Target Users

AirPay current Thailand and Vietnam users who need to top up mobile phone or purchase cash card (ePin) to add value to their mobile phone.

Design Solution

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

Phone Direct Top Up Page

• Page Function

  Users:

  • User inputs phone number (Show the recent top up numbers)

  • User selects mobile top up package or data package to purchase

  • User clicks on contact list to access contract. User is able to search contract by names or numbers. User can click on the contract to do the direct top up

    Topup Page (App):

  • Provide default carrier & allow users to change carriers

  • 2 types of marketing banners: for 1) all carriers or 2) specific carriers. Marketing banners for specific carriers only show to customers who use that carrier

  • Allow all the promotion discount, face value of the product and final amount to be configured at admin backend (a separate platform for operation team)

  • Discounted value is displayed as subtotal on top up screen

• Basic Logic

  • When user inputs phone numbers, check certain criteria to align with local phone number rules (See right table)

  • Promotion Banner Types:

    • AirPay General Promotion Banner — Apply to all users

    • Promotion specific to 1 carrier, apply to users who use that carrier

    • Marketing team is able to arrange and configure those banners at backend

  • Admin backend configure promotion:

    For face value, price and discount badge, Operations and Marketing team should be able to set at admin backend:

• Discount badge display period (e.g for certain discount badge, badge appears between April 1st 2020 to April 30th 2020)

• For the badge type: 1) xx% off,  2) 50THB off

• Design

  User Enter Phone Number:

After phone number check, display related Promotion Banner, Top-Up and Add-on Package.

• No Banner:

• With Banner and special promotion tag:

Cash card (ePin) Top Up Page:

• Cashcard (ePin) top up has similar design as direct phone top up. User selects the cash value that they want to top up. The discount is show at the value selection page.

In Transaction Details Page:

1. For the serial: user can long press and copy (serial number is used for special investigation situation).

2. For the Pin Code: user can long press and copy.

3. User can click button: “Use PIN Now” (Change the “Copy EPin Details” in original design to “User PIN Now”)

Click “User PIN Now”, User can directly click “Call” to top up mobile phone.

Special Case Design:

Viettel is one of the largest telecommunication company in Vietnam. It contains 41% of the market share. However, it doesn’t support phone direct top up on “Non-Viettel” platform (It still allows cash card (ePin) top up on other platforms). 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.

Reflection

As a product manager, there are a lot of departments that I need to collaborate with during AirPay design and development process. For example, I need to collaborate with marketing team to design a solution that help their promotion plan better presented in mobile top up page. I also need to communicate with engineers to check the feasibility of the solution. In this case, I am not design the ideal solution for users, but a solution that consider all users, business and engineers aspects. This requires product manager to have good judgement to prioritize and balance all those requirements.

Edge case is also a common thing happen in the working environment, such as the special cases mentioned in this case study. This requires product manager to be flexible and creative. We are wearing multiple hats: Users, Business, Engineers, Finance People etc. We need to consider all different situations and prepare the best solutions that satisfy all stakeholders’ needs.