Redesign Top Up Purchase On Tokopedia’s App
By: Edith Khairani Cresson
Tags: Case Study, Usability, User Research, Design

It’s now a trend for many e-commerce in Indonesia to sell top up and data package. The trend, in my opinion, started just in time when a lot of Indonesian users are a lot more open to use digital services to fulfill their needs, including purchasing top up and data plan. As it gets easier to purchase top up and data package everywhere, the practicality and the ease of use from the service has become the pull factor for users. Through this writing, I would like to share the usability study I have conducted for top up purchase from Tokopedia’s app.

**Top up, or “pulsa” in Indonesian language is a measurement unit use to calculate how users utilize their mobile phone through calls, texts, and internets. Top up is a specific term used mainly for prepaid numbers and also widely known as balance or prepaid credit in other countries.

Objectives

Discover how people use the Tokopedia mobile app, specifically around searching and purchasing top up.

Find users’ pain points in the using Tokopedia’s app to purchase top up.

Create solutions to solve those pain points.

Scenario

I use this scenario to elicit users’ behaviors and assist them while interacting with the product:

Your mom ask you to purchase top up for her, hence you try to use Tokopedia app. You also know that Tokopedia currently have promos going on and would like to use them for buying top up this time.

When users interact with the 2nd page of the product, I’ll give them an additional task:

All of a sudden, your mom would like you to buy her a bigger amount of top up.

Test tasks

• Entering their mom’s phone number as destination number

• Pick the desired amount of top up

• Change purchase detail

• Enter promo codes in the purchase flow

• Pick the desired payment method

• Reviewing their order in purchase history

Sampler

All of the participants in the study knows Tokopedia, with half of them have past experiences using the application and one of of them bought top up from Tokopedia’s desktop web in the past. There were 6 participants in total, aged from 20–40 years old with varying levels of tech-savvyness.

Job Stories

Instead of making a persona, I wrote down some users’ Jobs to be Done to understand the context surrounding the users when they use the app. Through Jobs to be Done, I get clearer information regarding the situation, motivation, and user’s expected outcome. One of the main reason why I use this method is that it helps me understand the interaction between users and product a lot more due to its causals nature.

When I need to get top up as soon as possible, I would like to be able to buy it online through Tokopedia so that I could have the top up without spending a lot of time and effort. When it was time for me (users) to pay for the top up, I want to ensure my order so that it ends up with the right amount to the right number. When I want to get that discounts for my top up purchase, I would like to know more informations and how I supposed to apply them while buying, so that I could be benefitted as users.

Tokopedia’s Top Up Purchasing Flow

From the homepage, Tokopedia enables two different entry points for users who want to purchase top up. First, users are expected to fill out an open form on the top side of the page, and second, users could find rows of icons for their quick bill payment service that include top-up payment. These two entry points have different interface and discoverability, yet designed similarly for the rest of the flow.