Smartphone ATM

Smartphone ATM

Timeline

Timeline

June 2024 - Dec 2024

June 2024 - Dec 2024

Responsibility

Responsibility

End-to-end design process, User testing

Company

Company

PayPay & PayPay Bank

PayPay & PayPay Bank

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

"Super convenient! I love how I can withdraw and deposit cash without needing my bank card. "

"Super convenient! I love how I can withdraw and deposit cash without needing my bank card. "

"The process is smooth, and the instructions are clear!"

"The process is smooth, and the instructions are clear!"

"Really useful feature! The interface is intuitive, and I can set up easily!"

"Really useful feature! The interface is intuitive, and I can set up easily!"

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

What's contactless deposit/withdrawal?

What's contactless deposit/withdrawal?

What's contactless deposit/withdrawal?

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.

Our high level goals were

  • Make the experience as simple as the traditional cash card flow.

  • Enhance operational efficiency with reasonable technical efforts, as we need to align the engineering teams from PayPay, PayPay Bank, and the third-party ATM team.

  • Standardize the experience across PayPay and PayPay Bank to reflect the merger of the two institutions.

High level goals

Apart from user pain points, I also outlined high-level goals to ensure a clear design direction.

  1. Make the experience as simple as the traditional cash card flow.

  2. Invest reasonable technical efforts and break the implementation into phases if needed.

  3. Standardize the experience across PayPay and PayPay Bank to reflect the merger of two institutions.

Ideation

I created wireframes and flows mapping the interaction between mobile and ATM screens.

Some key points about the design solution:

  1. Simplify the initial setup by reducing steps and pre-filling user data with consent.

  2. Use design patterns to guide users on which device to focus on after scanning.

  3. 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

Scan QR code

Scan QR code

Display Bank number

Display Bank number

Complete transaction

Complete transaction

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

→ Add a progress indicator to show users their current step and next steps.

🤔 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

customer service inquiries dropped by

customer service inquiries dropped by

13%

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:

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.

This is the project summary. Feel free to contact me for more details!

Top ↑

Next

Next

Activity screen revamping →

Activity screen revamping →

ryanchyy@gmail.com

Copy

Copyright © 2025 by Chang Yu.

Made with love and Four Season Teas (30% sugar, less ice)

ryanchyy@gmail.com

Copy

Copyright © 2025 by Chang Yu.

Made with love and Four Season Teas (30% sugar, less ice)

ryanchyy@gmail.com

Copy

Copyright © 2025 by Chang Yu.

Made with love and Four Season Teas (30% sugar, less ice)

Back

Smartphone ATM

Back

Smartphone ATM