UX Design
Mobile APP
Motion Design
Fuxing App | Bank of China
Designing an Offline Payment Flow Using NFC
The Context
Fuxing App is a membership engagement platform built for a specific organization, supporting core functions such as membership fee payments.
The existing online-only payment flow is efficient but makes the act of paying feel too light for a scenario that requires formality and presence. As the bank promotes e-CNY, this project explores how NFC “tap-to-pay” and a redesigned payment interface can bring back a clearer sense of participation and a more tangible moment of completion.
In this project, I proposed the design direction, and I led the interface design, motion design, and the final user testing.
My Role
Conceptualization
Design
Usability testing
The team
1 PM
1 Designers
2 developers
Duration
3 months
Original Payment Flow
——Yima L., organizational member and app user
01
Problem
As a product built on the bank’s platform, the bank expects the Fuxing App to integrate e-CNY, a national-level financial initiative, into its daily payment scenarios. This requires adding an NFC “tap-to-pay” capability that works with e-CNY in the membership fee payment flow.
For the organizations using this platform, paying membership fees is a key interaction between the organization and its members. They expect this action to strengthen members’ sense of belonging and cohesion. However, the existing online flow relies on a lightweight tap. It is efficient, but it reduces the formality and sense of presence the action should carry. As a result, the payment becomes an almost “unfelt” completion.
Simply replacing the online button with a faster NFC payment would not solve the problem. It also would not deliver the experience organizations expect. With the support of the new technology, they want to shift the process from a purely online flow back to an offline, face-to-face action. Their goal is to rebuild a payment experience with a stronger sense of participation and presence.
New Technology
The NFC tap-to-pay capability of e-CNY needs to be introduced into the offline payment scenario, which the current online flow cannot support.
Lightweight Flow
A simple “tap to pay” cannot represent a formal action. It lacks participation and fails to create a clear sense of involvement.
Lack of Feedback
After payment, only basic information is shown. Without symbolic feedback, it is hard to form a sense of completion.
The Challenge
“How might we introduce an NFC payment flow that turns offline membership payments into meaningful, memorable, and ceremonial moments?”
02
Thinking
Key Insights
To shape a design direction that supports the formality required in offline scenarios, I focused my thinking on three key aspects: perception, physical action, and feedback. These insights then informed the design strategies that followed.
Visual perception: Users need to feel that they are performing a formal action during the payment process, while still following the physical logic of an offline scenario.
Physical action: Bodily movement is more memorable than a simple tap, and the NFC “touch” enables real participation.
Feedback: Symbolic moments of completion—such as the record book and the payment receipt—provide psychological confirmation and make the action easier to acknowledge and remember.
- Solution 01
Scenario framing: Making the process visible
To prevent the payment process from feeling too light, I rebuilt the UI to combine the physical “payment notebook” with a modern interface. Through page-turning motion, the required information is placed into this simulated notebook, giving the process a more formal tone and allowing users to see what they are doing.
- Solution 02
Action guidance: Turning participation into a tangible action
A simple tap is too light to represent a true confirmation. I used animation and triggered feedback to guide users through the NFC tap action, replacing a virtual button with a physical gesture. This shifts the experience from “tapping once” to “performing an action”.
- Solution 03
Ceremonial closure: Making completion a moment of recognition
To address the lack of completion feedback in the original flow, I introduced symbolic elements that form a ceremonial closure: payment records and a collectible digital receipt.
Together, these elements create a clear end moment that feels confirmed and recorded.
03
The Solution
Detailed presentation of three solutions
Scenario framing
Using a three-step structure: open, confirm, and complete, I combined key information such as identity details, unpaid months, and amount confirmation into an immersive, concrete “Payment notebook” scene. By visualizing the entire payment process, users can feel a stronger sense of formality and presence while completing the action.
Action guidance motion
I used motion to guide users through the NFC tap action, making the participation process more natural and tangible. Since NFC is a relatively unfamiliar gesture, I created clear and intuitive animations to demonstrate the tapping process, allowing users to understand it at first glance and learn the new interaction with minimal effort.
Ceremonial closure: digital receipt
I designed a traceable digital receipt making the end moment more symbolic, and more memorable after the payment is completed. Users are no longer simply “completing a payment,” but completing a formal act of participation. The collectible receipt also enriches their digital assets and further enhances engagement.
04
Impact & Learnings
A shift from simply completing a payment task to completing something visible and meaningful.
Impact
The design improvements introduced NFC while giving the payment action a stronger sense of presence and ceremony. Users had a clearer perception of “completing the payment,” and their psychological feedback became more defined. The design not only delivered the payment function but also added emotional experience value.
Within the first 90 days after launch, internal analytics event tracking showed that 12% of users who completed the payment shared their digital receipt on external social platforms. From 227 valid survey responses, most users stated that they liked the new payment experience and were willing to recommend it to other members.
What I learn
I learned how to work closely with PMs and engineers to align a new payment technology (NFC + e-CNY) with real user needs, making sure the new capability delivers experiential value instead of becoming just another technical feature.
12%
Share Rate
Users shared their receipts on social media.
8
Net Promoter Score
A score of 8 indicates a positive overall towards the product.
n = 227