06.2024 - 12.2024
End-to-end design process, User testing
With approximately 80% of users adding money to PayPay via ATMs, we are expanding ATM functionality this year by introducing cardless deposit and withdrawal features in collaboration with PayPay Bank.
Our objective is to not only provide a more convenient experience for users, but also to increase visibility of our ATM-related features.
Results
↗ 12% increase in services adaption rate
↘ 13% decrease in customer service inquiries
Product Demo
Users can now access all ATM features using just their smartphone—no need to carry a bank card.
Also in testing, the average transaction was completed in 30 seconds, faster than the typical 45-second card-based withdrawal.
Understanding the high-level business requirement
After PayPay merged with PayPay Bank, we started bringing some of the bank’s key features into the app to help more users adopt them.
Even before that, the app already supported ATM-related features for PayPay e-money, like top-ups — which gave us a solid starting point for deeper integration.
ATM features
PayPay E-money Top-Up (Existing Feature)
+ PayPay E-money cash-out
+ PayPay Bank Cardless deposit/withdrawal
But With tight timelines and limited engineering resources,
we had to prioritize features carefully. I worked with the PM and business teams in a brainstorming workshop using an Impact vs. Difficulty matrix to evaluate which feature to develop first.
I highlighted which option would deliver more user value. We chose bank cardless deposit/withdrawal—it addressed a clear need, was easier to build, and aligned with our 2025 goal of integrating services into one platform. E-money cash-out, while valuable, involved higher regulatory risk and complexity.
ATM features (after update)
PayPay E-money Top-Up (Existing Feature)
+ PayPay E-money cash-out
+ PayPay Bank Cardless deposit/withdrawal
Defining the Problem
Identify the user flow
I visited an ATM and tested the process using competitor apps and benchmark common design and flows.
Gather insights from customer support team
I collaborated with the customer support team to gather user inquires regarding cardless ATM. We then grouped them into key categories for further synthesization.
Review the flow and data
I looked at the flow and data to find where most users were dropping off or having issues, and dug into what was causing it.
Mapping the User Journey
Traditional flow vs. Contactless flow
Pain Point ①
The initial setup takes time and has a high failure rate
We need to verify users to prevent fraud, but each method works a bit differently—so it’s often unclear what users should do or which option to pick.
Pain Point ②
Lack of clear instructions after scanning QR codes
After scanning the QR code on the ATM, users see a corporate number on their phone that they’re supposed to enter on the ATM. But since there aren’t clear instructions telling them to switch back to the ATM, many get confused and don’t know what to do next.
Pain Point ③
After completing a withdrawal/deposit, there’s no clear confirmation message
Because of technical limits, we can’t show the withdrawal or deposit amount—and the total balance—during the cardless flow. This makes users unsure if their transaction actually went through.
Ideation
I created wireframes and flows mapping between mobile and ATM screens.
User testing
After reviewing the early concept with team, I received a variety of feedback, especially about the entry screen for services selection, which is one of the most improtant screens of the flow
I created 3 concepts based on the feedback and tested them with 8 participants.
Asking about their first impressions, what caught their attention, and where they would interact to complete the task.
Concept 1
Adding icons to make the buttons stand out more and better highlight the differences between options
Concept 2
Tring vertical button layout to improve scanability
Concept 3
Adding illustration to draw attention to the call to action
Some quick insights:
"Adding icons helped users recognize the options more easily."
"The illustration didn’t add much value and just made the screen feel cluttered."
"Users preferred the horizontal button layout, as it better matched the overall page structure."
After user testing, we moved forward with Concept 1 since the results were more positive.
Concept 1
Adding icons to make the buttons stand out more and better highlight the differences between options
Final design
With a bit of tweaking and refinement, I finalized the design.
*Only critical screens are shown here.
Choose withdraw/deposit
Initial setup not completed
Initial setup completed successfully
Scan QR code
Display Bank number
Complete transaction
Then we found a critical issue — where users start the flow
In our final design, users were supposed to pick a service in the app first—like bank withdrawal or deposit—then at the ATM, choose the same service, and scan the QR code to continue.
However, in reality, some users start by choosing a service on the ATM first. Then, they open the app’s general scan feature—normally used for Scan & Pay—to scan the QR code. Right now, this works because we only offer one ATM service: E-money Top-Up.
But after the project launch, we’ll support multiple services, and the app won’t know which service the user picked since the ATM doesn’t send that information back.
As a result, the app will need to ask users to choose the service again. This feels repetitive and confuses for users who only use E-money Top-Up as they never expeirnece this before. Even worse, it can cause mismatches—like choosing bank withdrawal on the ATM but selecting e-money top-up in the app—which ends in a failed transaction.
To address this alternative route issue, I worked closely with the developers to brainstorm solutions. As a result, we added a condition check: if the user doesn't have a PayPay Bank account linked to our app, we assume they're only using the E-money Top-Up feature. After scanning, they’ll be taken directly to the E-money Top-Up flow.
I'll skip some of the technical details here, as we had several working sessions to explore which API status checks could be used. Below is the final flow we implemented.
Along with the condition check, we also added a tutorial on the screen to introduce the new screen and reduce confusion.
Adding tutorial ballon
Before
After
Results
Some reviews from users
Super convenient! I love how I can withdraw and deposit cash without needing my card.
The process is smooth, and the instructions are clear!
Really useful feature! The interface is intuitive, and I can set up easily!
Future Ideas
During the iteration, I also came up with some ideas for future improvements, such as:
Introduced haptic feedback to give users a clear, physical response—helping them feel more confident when completing transactions.
Before
After
Instead of ending on a static page, the app now retrieves data from the ATM via API after the transaction is completed—displaying the success status and amount to improve the overall experience.
Learning
Throughout this project, I gained several some insights:
When faced with unclear or ambiguous requirements, it's crucial to raise questions early. Doing so not only saves time and resources but also ensures the team is aligned with the company’s goals from the start.
Bringing features together across multiple devices and services takes careful effort. Hands-on testing and observing in real-world scenarios are crucial for spotting issues that might not appear in theory or isolated development.
No matter how thorough the initial research is, user behavior in real-world scenarios often diverges from expectations. Continuous follow-up and iterative improvements based on actual usage data are essential to refine the product and truly meet user needs.
