Let's begin with the top-up screen

Input field

Quick amount button

Top-up method

Current balance

Top-up money type

Other top-up related features

Confirm Button

What do we know about the users?

From data, we found that users tend to top up small amounts multiple times instead of adding a larger amount at once.

I dug deeper into past research and surveys, and identified several reasons behind this behavior:

Users don’t feel secure keeping a large balance in PayPay.
The current input method for amounts isn’t easy for users.
Many users are unsure how much they actually spend with PayPay each month

Why is this a problem?

Each top-up comes with a processing fee—ranging from about ¥10 to ¥200 depending on the method. With PayPay’s large transaction volume, these fees quickly add up on the operations side, costing tens of millions of yen each month.

How do we going to solve it?

Our goal is to reduce the frequency of top-ups by encouraging users to add larger amounts at once.

For this test, we started with the assumption that:
Showing users their total spending last month with other improvement could encourage them to top up a similar or larger amount at once.

And to validate this assumption, we decided to run an A/B test.

I futher broke the assumption down into two key design points:

Show users how much they spent last month
Make it easy to top up that amount with just a tap

This would help users to maintain a sufficient balance throughout the month, reducing the need for frequent top-ups by subtly shifting their behavior.

And I started to generate some potential concepts for testing.

For the first idea, I thought about adding an entry point to the spending history page, making it easy for users to see their past spending.

⚠️ But the problem is, it adds an extra step—users have to leave the top-up flow, check their spending, then navigate back. It interrupts the experience and makes the process feel less seamless.

Next, we needed to make it easier for users to enter that amount.

So I placed the spending amount directly on the top-up page.

So I introduced a new pattern that lets users tap the placeholder to auto-fill the recommended amount.

→

For the second option, I considered adding a new quick amount button that displays the spending amount, placed ahead of the other quick amount buttons.

⚠️ But it didn’t sit well visually—it made the layout look off.

So I kept the number but moved the descriptive text into a tooltip for a cleaner layout.

As third idea, I considered adding the button and spending information to the bottom bar.

⚠️ But it made bottom bar too large and could potentially cover content at the bottom.

So I switched to a floating button to make it less intrusive, and added a dismiss icon so users could easily close it.

Let’s take a pause and take a look at our three candidates.

Testing case ①

Testing case ②

Testing case ③

Just when things seemed to be going smoothly, an issue came up— I revisited Testing case 1.

⚠️ Second thought: this felt too aggressive—some users may prefer to enter the amount manually, but when they tapped the placeholder, we automatically filled in a value, which could lead to a poor experience over time.

→

Where I introduced a new pattern that lets users tap the placeholder to auto-fill the recommended amount.

So, I removed the behavior, moved the banner below the input field with a higher-contrast color, and integrated the suggested amount button directly into it.

This made the design less intrusive and maintained the input field as the primary focus in the information hierarchy.

Before

After

But thinking one step further—

While we’re making it easier for users to input the amount, what if they tap it by accident?

If they didn’t mean to top up that amount, they’d have to hit the delete key multiple times, which could lead to frustration.

But thinking one step further—

While we’re making it easier for users to input the amount, what if they tap it by accident?

If they didn’t mean to top up that amount, they’d have to hit the delete key multiple times, which could lead to frustration.

So (drumroll...) I proposed adding a “clear amount” icon button that appears when the input field is focused, which is also a common pattern in finance apps.

It’s a small touch, but I believe it also improves the experience for regular users.

And (light bulb moment 💡)—from the research mentioned above, one key insight was that users avoid keeping large balances in PayPay because they don’t feel secure. As a result, they prefer topping up small amounts more frequently.

Digging deeper, I found that PayPay actually offers a compensation program and several other security measures. The problem, however, is that this information is far too hidden from users.

So I added a security message and a link to the help page to reassure users and boost their sense of safety.

Since I was already working on it, I started thinking—what else can we do to ease users’ concerns?

After a few walks (and maybe a bit of overthinking), an idea came to mind—

Since I was already working on it, I started thinking—what else can we do to ease users’ concerns?

After a few walks (and maybe a bit of overthinking), an idea came to mind—

Highlight to users that they can cash out anytime, plus a link to the help page.

For a final touch, we said we were ready to test… yeah, right.

We knew we wanted to recommend a top-up amount based on users' spending from the previous month. But there were still a few open questions:
When should we show it? How often? And what amount should we recommend?

⏱ Timing Matters

If users see the recommendation in the middle of the month, chances are they’ve already topped up a small amount. At that point, they’re less likely to follow our suggested amount.

To validate this, I reached out to a data team to check the average top-up frequency. The data showed that most users top up about every two weeks, meaning they visit the top-up page roughly twice a month.

So instead of displaying the suggested amount throughout the month, I decided to:

Show it at the beginning of the month, when they’re more likely to make a larger top-up
Limit it to bi-weekly display — shown once every two weeks, and then hide it until the next month. This helps prevent fatigue and ensures the suggestion remains relevant.

If users see the recommendation in the middle of the month, chances are they’ve already topped up a small amount. At that point, they’re less likely to follow our suggested amount.

So instead of displaying the suggested amount throughout the month, I decided to:

Show it at the beginning of the month, when they’re more likely to make a larger top-up
Limit it to bi-weekly display — shown once every two weeks, and then hide it until the next month. This helps prevent fatigue and ensures the suggestion remains relevant.

📉 What About One-Off Large Expenses?

During QA, I noticed a few users had big spikes in spending—for example, investment-related payments or rare purchases. These aren’t regular behaviors and could throw off the recommended amount.

To keep things accurate, we excluded certain categories from the calculation if they’re clearly not part of regular monthly expenses.

