Redesign Top Up Purchase On Tokopedia’s App –

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.


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


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


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.


After conducting the interviews, I analyzed and synthesized feedback from users. I wrote down every key feedbacks and grouped them based on similarity.

2×2 Analysis

With plenty of pain points in hand, I use 2×2 analysis map to help me in prioritizing which pain points to solve. In my 2×2 map, I place the pain points based on how important they are to the business (x) and to the users (y). For the business perspective, I assume that Tokopedia as an e-commerce set a revenue target (KPI) hence the pain points in the app that affect them are the ones that count in this analysis.

Define Problem

Top Pain Points

  1. Low Discoverability

Users have a hard time finding the entry point for top up products in Tokopedia’s app. Some users spent their time scrolling the home page up and down and still could not find the open form nor the top up icons. It took an interesting turn when users who failed to find the entry point from home page had to revert back to their basic knowledge on e-commerce: “If you cant find it upfront, use the search bar. If they have it, it supposed to appear on the searchbox.” Some other users chose to learn how Tokopedia arrange their products by studying their pattern and groupings. Only a few of them could finally found the open form for top up purchase is actually placed on the top level of the page.

2. Difficulties in finding promo codes

All of the users in this study failed to find promo codes. Some were looking into the promo banner on landing page, yet could not find ones destined for top up products. None of the users find the extra promo link right below the banner. The 2nd placement for promo codes were in the lower part of the homepage. This 2nd alternative was also proven unintuitive because the lack of cues it has to lead users, the effort it requires, and the bad placing that mix promos for every product.

3. Disruptive login request

Users feel that the login request is too disruptive and harsh. Users said that log in is a hassle and tend to waste their time. Some users did not log in before stating the usability session, resulting in their disappointment due to a disturbed purchasing process. However, after they enter their log in credentials, the previous destination number and preferred product are wiped out. There were also users who have to go through registration section and have to deal with double verification step. These double verification steps also could become a hassle for registered users who forget their password and have to go through their emails before continuing their top up process.

4. Undisclosed additional fee for certain channel payment

Tokopedia promised top up that is cheaper than over the counter ones, yet the case might be unjust for users who select certain payment channel. Certain payment channel, like minimarkets, have additional fees for their customers. The information about this additional fee need to be communicated to users as soon as possible. Currently, Tokopedia shows the information only after users done picking their preferred method and channel. This timing shows that either Tokopeda assumes most users know about the fees or that users wont be bothered by the sudden change.

Note: If you read my previous article “Why Do Users Experience Negative Emotions?”, this pain point is the example of intensity factor that might cause users to experience negative emotions due to lack of transparency.

Other Important Pain Points ( Only for Users or Bussiness)

  1. Users did not use the phonebook and detail transaction features, because of how the features displayed in the app. Many did not think the icons or section as clickable.
  2. Users could not find their top up transaction history. In all cases, they looked into the general history section first and felt disappointed because they could not find anything top up related there.
  3. Users did not understand what does “Instant purchase with Tokopedia’s balances” means. The persuasion lacks in information and users found them a hassle to find resources to teach themselves.
  4. Users did not use any function in the header, except the menu functions. Users preferred to use the native back button in their phones instinctively (Most users in the study use Android).

Not Important Pain Points

1. Users barely use the change order feature and prefer to use the back button and change everything from the initial form.

2. The zoom in/out feature also barely touched by the users in the study, instead, users try to zoom in or out by pinching their fingers into the screen.

UI Sketches

I sketched out some possible solutions for the pain points found in my study. All the design modification was considered not only for the most critical pain points, but also for the rest of the top up purchase experience. That being said, exploring possible alternatives are actually important in helping me figure out the best end-to-end experience in the application.

Hi-Fi Mockups

After I came up with several design solutions, I do some additional literature study and also tested them again to several users. With all these steps done, I could figure out which design offers the best solution and start translate the lo-fi mock up into higher fidelity.


Check the clearer version of my prototype here: Top Up Prototype

**You could try out purchasing Rp150.000 Top Up through Tokopedia and selecting Indomart as your preferred paymet channel.


While doing this study, I realize that there were parts where users could be overwhelmed by loads of information. Tokopedia tends to over sell a lot of things at once, makes many of their features drowned in between other products. With these findings, I have simplified the Tokopedia app with lesser step and clearer focus for users. From this study I also learn to create an experience that balance users and business needs. It has been a very exciting chance for me to conduct this study, and as I could see how it still far from perfect, I hope it could be a start for me to start more redesigning project. Thanks for reading!

Note: I am not affiliated with Tokopedia. I just one of their users who have interest in design, research, and creating user-centered solutions.

If you want talk to me about UX or usability test, feel free to reach me out, I don’t bite 😉

Further Reading:

Why Do Users Experience Negative Emotions?
Three factors why a user can have a negative experience and how to avoid it.uxdesign.ccReplacing The User Story With The Job Story
Too many assumptions are
UX Design for Mobile: Bottom Navigation
Designers know that design is more than good looks. Design also covers how users engage with a product, whether it's a…

Author: Edith Khairani Cresson

Collect by: