End-to-end design process, User testing
I am responsible for the top-up experience at PayPay, where many users top up via ATMs. Currently, weβre expanding other ATM features, such as cash-out, and integrating PayPay Bankβs contactless deposit and withdrawal to further streamline the experience.
Feedback 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!"
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
Weβre integrating contactless deposit/withdrawal to unify the platform after merging with PayPay Bank.
Users freqently request an ATM cash-out feature to offer more flexibility in managing their cash
Since the features operate within the ATM system, we plan to implement them together.
BUT!
I feel like adding the 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
To get a feel for how contactless deposit and withdrawal work, I visited an ATM and tested the process using competitor apps.
β
β‘ Gather insights from customer support team
I reached out to the customer support team to understand the most common questions and issues related to contactless deposits and withdrawals, ensuring that the design truly meets user needs.
β’ Review the data
I analyzed the entire flow data to identify where the drop-off rate is highest and detect gaps in the user journey
Insights from the research
I mapped the user journey across traditional and contactless flows to identify key pain points.
Traditional flow vs. Contactless flow
Dive deeper into the problems
β The initial setup takes time and has a high failure rate
We need to verify users' identities to prevent fraud. There are different verification methods, each with its own process.
β‘ Lack of clear instructions after scanning QR codes
After users scan the QR code on the ATM screen, their mobile phone will display a corporate number, which they need to enter on the ATM screen. However, it lacks instructions prompting users to move on to the next step.
β’ 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 to address the issues.
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.
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.
User Testing
I created different screens options and tested them with users alongside other screens in the flow.
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
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
Second Iteration
Before
After
π Users found the setup process challenging and got lost easily
π€ PayPay and PayPay Bank 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.
As a results, customer service inquiries dropped by 13% after the iteration was released and received 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!
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.
