🕑 Timeline
2024/6 - 2025/1
🚀 Responsibility
End-to-end design process, User testing
🏢 Company
PayPay & PayPay Bank
I led PayPay’s ATM experience, making it easy for users to add money to their e-wallet directly 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.
↗ 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 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.
We already support e-money top-ups and are now adding features like cash-out and cardless deposit/withdrawal from PayPay Bank (following our recent merger). A key challenge in this project is integrating these new features seamlessly into the existing experience.
E-money cash-out
Bank cardless deposit/withdrawal
But with tight timelines and limited resources
We needed to carefully prioritize which features to build first. I joined a brainstorming workshop with the PM and business teams, where we used an Impact vs. Difficulty matrix to evaluate our options.
My focus was on identifying which feature would deliver the most value to users. After discussions, we decided to move forward with cardless deposit/withdrawal.
It addressed a clear need, was easier to implement, and aligned with our 2025 goal of integrating services into one platform. In comparison, e-money cash-out had potential but involved more regulatory complexity and development risk.
Understanding the users
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.
To further understanding — Mapping the User Journey compared with the traditional 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.
Second iteration
We released the feature to beta testing for 10–20% of users.
Then we found a critical issue
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 start at the ATM machine, then use the app’s general scan feature—originally for Scan & Pay. This works for now with only one ATM service (E-money Top-Up), but after launch, we’ll support multiple services, and the app won’t know which was selected on the ATM.
This leads to confusion, repeated steps, and potential mismatches—like choosing withdrawal on the ATM but top-up in the app—causing failed transactions.
To solve this, I worked closely with developers to explore solutions. We decided to add a condition check—if a user hasn’t linked a PayPay Bank account, we assume they’re only using E-money Top-Up. so we will take them directly to that flow.
I'll skip the technical deep dive, but we have lots of discussion to define which API to checks to use. Below is the final flow we implemented.
With this condition check, scanning alone becomes the entry point, and the app redirects them based on their intent.
In addition to fixing the condition check, I added an on-screen tutorial to introduce the new screen and reduce confusion.
Adding tutorial ballon
Before
Adding progress indicator
Results
12%
13%
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.
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 let user clearly understand.
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.