Credit Card Voucher
Designed a new payment method that shifted external credit card usage to voucher-based payments
Company
PayPay
Industry
Fintech
Timeline
2024/12- 2025/11
Responsibility
End-to-end design process
Prototyping
Why we start?
Previously, users could link their external credit cards to PayPay and pay directly in the app.
However, this approach has become increasingly costly due to processing fees charged for each transaction, which, at scale, adds up to a significant expense for PayPay.
To reduce these costs while keeping users in the app, we decided to gradually phase out this payment method and introduce a new payment method called the Credit Card Voucher.
Why Voucher?
As part of our plan to phase out direct credit card payments, we initially explored introducing a money type that users could top up via credit cards. This approach offered the smoothest user transition and aligned well with existing payment behaviors.
However, legal review revealed that this was not permitted under Japanese regulations, and it would also require significant changes to our system architecture.
So, to balance legal compliance and user experience, I worked closely with legal and engineering partners to reframe the problem, from what we wanted to build to what was feasible within existing constraints. We identified the Gift Voucher system as a strategic alternative: it is legally compliant, compatible with our current infrastructure, and preserves a familiar top-up-and-pay experience for users.
By adopting vouchers, we were able to:
Meet regulatory requirements without delaying the roadmap
Limit technical complexity and risk
Maintain user trust during the payment transition
Term
It works like a prepaid voucher — users first purchase the voucher, then use it to make payments.
Challenge
Make the onboarding and purchase flow simple and intuitive, reduce the learning curve, and encourage users to switch to the in-house payment method.
Limitation
We already have existing vouchers and gift cards, so differentiating the new Credit Card Voucher while maintaining consistency is crucial
Before starting
We found that if we notify users and immediately stop their credit card payments, it could frustrate them and lead to a poor user experience.
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.
Product flow
Phase 1
Mapping out all the entry points
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 (~80% of users)
and when they add a new credit card
Onboarding
After seeing the sunset message, users can enter the onboarding flow, where they are guided to the sunset message details and the in-house payment promotion page, which is part of our project goal.
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.
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?
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.
Finally, 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.
After purchase
We direct users to the voucher details page and provide a clear CTA to continue to payment, closing the loop for the overall experience.
Phase 2
Terminate the 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.
Designs were handed off
I worked with the PM and data team to define success metrics for the project.
In-house Payment Method Registration Rate
Credit Card Voucher
Purchase Success Rate
Credit Card Voucher
Payment success rate
Number of Customer Support Inquiries
Apart From Design
Since this project was large and had multiple phases, I took several steps to ensure smooth collaboration with the team.
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 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