Credit Card Voucher
Company
PayPay
Industry
Fintech
Timeline
2024 Q4 - 2025 Q1
Responsibility
End-to-end design process
Usability testing
Why we start?
PayPay users could link external credit cards to make payments, a convenience many relied on for daily transactions. However, every transaction incurred processing fees to card networks, adding up to a substantial operating expense at PayPay's scale.
We decided to phase out this payment option to reduce operating costs at scale.
How I frame the problem
Why do users pay with external credit cards through PayPay?
To understand who would be most affected, I analyzed our user base and found that most external credit card users weren't really loyal to PayPay. They were using PayPay as a payment interface to accumulate airline miles and reward points from their cards. PayPay just happened to be widely accepted across Japan.
This reframed the problem entirely. Removing external credit card support wouldn't just be a UX inconvenience. It would eliminate the core incentive keeping our most engaged users active.
How might we retain these users while reducing cost?
I worked with PM, we explored ways to let users keep paying with their credit cards without routing through the high-cost credit card network.
One early idea was a top-up flow where users charge their card to load PayPay balance. But PayPay already manages multiple money types, and adding another would introduce regulatory complexity around Japan's e-money compliance rules.
That's when we looked at PayPay's existing voucher system. Unlike e-money, vouchers fall outside Japan's stricter anti-money-laundering regulations because they're non-transferable, making them a viable path forward.
We proposed a new voucher type: Credit Card Vouchers. Users purchase vouchers with their external credit cards (keeping their miles and rewards), then pay through PayPay as usual.
The result: users keep their rewards, PayPay cuts processing costs, with no new money type or compliance framework required.
Old Flow / New Flow
What is Credit card voucher
It works like a prepaid voucher, users first purchase the voucher, then use it to make payments.
How I think about the problem
Challenge across the system
Introducing a new payment method meant working across legal, compliance, and every layer of the payment ecosystem, from the native app to third-party integrations.
Limitation to consider
We already had an existing voucher system, so the new voucher type had to feel consistent with what users already knew, without adding confusion on the frontend or complexity in the backend.
Understanding the user
I reviewed CS complaint data to understand where payment friction actually hurt. One pattern kept showing up: unexpected failures at checkout, especially with unclear error messages, led to repeated attempts, confusion, and eroded trust in the app.
This told me the phase-out couldn't just be a technical switch. If users hit a "credit card not supported" error with no context, we'd see that same frustration at scale. Users needed a clear path forward before the cutoff, not just a notification.
With those in mind, I started designing.
Rather than shipping all at once, I pushed for a phased approach.
Cutting off external credit card support overnight would have been the fastest path technically, but the riskiest for users. By thinking through the rollout as a product, I proposed breaking it into two phases:
Phase 1
Notify users that credit card payments will end on a certain date, and allow them to purchase Credit Card Vouchers in advance.
Phase 2
Fully terminate external credit card payments.
Flow Chart
Phase 1
Recerive Sunset Notification
There are lots of place to inform users about sunset message, but we don’t want to bother users too much with placing at all of them, so I get the data to identify the critical points
Payment flow (main touchpoints: 80% CTR)
Add new card flow
Onboarding
After seeing the sunset message, users can enter the onboarding flow, where they are guided to the sunset message details and the card voucher guide page for more information.
Purchasing
We already had an existing gift voucher experience, but the credit card voucher was slightly different — it could be purchased at any time without any restrictions.
Credit Card Voucher
Gift Voucher
Top-Up
What should the experience feel like? Should it align more closely with the existing gift voucher purchase flow, or should it be treated more like a top-up (adding funds) experience? To make an informed decision, we decided to conduct user testing.
User testing
I created some mock-ups to explore the idea, but they just weren’t feel right So I decided to conduct research, and to work within the tight timeline and limited resource, I chose a lightweight yet efficient and targeted approach.
Survey
I created surveys in both English and Japanese to understand how users perceive the Credit Card Voucher concept and interpret the purchase layout.
Concept testing
I created 3 concept prototypes based on survey results and tested them with 8 users.
User Feedback
I prefer the top-up–style screen since I already know how to use it.
I could tell it was some kind of a purchase screen, the first thing I noticed was the amount input section.
I like the preset amount buttons, they save time.
After testing, we found that users perceived the top-up input pattern as more intuitive. Based on this insight, we chose to adopt the top-up–style input experience.
and we have our purchase screen
Default
Coach Mark
Active
One more thing
Due to legal and business requirements, the input amount must be incremented by ¥10,000. If users enter random number, it is likely to cause errors, which could frustrate them. To reduce friction and user frustration, we added a floating button that automatically fixes the entered amount.
Quick fix button appears
Tap to correct the number
After purchase vouchers
We direct users to the voucher details page and provide a clear CTA to continue to payment, closing the loop for the overall experience.
Voucher details page
Redirect to the payment screen
Phase 2
Fully phased out direct credit card payment
The voucher purchase flow stays the same, but users can no longer pay with a credit card directly. In the payment screen, the credit card option is grayed out with a message that redirects them to purchase a voucher instead.
Measuring Success
Working with the PM and data team, I helped define success metrics across two tiers, prioritizing indicators that directly reflected user adoption of the new system, while tracking support tickets load as a signal of transition friction.
Additionally, I took extra steps to ensure a smooth handoff
version control
When the project launched in different phases, users who hadn’t updated their app might miss new designs like the termination message or onboarding, which isn’t ideal. So I mapped out all possible scenarios to check the experience and share with dev team to tweak it where needed.
Established design QA & documentation
We established a formal design QA process and built an annotation tool to improve implementation quality, benefiting other projects as well.
Learning
Conduct lightweight research even with limited time and resources.
Build strong team relationships to facilitate smoother and faster progress.
Align with stakeholders early and sync gradually to prevent last-minute changes, especially when there is significant legal compliance required for a new payment method.
Gather feedback continuously but prioritize it to come up with a reasonable design.
Next
Top-Up Screen A/B Testing
Optimized through A/B testing, achieving a 7% increase in top-up amounts
Credit Card Voucher
