Smartphone ATM
Timeline
Responsibility
UI/UX design & User testing
Company
Overview
About 80% of PayPay users add balance through ATM top-ups. We’re working to add balance cash-out and PayPay Bank cardless deposits/withdrawals directly in the app. The main challenges are working with different teams and companies and making it easy for users to switch between their phones and ATM screens.
Before starting
The balance cash-out feature goes against our objective of encouraging users to keep their funds within the app to drive spending. To address this, I reached out to the PM to discuss the conflict.
As a result, we decided to move the cash-out feature to the backlog and prioritize PayPay Bank’s cardless deposit and withdrawal options for now.
💡What's cardless deposits and withdrawals?
Cardless deposits and withdrawals enable bank users to access ATMs through a mobile app, using a QR code or transaction code for verification instead of a cash card.
Let’s do a deep dive into the feature we want to build.
✦ Identify the user flow
To understand how cardless deposits and withdrawals work, I visited an ATM and tested the process using competitor's apps.
Unlike the traditional process with a cash card, users now need to interact with both their phone and the ATM. The design needs to be clear, easy to follow, and reduce the chance of mistakes.
⊕
✦ Gather user insights
I consulted the PayPay Bank customer service team to learn about the most common questions and issues with cardless withdrawals and deposits, ensuring the design meets real user needs.
✦ Review the data
I analysed transaction success rates and other key metrics to pinpoint common errors in the user flow.
Paint Points and possible solutions
I categorized the user pain points into 3 key focus areas
User Flow & Wireframes
✦ Traditional vs. Cardless
Unlike the traditional process that relies solely on the ATM for transactions, the new flow integrates both the ATM and the app to better address user concerns.
Unlike the traditional process that relies solely on the ATM for transactions, the new flow integrates both the ATM and the app to better address user concerns.
I created wireframes based on the proposed solutions, ensuring they were consistent with the team's design style.
User testing
I turned the wireframes into mockups and shared them with the team, gathering feedback, particularly on the new screen design. While I valued their input, I held a different perspective.
To determine the best direction, we conducted internal user testing to evaluate and refine the ideas.
Option A
Option B
Option C
Total 8 participants joined the study, which focused on evaluating the visual style and layout. We asked them about their initial impressions of the design, what elements drew their attention first, and which parts of the screen they would interact with to complete the task. Their feedback helped us decide which concepts to refine and proceed to final design.
Final design
Select the services
Design Challenge 01
How might we introduce new features to users clearly and without confusion
Key design decisions here:
Use icons and visual cues to clearly highlight available actions.
Separate different service groups, PayPay Balance and PayPay Bank, using different blocks.
Display additional information, such as bank balance, to help users access key details and take action smoothly.
Design Challenge 02
How might we help users operate from mobile to ATM at the same time
Key design decisions here:
Only display necessary information on the screen, as users are mainly focused on the ATM screen.
Highlight key details, such as the corporate number, to save users time searching for it.
Scan QR code on ATM
Enter the number in ATM
Design Challenge 03
How might we help users feel more confident and worry less about their transactions
Key design decisions here:
Use illustrations to guide users through the transition from their mobile screen to ATM operations.
Reassure them with a message like, "You can close this page at any time" (このページはいつでも閉じることができます) to reduce uncertainty.
Provide a clear CTA to the transaction history page, allowing users to confirm whether their transaction was successful.
Ending Screen
We successfully launched the feature, but customer service inquiries increased...
We analyzed the details and found most inquiries came from a specific flow. Though it affected few users, solving it would benefit all the users.
We identified 3 major issues:
😖
Users found the setup process challenging and got lost easily
🤔
PayPay and PayPay Bank mistaken for each other
🫨
Top-up users were confused by the new screen
Second Iteration
Before
After
😖 Users found the setup process challenging and got lost easily
🤔 PayPay and PayPay Bank mistaken for each other
→ Add a half-sheet to clarify actions
🫨 Top-up users were confused by the new screen
→ Add a tutorial dialog to introduce the new screen and guide users on the updated behavior.
Customer service inquiries dropped by 13% after the iteration was released.
Success metrics
We’ll keep monitoring customer service inquiries and other key data to keep improving the user experience.
01
📥 CS inquiry
02
✅ Transaction success rate
03
⏳Transaction completion time
Learning
Throughout this project, I gained several important 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. Open communication during the initial stages can prevent potential roadblocks later.
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. This way, you can create a smoother user experience.
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.
These lessons have reinforced the importance of proactive communication, rigorous testing, and adaptability in creating user-centered designs.