During QA, I noticed a few users had big spikes in spending—for example, investment-related payments or rare purchases. These aren’t regular behaviors and could throw off the recommended amount.

To keep things accurate, we excluded certain categories from the calculation if they’re clearly not part of regular monthly expenses.

🔢 Round It Up — for Tech and Business Reasons

Lastly, I looked at the actual numbers. Users’ monthly spending often ends in awkward figures—like 14,563. Recommending that exact amount didn’t feel helpful or practical.

From both a technical and business point of view, I decided to round up to the nearest thousand. So if a user spent 14,563 last month, they’d see a suggested top-up of 15,000. It’s cleaner, easier to act on, and nudges the user slightly toward a higher amount.

Lastly, I looked at the actual numbers. Users’ monthly spending often ends in awkward figures—like 14,563. Recommending that exact amount didn’t feel helpful or practical.

When we were finally ready to move forward, our data analyst brought up another important point:

If we wanted to test all three options, it would take significantly more time and a larger sample size.

Since our goal was to move fast and iterate, we decided to start with just two options for the initial test. This let us gather insights quickly without slowing down the release.

When we were finally ready to move forward, our data analyst brought up another important point:

If we wanted to test all three options, it would take significantly more time and a larger sample size.

Since our goal was to move fast and iterate, we decided to start with just two options for the initial test. This let us gather insights quickly without slowing down the release.

Time to reveal the finalists—with a few small updates!

Player ①

I added an extra quick amount button to make it easier for users to input the recommended amount.

To show last month’s spending, I used the input field’s placeholder—since tooltips aren’t ideal for longer text and can impact readability.

Player ②

In this version,

I used a banner to display the user’s spending from the previous month, along with a text button that lets them input the recommended amount with a single tap.

Player 1 and Player 2 were each rolled out to 10% of users, while the remaining users saw the standard top-up screen as the control group.

⏩ One month later… we have a winner!

Player 1 and Player 2 were each rolled out to 10% of users, while the remaining users saw the standard top-up screen as the control group.

⏩ One month later… we have a winner!

🎉 It’s Player ①

📊 Results

Top-up amount increased

📊 Results

Top-up amount increased

while Player ② showed no significant change.

However, top-up frequency remained unchanged in both groups.

while Player ② showed no significant change.

However, top-up frequency remained unchanged in both groups.

💡 What We Learned from Testing

Showing users their last month’s spending can encourage them to top up more.
Adding a banner is visually prominent, but ironically, it was often overlooked (confirmed by CTR data )
Integrating into the existing layout—such as using a quick amount button—made it more likely for users to notice and take action.
The clear amount icon button received positive feedback for making it easy to delete input.

These learnings reminded us that design is an iterative process. I also shared them with the design team, and we're planning to run more A/B tests in the future.

Showing users their last month’s spending can encourage them to top up more.
Adding a banner is visually prominent, but ironically, it was often overlooked (confirmed by CTR data )
Integrating into the existing layout—such as using a quick amount button—made it more likely for users to notice and take action.
The clear amount icon button received positive feedback for making it easy to delete input.

These learnings reminded us that design is an iterative process. I also shared them with the design team, and we're planning to run more A/B tests in the future.

Reflection

I learned that having a clear reason behind each deisign decision really matters. Even if things don’t work out, understanding the thinking behind it helps you grow and avoid repeating mistakes.

I also found that past research and data can be surprisingly helpful—it often supports new ideas in ways you wouldn’t expect.

I learned that having a clear reason behind each deisign decision really matters. Even if things don’t work out, understanding the thinking behind it helps you grow and avoid repeating mistakes.

I also found that past research and data can be surprisingly helpful—it often supports new ideas in ways you wouldn’t expect.

Next: Prototyping with AI →

Top-Up Screen A/B Testing

Timeline

2025/2 - 2025/6

Responsibility

End-to-end design process

Company

PayPay

Since joining PayPay, I’ve been responsible for improving the top-up experience, with a focus on understanding user concerns when adding funds.

In this project, we ran an A/B test to explore which UI pattern best encourages users to top up larger amounts. which can increase their spending, and reduce top-up frequency—ultimately helping to lower operational costs. Over a one-month period, we tested two different UI patterns.

Since joining PayPay, I’ve been responsible for improving the top-up experience, with a focus on understanding user concerns when adding funds.

Back

Top-Up Screen A/B Testing

Top ↑

Let's begin with the top-up screen

What do we know about the users?

From data, we found that users tend to top up small amounts multiple times instead of adding a larger amount at once.

I dug deeper into past research and surveys, and identified several reasons behind this behavior:

Users don’t feel secure keeping a large balance in PayPay.

The current input method for amounts isn’t easy for users.

Many users are unsure how much they actually spend with PayPay each month

Why is this a problem?

Each top-up comes with a processing fee—ranging from about ¥10 to ¥200 depending on the method. With PayPay’s large transaction volume, these fees quickly add up on the operations side, costing tens of millions of yen each month.

How do we going to solve it?

Our goal is to reduce the frequency of top-ups by encouraging users to add larger amounts at once.

For this test, we started with the assumption that:Showing users their total spending last month with other improvement could encourage them to top up a similar or larger amount at once.

And to validate this assumption, we decided to run an A/B test.

⏱ Timing Matters

⏱ Timing Matters

📉 What About One-Off Large Expenses?

📉 What About One-Off Large Expenses?

🔢 Round It Up — for Tech and Business Reasons

🔢 Round It Up — for Tech and Business Reasons

💡 What We Learned from Testing

💡 What We Learned from Testing

Reflection

Reflection

Top-Up Screen A/B Testing

Top-Up Screen A/B Testing

Top-Up Screen A/B Testing

For this test, we started with the assumption that:
Showing users their total spending last month with other improvement could encourage them to top up a similar or larger amount at once.