Cash Top-Up
Cash Top-Up
Cash Top-Up
Easy top-ups — even without a bank account!
Easy top-ups — even without a bank account!
Project Background
Project Background
Based on the product performance, auto top-up and bank transfer top-up exceeded expectations, indicating strong user intent to add funds. At the same time, many users requested a cash top-up option to support scenarios without a bank account or credit card.
Given that bank transfer remains the primary business strategy, the design needed to guide most users toward bank top-ups while still enabling a clear and reliable convenience-store cash top-up flow for users who need it.
Based on the product performance, auto top-up and bank transfer top-up exceeded expectations, indicating strong user intent to add funds. At the same time, many users requested a cash top-up option to support scenarios without a bank account or credit card.
Given that bank transfer remains the primary business strategy, the design needed to guide most users toward bank top-ups while still enabling a clear and reliable convenience-store cash top-up flow for users who need it.
Problem
Problem
How might we, under a bank-first top-up strategy, design a low-friction, low-failure cash top-up flow for users to successfully deposit cash and continue transacting on JKOPay?
How might we, under a bank-first top-up strategy, design a low-friction, low-failure cash top-up flow for users to successfully deposit cash and continue transacting on JKOPay?
Constraints & Challenges
Constraints & Challenges
Cash top-ups rely on time-limited, one-time-use barcodes, requiring clear guidance and proactive reminders to help users complete transactions successfully.
Cash top-ups rely on time-limited, one-time-use barcodes, requiring clear guidance and proactive reminders to help users complete transactions successfully.
Can you provide
a cash top-up function?
Can you provide
a cash top-up function?
I don't have a bank accout,
so I can't top-up money
I don't have a bank accout,
so I can't top-up money
Design Goals
Design Goals
User Need
User Need
How might we
How might we
use cash top-ups to lower the entry barrier, drive first-time transactions, and encourage bank account linking over time?
use cash top-ups to lower the entry barrier, drive first-time transactions, and encourage bank account linking over time?
Business Goal
Business Goal
How might we
How might we
use cash top-ups to lower the entry barrier, drive first-time transactions, and encourage bank account linking over time?
use cash top-ups to lower the entry barrier, drive first-time transactions, and encourage bank account linking over time?
Design Process
Design Process
Top-Up Method Strategy
Top-Up Method Strategy
Design Goal
Design Goal
Bank user
Bank user
Discover new top-up options within the bank transfer flow
Discover new top-up options within the bank transfer flow
Unbanked user
Unbanked user
Enable cash top-ups while encouraging bank account linking
Enable cash top-ups while encouraging bank account linking
Design Solution
Design Solution
Using tabs to present Bank Transfer and Cash Top-Up to reduce switching cost and increase visibility
Using tabs to present Bank Transfer and Cash Top-Up to reduce switching cost and increase visibility
Default to eligible options based on user status, preventing users from entering unsupported flows
Default to eligible options based on user status, preventing users from entering unsupported flows
Provide contextual guidance to enable quick understanding and guidance to complete the bank validation process
Provide contextual guidance to enable quick understanding and guidance to complete the bank validation process
Concept Testing
Concept Testing
To check whether the cash top-up flow is intuitive and consistent with users’ expectations, I ran a task-based scenario test and observed user behavior at key steps. I validated the following three areas:
To check whether the cash top-up flow is intuitive and consistent with users’ expectations, I ran a task-based scenario test and observed user behavior at key steps. I validated the following three areas:
1
Top-up limit
Top-up limit
Validate whether participants correctly understand the maximum allowable top-up amount and applicable balance/transaction limits.
Validate whether participants correctly understand the maximum allowable top-up amount and applicable balance/transaction limits.
2
Risk disclosure design
Risk disclosure design
Compare two disclosure patterns to determine which more effectively communicates barcode time validity and reduces top-up failure risk.
Compare two disclosure patterns to determine which more effectively communicates barcode time validity and reduces top-up failure risk.
3
Barcode Usability
Barcode Usability
Verify whether participants can accurately interpret the amount displayed and the key operational instructions on the barcode screen
Verify whether participants can accurately interpret the amount displayed and the key operational instructions on the barcode screen
Risk Disclosure - Version A
Risk Disclosure - Version A
Risk Disclosure - Version B
Risk Disclosure - Version B
Key Insights
Key Insights
Frequent input errors driven by unclear limitation
Frequent input errors driven by unclear limitation
Most participants did not understand the top-up limit rules or why their input was rejected. Copywriting revision were made to clarify the cause of error and provide an explicit next step guidance
Most participants did not understand the top-up limit rules or why their input was rejected. Copywriting revision were made to clarify the cause of error and provide an explicit next step guidance
Risk disclosure design
Risk disclosure design
Version B helped 90% of participants correctly understand the barcode’s validity. It is also reported that the “Generate now / Generate later” option prevents premature barcode generation ,which in turn lowers the risk of top-up failure.
Version B helped 90% of participants correctly understand the barcode’s validity. It is also reported that the “Generate now / Generate later” option prevents premature barcode generation ,which in turn lowers the risk of top-up failure.
Clear Barcode Amount Information
Clear Barcode Amount Information
Most participants correctly distinguished the payable amount from the credited amount and completed the barcode scanning step without confusion
Most participants correctly distinguished the payable amount from the credited amount and completed the barcode scanning step without confusion
Learnings & Reflections
Learnings & Reflections
Visualizing complex flows and logic
Visualizing complex flows and logic
I turned wireframes and user flows into implementation-ready flowcharts and logic notes, aligning PM and engineering on rules, edge cases, and states—reducing coordination overhead.
I turned wireframes and user flows into implementation-ready flowcharts and logic notes, aligning PM and engineering on rules, edge cases, and states—reducing coordination overhead.
Designing around operational limitations
Designing around operational limitations
For one-time, time-limited barcodes, I built in risk disclosure designs at key steps to prevent errors, improve recovery, and increase successful top-ups and user trust.
For one-time, time-limited barcodes, I built in risk disclosure designs at key steps to prevent errors, improve recovery, and increase successful top-ups and user trust.
( OTHER PROJECTS )
( OTHER PROJECTS )
LET’S
( WORK )
TOGETHER
If you like my work,
feel free to contact me!
LET’S
( WORK )
TOGETHER
If you like my work,
feel free to contact me!
( OTHER PROJECTS )
( OTHER PROJECTS )
( OTHER PROJECTS )
LET’S
( WORK )
TOGETHER
If you like my work,
feel free to contact me!