Credit Card Voucher
Company
PayPay
Industry
Fintech
Timeline
2024/12- 2025/11
Responsibility
End-to-end design process
Prototyping
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.
To understand who would be most affected, I analyzed our user base and found that most external credit card users were using them intentionally to accumulate airline miles and reward points, PayPay was simply the payment interface.
This reframed the problem entirely. Removing credit card support meant taking away a core incentive for highly engaged users, so the solution needed to preserve their ability to earn rewards.
This insight directly shaped our solution: Credit Card Vouchers allow users to purchase vouchers with their credit cards, keeping their miles and rewards intact — then pay through PayPay using those vouchers. Users keep their rewards; PayPay reduces its processing costs.
Term
Credit card voucher
It works like a prepaid voucher, users first purchase the voucher, then use it to make payments.
Challenge
Creating a new payment method required collaboration across multiple teams, including legal and compliance, and needed to work across the entire payment ecosystem, from the native app to third-party integrations.
Limitation
We already had an existing voucher system, and introducing a new type of voucher meant the experience had to stay consistent without causing user confusion.
Before starting
Understanding the user
I reviewed CS complaint data to understand how users experience payment friction. A recurring theme emerged: unexpected payment failures, especially at checkout, caused significant frustration, unclear errors led to repeated attempts, confusion, and loss of 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 without context, we'd see the same frustration amplified at scale. Users needed more than just a notification, they needed a clear path forward before the cutoff hit. This insight directly led to the Phase 1 / Phase 2 structure.
So I decided to break the design into 2 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.
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.
Gift Voucher
Top-Up
Credit Card Voucher
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
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 credit card direct payment
We still wanted to gradually remove credit card payments to keep the experience smooth, so we decided to add an in-between step, Phase 1.5. Users will find their credit card grayed out when making a payment, but there's a button that redirects them to purchase vouchers. Then in Phase 2, the credit card option is fully removed.
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.
Primary metrics
Voucher Purchase Success Rate
Voucher Payment success rate
Secondary metrics
Other Payment Method Registration Rate
Number of Customer Support Inquiries
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.
Thank you for reading. This is a brief overview of the project. Feel free to contact me for more details.
Credit Card Voucher
