Cardless ATM
Overview
I led PayPay’s ATM experience, making it easy for users to add money to their e-wallet from ATMs. In Japan, where cash is still a big part of daily life, this helped more people start using PayPay.
In this project, I expanded the service to our banking service, enabling users to deposit and withdraw without a cash card. The challenge was to design a consistent user experience across all ATM services., decreasing the learning curve, while accommodating different ATM specifications and working within technical constraints.
PayPay
Company
Fintech
Industry
2024/6 - 2025/1
Timeline
End-to-end design
User testing
Responsibility
0
0
%↑
Services adaption rate
0
0
%↑
Trasaction success rate
0
0
%↓
Customer service inquiries
Product Demo
With this feature, 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 business goal
This project focuses on expanding ATM-related features and increasing their visibility. Since many people in Japan still use cash, we see this as a way to bring them closer to PayPay and gradually help them shift toward contactless payments.
Challenge: Tight timelines and limited resources
We needed to prioritize which ATM-related features to build first. I participated in a workshop with PM and business partners, using an Impact vs. Difficulty matrix to evaluate options.
From a design perspective, I shared input on which features would deliver the most value to users. After discussion, we decided to move forward with cardless deposits and withdrawals.
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 worked with data anaylst to look at the flow and data to find where most users were dropping off.
Mapping User Journey compared with traditional card-based flow
Traditional flow vs. Cardless flow
Simply put, there are 2 main differences between the flows—and also the key reasons behind most transaction failures:
Extra setup required: With the cardless flow, users need to go through an initial setup, including KYC at the first time, to prevent fraud.
Switching between devices: In the traditional flow, everything happens on the ATM. But with the cardless flow, users have to switch between their phone and the ATM.
Pain Point ①
Around 40% of users fail during the initial setup
We need to verify users to prevent fraud by initial set up, but the available methods each work slightly differently—making it unclear what users should do or which option to choose, often resulting in delays.
Pain Point ②
About 13% of users drop off after scanning QR codes due to unclear instructions
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 ③
No clear confirmation after withdrawal/deposit—7% of CS inquiries relate to this step
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
Before starting, I also laid out some high-level design goals to help keep the direction clear.
Keep the experience as simple as using a regular cash card
Integrate new features without interrupting the existing experience
Work within technical limitations
I created wireframes and flows mapping between mobile and ATM screens.
After reviewing the concepts 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
User testing
I created 3 concepts based on the feedback
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 reinforce the call to action
I used Zoom and Figma prototypes to test with 8 participants, asking about their first impressions, what caught their attention, and where they would interact to complete the task.
Some 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
Scan QR code
Display Bank number
Complete transaction
And more… ATM screen
Besides interacting with the app, users also need to interact with the ATM screen. A pain point is that users have to switch back and forth between the app and the ATM to check details, which adds extra burden. To address this, I decided to add a screen on the ATM to display essential information, such as current account balance, fees, and daily withdrawal limits
The challenge is that ATMs have different specs and rules, and the content must meet regulatory requirements. The design had to follow limits on colors, font sizes, and screen layout, while coordinating closely with the ATM company. This was also my first time designing a screen outside of mobile or desktop, making it a completely new experience.
We released the feature to beta testing for 10–20% of users. But then…
We found a critical issue: a mismatch in user behavior
Users were expected to select a service in the app first, then match it on the ATM and scan the QR code.
However, some users started at the ATM instead and then used the app’s general scan feature. In this flow, the app doesn’t know which service was selected on the ATM, which leads to errors and prevents us from clearly explaining the reason to users.
Condition Check
To address this issue, I worked closely with engineers to explore possible solutions. We decided to introduce a condition check: if a user hasn’t linked a PayPay Bank account, we assume they intend to use E-money top-up and route them directly to that flow.
I’ll skip the technical deep dive, such as which APIs to use for this check.
With this condition check in place, the app automatically redirects users to the appropriate flow based on their intent, reducing errors.
In addition to condition check, I added an tutorial to help users navigate this new feature
Adding tutorial ballon
Before
Adding progress indicator
Results
12%↑
Services adaption rate
16%↑
Trasaction success rate
13%↓
Customer service inquiries
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:
Add a haptic feedback to reinforce that the number input was successful.
Retrieving data from the ATM via API after the transaction is completed, displaying the success status and amount on the screen to provide user clear feedback
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. User 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.