Membership Tier Card Design
Membership Tier Card Design
Membership Tier Card Design
Seamless Upgrades with Privacy-First Design
Seamless Upgrades with Privacy-First Design
Seamless Upgrades with Privacy-First Design
Project Background
Project Background
Project Background
Over 60% of users never viewed the membership page, showing low awareness of the program and upgrade incentives. To improve visibility and boost engagement, we moved tier benefits to the home screen. I designed the Membership Tier Benefits Card to highlight key rewards and encourage upgrades.
Over 60% of users never viewed the membership page, showing low awareness of the program and upgrade incentives. To improve visibility and boost engagement, we moved tier benefits to the home screen. I designed the Membership Tier Benefits Card to highlight key rewards and encourage upgrades.
Problem
Problem
Problem
Membership info lacks natural visibility in daily user flows.
Membership info lacks natural visibility in daily user flows.
Users mainly focus on payments and transfers, rarely checking tier status.
Users mainly focus on payments and transfers, rarely checking tier status.
Tier upgrades have no clear prompts, reducing engagement and motivation.
Tier upgrades have no clear prompts, reducing engagement and motivation.
Constraints & Challenges
Constraints & Challenges
Constraints & Challenges
Single entry point
Single entry point
The membership card is the only access to the full tier page, requiring both clear communication and intuitive interaction.
The membership card is the only access to the full tier page, requiring both clear communication and intuitive interaction.
Privacy control
Privacy control
Users should be able to choose whether to show or hide their tier level to avoid social pressure or unwanted exposure.
Users should be able to choose whether to show or hide their tier level to avoid social pressure or unwanted exposure.
60%+ of users
had never explored the membership tier page on their own.
Design Goals
Design Goals
User Need
User Need
How might we
How might we
help users easily track their membership status and progress, enhancing engagement and a sense of achievement?
help users easily track their membership status and progress, enhancing engagement and a sense of achievement?
Business Goal
Business Goal
How might we
How might we
increase the visibility of the membership program in daily flows to boost upgrade rates and user activity?
increase the visibility of the membership program in daily flows to boost upgrade rates and user activity?
60%+ of users
had never explored the membership tier page on their own
60%+ of users
had never explored the membership tier page on their own
60%+ of users
had never explored the membership tier page on their own
Visual Design
Visual Design
Visual Design
Tier Labeling
Reinforce awareness
Marketing Message
Upgrade incentives messages to drive clicks
Hide/Show Toggle
Privacy control allowing users to display or hide tier info
Tier Avatar
Personalized tier badge for quick recognition
Tier Labeling
Reinforce awareness
Marketing Message
Upgrade incentives messages to drive clicks
Hide/Show Toggle
Privacy control allowing users to display or hide tier info
Tier Avatar
Personalized tier badge for quick recognition
Tier Labeling
Reinforce awareness
Marketing Message
Upgrade incentives messages to drive clicks
Hide/Show Toggle
Privacy control allowing users to display and hide tier info
Tier Avatar
Personalized badge for quick recognition
Design Process
Design Process
Desk Research
Desk Research
Reviewed local and global apps with membership systems, focusing on:
Reviewed local and global apps with membership systems, focusing on:
Progress Indicators
Progress Indicators
Observe how progress bars, animations, or tier guides help users understand their current level and upgrade goal
Observe how progress bars, animations, or tier guides help users understand their current level and upgrade goal
Privacy Interactions
Privacy Interactions
Observe UI patterns such as eye icons, blurred info, or flip cards that balance privacy and provides intuitive interaction
Observe UI patterns such as eye icons, blurred info, or flip cards that balance privacy and provides intuitive interaction
Design Thinking
Design Thinking
Based on the desk research, I focused on the following strategies
Based on the desk research, I focused on the following strategies
Information Hierarchy
Information Hierarchy
Prioritize upgrade progress and benefit differences to improve clarity
Prioritize upgrade progress and benefit differences to improve clarity
Interaction Design
Interaction Design
Balance transparency with a sense of security
Balance transparency with a sense of security
Visual Style
Visual Style
Enhance user experience while reinforcing brand perception
Enhance user experience while reinforcing brand perception
Usability Testing
Usability Testing
To validate whether the Membership Tier Card was clear and intuitive, I designed task-based scenarios to observe user behavior and understanding:
To validate whether the Membership Tier Card was clear and intuitive, I designed task-based scenarios to observe user behavior and understanding:
1
1
Information Comprehension
Information Comprehension
Ask users to explain their understanding of their current tier card content
Ask users to explain their understanding of their current tier card content
2
2
Privacy Interaction
Privacy Interaction
Have users try hiding their tier status (A/B test with 2 design variations)
Have users try hiding their tier status (A/B test with 2 design variations)
3
3
Benefits Exploration
Benefits Exploration
Ask users to find and review detailed tier benefits
Ask users to find and review detailed tier benefits
Testing Method
Testing Method
Method
Method
Task-based usability testing
Task-based usability testing
Interviewers
Interviewers
5 people
5 people
Evaluation Metrics
Evaluation Metrics
Task completion rate and time
Task completion rate and time
Errors and navigation deviations
Errors and navigation deviations
User understanding of information hierarchy and interaction logic
User understanding of information hierarchy and interaction logic
Key Insights
Key Insights
Visuals alone can't convey tier status
Visuals alone can't convey tier status
Visuals alone can't convey tier status
Adding tier labels significantly improved user recognition of their current level
Adding tier labels significantly improved user recognition of their current level
Card is inutitive, but needs minor tweaks
Card is inutitive, but needs minor tweaks
Card is inutitive, but needs minor tweaks
85% of users successfully tapped the card to view detailed tier info
85% of users successfully tapped the card to view detailed tier info
The tap area for the “eye icon” was too small, affecting usability
The tap area for the “eye icon” was too small, affecting usability
Progress bar is key to upgrade clarity
Progress bar is key to upgrade clarity
Progress bar is key to upgrade clarity
90% of users intuitively understood the progress bar and its related values
90% of users intuitively understood the progress bar and its related values
Most interviewers relied on the bar for context, with numbers serving as secondary support
Most interviewers relied on the bar for context, with numbers serving as secondary support
Final Design
Final Design
Final Design
Membership Tier Card
View Member tier info
View Member tier info
Data Privacy
Data Privacy
Tier Awareness
Tier Awareness
Upgrade Motivation
Upgrade Motivation
全等級會員卡
全等級會員卡
Design Documents
Design Documents
Design Documents
Documented component behavior, interactions, and animations to align design with development and ensure high-quality implementation.
Documented component behavior, interactions, and animations to align design with development and ensure high-quality implementation.
Learnings & Reflections
Learnings & Reflections
Learnings & Reflections
Strategic Thinking Growth
Strategic Thinking Growth
I learned to balance user habits, business goals, and design feasibility.
I learned to balance user habits, business goals, and design feasibility.
Design vs. Privacy
Design vs. Privacy
I had the chance to explore solutions that balance visibility with personal data protection.
I had the chance to explore solutions that balance visibility with personal data protection.
( OTHER PROJECTS )
( 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!
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!
LET’S
( WORK )
TOGETHER
If you like my work,
feel free to contact me!