End-to-end design process, User testing
I am responsible for the top-up experience at PayPay, where many users add funds via ATMs. We're now expanding ATM features like cash-out and integrating PayPay Bank’s contactless deposit and withdrawal. Our goal is to create an all-in-one platform where users can access everything they need with just their mobile phone.
Feedback from users
Outcome Showcase
Users can now access all ATM features with just their smartphone—no need to carry or worry about forgetting a bank card. As demonstrated in the video, simply scan a QR code and enter a PIN to withdraw cash.
Understanding the business requirements
Bank contactless deposit/withdrawal
We’re integrating contactless deposit/withdrawal to unify the user experience after merging with PayPay Bank.
E-money cash-out
Users freqently request an ATM cash-out feature to offer more flexibility in managing their cash
Since both features operate within the ATM system, we plan to implement them all together.
BUT!
I feel like adding the E-money cash-out feature goes against our goal of encouraging users to keep their money in the app for spending. So, I reached out to the PM to talk it through.
In the end, we decided to put the cash-out feature on hold and focus on PayPay Bank’s contactless deposit/withdrawal first.
Understanding the users
Identify the user flow
I visited an ATM and tested the process using competitor apps and benchmark common elements to include in the flow.
⊕
Gather insights from customer support team
I collaborated with the customer support team to gather around 300 user complaints. We then grouped them into key categories for further ideation.
Review the data
I analyzed the data to identify where the drop-off rate and failure rate were highest and investigated the underlying reasons.
Insights from the research
Mapping the user journey across traditional and contactless flows to identify key pain points.
Traditional flow vs. Contactless flow
Pain Point ①: The initial setup takes time and has a high failure rate
→ We need to verify users' identities to prevent fraud. Each verification method has a different process, making it difficult for users to understand what to do and which one to choose.
Pain Point ②: Lack of clear instructions after scanning QR codes
→ After scanning the QR code on the ATM screen, users see a corporate number on their phone, which they need to enter on the ATM. However, there are no instructions guiding them to switch to the ATM, leaving them confused and unsure of what to do next.
Pain Point ③: After completing a withdrawal/deposit, there’s no clear confirmation message
→ Due to technical constraints, it's challenging to display the withdrawal/deposit amount and total balance during the contactless flow, leaving users uncertain if the transaction was successful.
Ideation
I created wireframes and flows mapping the interaction between mobile and ATM screens.
Some key points about the design solution:
Simplify the initial setup by reducing steps and pre-filling user data with consent.
Use design patterns to guide users on which device to focus on after scanning.
Provide clear confirmation and feedback when the transaction is completed.
User Testing
After sharing and reviewing the draft design, I received diverse feedback. It felt like we needed a clearer direction moving forward, so I saw this as an opportunity to bring in user thoughts.
I created different screens options and tested them with users.
A total of 8 participants joined the study We asked about their first impressions about the screens, what caught their attention, and where they would interact to complete the task.
Some key insights:
The CTA needs to be more highlighted, as some users struggled to recognize it as tappable.
Choosing between two financial institutions takes time and causes hesitation.
The key message on the screen lacks hierarchy, making it easy to overlook.
Final design
Choose withdraw/deposit
Second Iteration
After launching the feature, we found that customer service inquiries increased. We immediately analyzed the details by checkiing the inquiries and data points of the flow.
We identified 3 major issues:
😖
Users found the initial setup got lost easily
🤔
PayPay and PayPay Bank mistaken for each other
🫨
Balance Top-up users were confused by the new screen
Before
After
😖 Users found the setup process challenging and got lost easily
🤔 PayPay and PayPay Bank features mistaken for each other
→ Adding a half-sheet before the next screen to clarify the action.
🫨 Top-up users were confused by the new screen
→ Adding a tutorial dialog to introduce the new screen and guide users on the updated behavior.
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:
Adding haptic feedback to provide users with a strong feedback, helping them feel more confident in their actions.
Before
After
Instead of ending on a static page, once completed, the data will be retrieved through an API from the ATM, displaying the transaction success and amount. Making the experience better.
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.
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.
