Credit Card Voucher
Company
PayPay
Industry
Fintech
Timeline
2024/12- 2025/11
Responsibility
End-to-end design process
Prototyping
Previously, users could use their external credit cards in PayPay to make payments.
However, for every transaction, we had to pay processing fees to card companies such as Visa and MasterCard, which, at scale, add up to a significant expense for PayPay.
To reduce these costs while keeping users in the app, we decided to gradually phase out external credit cards and introduce a new one called Credit Card Vouchers.
We initially planned to let users top up a new balance with credit cards to make the phase-out transition smoother. However, this was not allowed under Japanese regulations and would require major system changes.
Instead, I worked with legal and engineering to come up with an alternative solution. We decided to use Gift Vouchers, which are compliant, fit our system, and still allow users to pay with external credit cards by purchasing vouchers.
Term
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
We found that stopping credit card payments immediately after notifying users could cause frustration 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
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
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.
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?
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.
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.
When the input is invalid
Quick fix button appears
Tap to correct the number
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
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.
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
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.
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