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.
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
Product flow
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.
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 concepts based on survey results and tested them with 8 users.
After testing, we found that users felt the top-up input experience was more intuitive.
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.
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