Personalized Membership Card
Personalized Membership Card
Personalized Membership Card
Make the membership card a natural part of checkout to drive frequent use and improve payment UX
Make the membership card a natural part of checkout to drive frequent use and improve payment UX
Make the membership card a natural part of checkout to drive frequent use and improve payment UX
Project Background
Project Background
Project Background
Prior statistics showed that users who linked a membership card had higher purchase frequency and spend within the channel. To close a key competitive gap and reduce churn risk, we integrated the membership card into the payment flow, driving repeat-use behavior and establishing a data foundation for future partnership expansion
Prior statistics showed that users who linked a membership card had higher purchase frequency and spend within the channel. To close a key competitive gap and reduce churn risk, we integrated the membership card into the payment flow, driving repeat-use behavior and establishing a data foundation for future partnership expansion
Problem
Problem
How might we enable users to quickly present and switch membership-card barcodes during checkout, so they can complete payment and earn points seamlessly?
How might we enable users to quickly present and switch membership-card barcodes during checkout, so they can complete payment and earn points seamlessly?
Constraints & Challenges
Constraints & Challenges
High Flexibility in presenting memebership card
High Flexibility in presenting memebership card
The order of presenting membership cards is determined by the merchant. The payment flow must support instant display and switching while minimizing the risk of scanning the wrong barcode.
The order of presenting membership cards is determined by the merchant. The payment flow must support instant display and switching while minimizing the risk of scanning the wrong barcode.
Knowledge gap & multi-card management
Knowledge gap & multi-card management
Many users are unaware that points can be earned automatically during payment, which weakens their motivation of using the feature.
Many users are unaware that points can be earned automatically during payment, which weakens their motivation of using the feature.
Most users have multiple membership cards, so adding and managing experience must be intuitive and efficeint
Most users have multiple membership cards, so adding and managing experience must be intuitive and efficeint
Design Goals
Design Goals
User Need
User Need
How might we
How might we
enable users to quickly find, show, and switch membership card barcodes at checkout, while reducing mis-scans and user anxiety
enable users to quickly find, show, and switch membership card barcodes at checkout, while reducing mis-scans and user anxiety
Business Goal
Business Goal
How might we
How might we
encourage users to use membership cards in JKOPay more often to earn points, driving higher retention and customer lifetime value
encourage users to use membership cards in JKOPay more often to earn points, driving higher retention and customer lifetime value
Design Process
Design Process
Design Process
Desk research
Desk research
To ensure meaningful insights, I selected competitors from two perspectives:
To ensure meaningful insights, I selected competitors from two perspectives:
Feature reference
Presenting and switching membership cards during checkout
Presenting and switching membership cards during checkout
Membership card management (add, edit, and sorting flows)
Membership card management (add, edit, and sorting flows)
Interaction Details & UX
Review common UI patterns and user mental models to guide interaction design, improving intuitiveness and consistency.
Review common UI patterns and user mental models to guide interaction design, improving intuitiveness and consistency.
Survey Research
Survey Research
Internal data showed that users who linked a membership card had significantly higher purchase frequency and spending, while key competitors already offered similar capabilities. To close this gap and reduce churn risk, we ran a survey to validate the strength of demand and key pain points for embedding membership cards into the payment flow, informing both product design and partnership strategy.
Internal data showed that users who linked a membership card had significantly higher purchase frequency and spending, while key competitors already offered similar capabilities. To close this gap and reduce churn risk, we ran a survey to validate the strength of demand and key pain points for embedding membership cards into the payment flow, informing both product design and partnership strategy.
Research Question:
Do users need a unified way to manage and present membership cards at checkout to reduce effort and friction?
Do users need a unified way to manage and present membership cards at checkout to reduce effort and friction?
Core Hypotheses
Users want membership cards to integrate into the payment flow because it makes checkout faster and more convenient.
Users want membership cards to integrate into the payment flow because it makes checkout faster and more convenient.
At checkout, users currently switch between multiple apps or physical cards to present membership cards, which is time-consuming and cumbersome
At checkout, users currently switch between multiple apps or physical cards to present membership cards, which is time-consuming and cumbersome
Outcome-led messaging drives higher comprehension and acceptance than technical explanations
Outcome-led messaging drives higher comprehension and acceptance than technical explanations
Methodology
Method:
Method:
Online survey
Online survey
Valid responses:
Valid responses:
1,400
1,400
Target audience:
Target audience:
Active users (Bronze ~ Premium tiers) + Churned users
Active users (Bronze ~ Premium tiers) + Churned users
Research Insights
Users want to “present faster and check out faster”
Users want to “present faster and check out faster”
89.2% showed high interest in a personalized membership card feature
89.2% showed high interest in a personalized membership card feature
43.6% said they already use membership cards, but the current process requires switching between multiple apps at checkout
43.6% said they already use membership cards, but the current process requires switching between multiple apps at checkout
Design Thinking
Membership-card integration should prioritize minimum steps as the core value, reducing the time cost of finding and switching cards at checkout
Design Thinking
Membership-card integration should prioritize minimum steps as the core value, reducing the time cost of finding and switching cards at checkout
Knowledge Gap: Low Awareness of Existing Membership-Card Support
Knowledge Gap: Low Awareness of Existing Membership-Card Support
25% of respondents were unaware that JKOPay already supports “pay and earn points automatically” for some merchants.
25% of respondents were unaware that JKOPay already supports “pay and earn points automatically” for some merchants.
Open-ended feedback repeatedly mentioned: “I didn’t know I could link a membership card.”
Open-ended feedback repeatedly mentioned: “I didn’t know I could link a membership card.”
Design Thinking
Beyond building the feature, we need visible, in-context feedback that creates an aha moment.
Design Thinking
Beyond building the feature, we need visible, in-context feedback that creates an aha moment.
Membership Cards Are high-frequency, but checkout order varies
Membership Cards Are high-frequency, but checkout order varies
76.1% present a membership card for most purchases
76.1% present a membership card for most purchases
47.8% said the presentation order varies by merchant, and 44.8% reported owning 1–5 membership cards
Design Thinking
The Checkout experience must support flexible order + instant switching, while minimizing the risk of mis-scans.
Design Thinking
The Checkout experience must support flexible order + instant switching, while minimizing the risk of mis-scans.
Design Highlights
Design Highlights
Design Highlights
I primarily led the membership-card presentation experience within the payment flow, as well as the add-new-card flow.
I primarily led the membership-card presentation experience within the payment flow, as well as the add-new-card flow.
Flexible Checkout Order
Flexible Checkout Order
Enable users to present and switch barcodes instantly at checkout while reducing cashier mis-scans, by aligning with existing habits to keep the learning curve low.
Enable users to present and switch barcodes instantly at checkout while reducing cashier mis-scans, by aligning with existing habits to keep the learning curve low.
Before Payment
During Payment
After Payment
Card Display
Card Display
Reused the existing panel to minimize the learning curve.
Reused the existing panel to minimize the learning curve.
Displayed one barcode at a time to reduce cashier mis-scans and simplify the experience for users.
Displayed one barcode at a time to reduce cashier mis-scans and simplify the experience for users.
Adding Card
Adding Card
Increased flexibility: regardless of the entry path, users can switch to other add methods on the same screen.
Reduced steps: users can add a card quickly and use it immediately at checkout.
Point-Earning Reminder
Point-Earning Reminder
Embedded the value of “auto points / card linking” into the payment flow.
Embedded the value of “auto points / card linking” into the payment flow.
Provided clear, moment-of-purchase reminder that points were earned automatically, strengthening user understanding and trust
Provided clear, moment-of-purchase reminder that points were earned automatically, strengthening user understanding and trust
Design Documentation
Design Documentation
Design Documentation
I wrote a handoff spec covering component usage, interaction logic, and motion details, enabling accurate implementation and improving collaboration efficiency and product quality.
I wrote a handoff spec covering component usage, interaction logic, and motion details, enabling accurate implementation and improving collaboration efficiency and product quality.
I wrote a handoff spec covering component usage, interaction logic, and motion details, enabling accurate implementation and improving collaboration efficiency and product quality.
Learnings & Reflections
Learnings & Reflections
Make unpredictable checkout flows feel predictable
Checkout order is often merchant-driven, so I designed for flexibility instead of control, enabling quick switching, scanning patterns, and clear feedback to help users act confidently in any scenario.
Awareness gaps can be more costly than feature gaps
A working feature won’t be adopted if users don’t understand it at the right moment. Designing an in-context “aha moment” is essential to drive real usage.
Learnings & Reflections
Technical Collaboration & Implementation
Worked closely with engineers to define interaction logic and ensure feasibility of the three-stage panel behavior across iOS and Android platforms.
UX Strategy & Guidance
Some features weren’t instantly intuitive, requiring strategic onboarding and visual cues to help users discover, understand, and appreciate their value.
( 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!