Clubs
Clubs
First Time User Experience
First Time User Experience
ROLE
ROLE
Junior Product Designer
Junior Product Designer
TEAM
TEAM
Ryan Cheng (Head Designer)
1 Project Manager
4 Developers
Ryan Cheng (Head Designer)
1 Project Manager
4 Developers
DURATION
DURATION
November 2024 - January 2025
November 2024 - January 2025
Clubs
First Time User Experience
ROLE
Junior Product Designer
TEAM
Ryan Cheng (Head Designer)
1 Project Manager
4 Developers
DURATION
November 2024 - January 2025
Brief
Brief
Introduced an onboarding flow to guide new users and improve engagement.
Introduced an onboarding flow to guide new users and improve engagement.
Previously, new users entered the app without direction, leading to confusion. The onboarding flow highlights key features, sets expectations, and ensures a smooth introduction to Clubs.
Previously, new users entered the app without direction, leading to confusion. The onboarding flow highlights key features, sets expectations, and ensures a smooth introduction to Clubs.
Contribution
Contribution
Contribution
Designed a first time user experience that is engaging and personalized.
Designed a first time user experience that is engaging and personalized.
Designed a first time user experience that is engaging and personalized.
I created the onboarding flow by defining the user journey, integrating future marketing efforts, and making onboarding fun, interactive, and tailored to each user.
I created the onboarding flow by defining the user journey, integrating future marketing efforts, and making onboarding fun, interactive, and tailored to each user.
I created the onboarding flow by defining the user journey, integrating future marketing efforts, and making onboarding fun, interactive, and tailored to each user.
Challenge
Challenge
Challenge
Seamlessly integrate onboarding without disrupting the app experience.
Seamlessly integrate onboarding without disrupting the app experience.
Seamlessly integrate onboarding without disrupting the app experience.
The onboarding needs to feel natural while support future marketing efforts and ensuring users quickly understand and engage with the platform.
The onboarding needs to feel natural while support future marketing efforts and ensuring users quickly understand and engage with the platform.
The onboarding needs to feel natural while support future marketing efforts and ensuring users quickly understand and engage with the platform.
Goal
Goal
Goal
Make onboarding effortless and rewarding to drive long term engagement.
Make onboarding effortless and rewarding to drive long term engagement.
Make onboarding effortless and rewarding to drive long term engagement.
The goal was to introduce users to Clubs in a way that is intuitive, motivating, and encourages immediate participation.
The goal was to introduce users to Clubs in a way that is intuitive, motivating, and encourages immediate participation.
The goal was to introduce users to Clubs in a way that is intuitive, motivating, and encourages immediate participation.
Brief
Club is a platform that emphasizes accountability and community for personal growth and goal achievement.
Users join themed clubs, participate in challenges, and track their progress. Using blockchain technology, it motivates consistency and offers rewards for dedication.
CONCEPT DEVELOPMENT
CONCEPT DEVELOPMENT
CONCEPT DEVELOPMENT
Crafting the Onboarding Flow
Crafting the Onboarding Flow
Crafting the Onboarding Flow
Problem
Discovery
Problem
Discovery
Problem
Discovery
A lack of clear onboarding led to a major-drop off in new users before they could engage with the app.
A lack of clear onboarding led to a major-drop off in new users before they could engage with the app.
A lack of clear onboarding led to a major-drop off in new users before they could engage with the app.
As marketing efforts and collaboration grew, new users struggled to navigate the app or understand its purpose. Required authentication steps for security and blockchain led to a steep drop-off from app downloads to completed logins.
As marketing efforts and collaboration grew, new users struggled to navigate the app or understand its purpose. Required authentication steps for security and blockchain led to a steep drop-off from app downloads to completed logins.
As marketing efforts and collaboration grew, new users struggled to navigate the app or understand its purpose. Required authentication steps for security and blockchain led to a steep drop-off from app downloads to completed logins.
Tracking user drop-off from download to engagement
Tracking user drop-off from download to engagement
Tracking user drop-off from download to engagement
📲
📲
📲
100%
100%
100%
users
users
users
download the app
download the app
download the app
🔓
🔓
🔓
70%
70%
70%
users
users
users
sign in
sign in
sign in
📥
📥
📥
19%
19%
19%
users
users
users
create a club
create a club
create a club
We needed to design an onboarding flow that felt intuitive, exclusive, and engaging — especially for users coming from marketing promotions.
We needed to design an onboarding flow that felt intuitive, exclusive, and engaging — especially for users coming from marketing promotions.
We needed to design an onboarding flow that felt intuitive, exclusive, and engaging — especially for users coming from marketing promotions.
🗝️ Key question:
🗝️ Key question:
🗝️ Key question:
How do we make onboarding fun, engaging, and intuitive without overwhelming new users?
How do we make onboarding fun, engaging, and intuitive without overwhelming new users?
How do we make onboarding fun, engaging, and intuitive without overwhelming new users?
Research
Research
Research
Conducting user interviews
Conducting user interviews
Conducting user interviews
Participants were asked to navigate the sign-up process without guidance, and many expressed confusion about the app's purpose, where to start, and how to engage. Their feedback highlighted key pain points that informed our onboarding design.
Participants were asked to navigate the sign-up process without guidance, and many expressed confusion about the app's purpose, where to start, and how to engage. Their feedback highlighted key pain points that informed our onboarding design.
Participants were asked to navigate the sign-up process without guidance, and many expressed confusion about the app's purpose, where to start, and how to engage. Their feedback highlighted key pain points that informed our onboarding design.
Elisa S.
Elisa S.
Elisa S.
"I kept resending the email verification because it wasn't coming through. I must have tried at least seven times. Eventually, I gave up. Then, 20 minutes later, I got all seven emails at once."
"I kept resending the email verification because it wasn't coming through. I must have tried at least seven times. Eventually, I gave up. Then, 20 minutes later, I got all seven emails at once."
"I kept resending the email verification because it wasn't coming through. I must have tried at least seven times. Eventually, I gave up. Then, 20 minutes later, I got all seven emails at once."
Marcus M.
Marcus M.
Marcus M.
"I didn't get why I had to enter a PIN code. There were so many security checks and it felt unnecessary. It was all a bit over the top in my opinion."
"I didn't get why I had to enter a PIN code. There were so many security checks and it felt unnecessary. It was all a bit over the top in my opinion."
"I didn't get why I had to enter a PIN code. There were so many security checks and it felt unnecessary. It was all a bit over the top in my opinion."
Lana S.
Lana S.
Lana S.
"When I finished signing up, I had no idea what to do. Someone gave me a quick explanation, but there were so many layers to it that I just felt lost and unsure of how to navigate anything."
"When I finished signing up, I had no idea what to do. Someone gave me a quick explanation, but there were so many layers to it that I just felt lost and unsure of how to navigate anything."
"When I finished signing up, I had no idea what to do. Someone gave me a quick explanation, but there were so many layers to it that I just felt lost and unsure of how to navigate anything."
How might we…
How might we…
How might we…
Turning research into action
Turning research into action
Turning research into action
The interviews allowed us to identify key friction points in the current onboarding process. These insights guided our solution and our design decisions to create an engaging onboarding experience.
The interviews allowed us to identify key friction points in the current onboarding process. These insights guided our solution and our design decisions to create an engaging onboarding experience.
The interviews allowed us to identify key friction points in the current onboarding process. These insights guided our solution and our design decisions to create an engaging onboarding experience.
💢 Pain Points
💢 Pain Points
💢 Pain Points
💡 Insight
💡 Insight
💡 Insight
Verification delays & repetitive attempts
Users had to resend email verifications multiple times leading to abandonment before sign-up.
How might we…
Ensure a fast and seamless verification process to reduce user frustration?
Unnecessary security steps
Excessive authentication checks, like PIN codes were redundant and discouraged users.
How might we…
Simplify security steps without compromising safety?
Lack of guidance after sign-up
Users were left confused about what to do next, feeling lost in the app's many features.
How might we…
Provide an engaging introduction that helps users navigate the app effortlessly?
Solution
Solution
Solution
Bridging gaps in onboarding with research-backed solutions
Bridging gaps in onboarding with research-backed solutions
Bridging gaps in onboarding with research-backed solutions
We redesigned the onboarding flow to reduce verification delays, remove unnecessary security steps, and clarify the user journey. Our goal was to ensure users could quickly access the app, understand its purpose, and have something to do.
We redesigned the onboarding flow to reduce verification delays, remove unnecessary security steps, and clarify the user journey. Our goal was to ensure users could quickly access the app, understand its purpose, and have something to do.
We redesigned the onboarding flow to reduce verification delays, remove unnecessary security steps, and clarify the user journey. Our goal was to ensure users could quickly access the app, understand its purpose, and have something to do.
01 Optimizing required inputs for efficiency
01 Optimizing required inputs for efficiency
01 Optimizing required inputs for efficiency
Prioritized essential inputs upfront
Security questions moved to a later stage to reduce friction
Focused on verification speed without compromising security
Prioritized essential inputs upfront
Security questions moved to a later stage to reduce friction
Focused on verification speed without compromising security
02 New flow improvements
02 New flow improvements
02 New flow improvements
Referral code first: ensures users from marketing campaigns land directly in their intended club
Instant phone number verification: eliminates authentication delays
Clear, linear flow: guides users step by step to the end
DESIGN PROCESS
DESIGN PROCESS
DESIGN PROCESS
Onboarding & FTUX Feature
Onboarding & FTUX Feature
Onboarding & FTUX Feature
EMPATHIZE
EMPATHIZE
EMPATHIZE
Feature Requirements
Feature Requirements
Problem Discovery
Establishing requirements for the onboarding flow
Establishing requirements for the onboarding flow
Establishing requirements for the onboarding flow
Taking into account the key pain points in onboarding, we identified essential features to improve user flow and engagement.
Taking into account the key pain points in onboarding, we identified essential features to improve user flow and engagement.
Taking into account the key pain points in onboarding, we identified essential features to improve user flow and engagement.
01
Enable easy referral-based onboarding to instantly connect users with their clubs.
Enable easy referral-based onboarding to instantly connect users with their clubs.
Enable easy referral-based onboarding to instantly connect users with their clubs.
02
Implement fast phone number verification to eliminate delays and reduce sign-up friction.
Implement fast phone number verification to eliminate delays and reduce sign-up friction.
Implement fast phone number verification to eliminate delays and reduce sign-up friction.
03
Introduce an interactive walkthrough that guides users through key app features.
Introduce an interactive walkthrough that guides users through key app features.
Introduce an interactive walkthrough that guides users through key app features.
04
Encourage immediate engagement by prompting users to join a challenge/explore clubs.
Encourage immediate engagement by prompting users to join a challenge/explore clubs.
Encourage immediate engagement by prompting users to join a challenge/explore clubs.
IDEATE
IDEATE
IDEATE
Onboarding
Onboarding
Onboarding
The onboarding flow includes essential steps like email and phone verification, referral code entry, username selection, and password set up.
The onboarding flow includes essential steps like email and phone verification, referral code entry, username selection, and password set up.
The onboarding flow includes essential steps like email and phone verification, referral code entry, username selection, and password set up.
Original Design
Original Design
Original Design
This was the original onboarding and sign-up process. While it included all necessary inputs, it felt outdated and overly complex. Many steps could be combined or moved to a later stage to make the flow feel shorter and less overwhelming. With our redesign, we streamlined the process and ensured that visuals served a purpose beyond just filling empty space.
This was the original onboarding and sign-up process. While it included all necessary inputs, it felt outdated and overly complex. Many steps could be combined or moved to a later stage to make the flow feel shorter and less overwhelming. With our redesign, we streamlined the process and ensured that visuals served a purpose beyond just filling empty space.
This was the original onboarding and sign-up process. While it included all necessary inputs, it felt outdated and overly complex. Many steps could be combined or moved to a later stage to make the flow feel shorter and less overwhelming. With our redesign, we streamlined the process and ensured that visuals served a purpose beyond just filling empty space.
First Iteration
First Iteration
First Iteration
This was our second to last iteration, streamlining sign-up by removing unnecessary steps. While it improved efficiency, it lacked engagement. As a new app without brand recognition, we needed a more dynamic, gamified experience to retain users.
This was our second to last iteration, streamlining sign-up by removing unnecessary steps. While it improved efficiency, it lacked engagement. As a new app without brand recognition, we needed a more dynamic, gamified experience to retain users.
This was our second to last iteration, streamlining sign-up by removing unnecessary steps. While it improved efficiency, it lacked engagement. As a new app without brand recognition, we needed a more dynamic, gamified experience to retain users.
Final Design
Final Design
Final Design
These are the first screens of the onboarding process. We designed them to be clear, engaging, and aligned with the app's feel. Since most users join through invitations, the referral code appears first. The challenge preview screen reinforces exclusivity with a waitlist-style spot display. To avoid overwhelming new users, we kept the information minimal.
These are the first screens of the onboarding process. We designed them to be clear, engaging, and aligned with the app's feel. Since most users join through invitations, the referral code appears first. The challenge preview screen reinforces exclusivity with a waitlist-style spot display. To avoid overwhelming new users, we kept the information minimal.
These are the first screens of the onboarding process. We designed them to be clear, engaging, and aligned with the app's feel. Since most users join through invitations, the referral code appears first. The challenge preview screen reinforces exclusivity with a waitlist-style spot display. To avoid overwhelming new users, we kept the information minimal.
IDEATE
IDEATE
IDEATE
FTUX
FTUX
FTUX
First time user experience (FTUX) introduces users to the app, guiding them through navigation and key features to ensure they understand its full purpose.
First time user experience (FTUX) introduces users to the app, guiding them through navigation and key features to ensure they understand its full purpose.
First time user experience (FTUX) introduces users to the app, guiding them through navigation and key features to ensure they understand its full purpose.
First Iteration
First Iteration
First Iteration
Hotspots were meant to guide users without a forced walkthrough, but they felt overwhelming with too many clickable elements. Users often skipped them, missing key details. We needed a clearer, more structured approach to keep users engaged without overload.
Hotspots were meant to guide users without a forced walkthrough, but they felt overwhelming with too many clickable elements. Users often skipped them, missing key details. We needed a clearer, more structured approach to keep users engaged without overload.
Hotspots were meant to guide users without a forced walkthrough, but they felt overwhelming with too many clickable elements. Users often skipped them, missing key details. We needed a clearer, more structured approach to keep users engaged without overload.
Final Design - Decision 1
Final Design - Decision 1
Final Design - Decision 1
Instantly start with a personal club to streamline onboarding
Instantly start with a personal club to streamline onboarding
Instantly start with a personal club to streamline onboarding
Creating a club and a challenge felt redundant—users thought setting up a club meant they had already created a challenge. To simplify, we automatically placed them in their own personal club, letting them start a challenge instantly. We kept the mascot and gamified elements to make onboarding more fun and interactive.
Creating a club and a challenge felt redundant—users thought setting up a club meant they had already created a challenge. To simplify, we automatically placed them in their own personal club, letting them start a challenge instantly. We kept the mascot and gamified elements to make onboarding more fun and interactive.
Creating a club and a challenge felt redundant—users thought setting up a club meant they had already created a challenge. To simplify, we automatically placed them in their own personal club, letting them start a challenge instantly. We kept the mascot and gamified elements to make onboarding more fun and interactive.
Final Design - Decision 2
Final Design - Decision 2
Final Design - Decision 2
Guide users through key app features with an optional walkthrough at every step
Guide users through key app features with an optional walkthrough at every step
Guide users through key app features with an optional walkthrough at every step
This walkthrough keeps onboarding simple and clear. Users are guided through key app features with 'Next' buttons, while a skip option ensures flexibility. Introducing the flow immediately increases engagement, and highlighted elements help users quickly understand functionality without feeling overwhelmed.
This walkthrough keeps onboarding simple and clear. Users are guided through key app features with 'Next' buttons, while a skip option ensures flexibility. Introducing the flow immediately increases engagement, and highlighted elements help users quickly understand functionality without feeling overwhelmed.
This walkthrough keeps onboarding simple and clear. Users are guided through key app features with 'Next' buttons, while a skip option ensures flexibility. Introducing the flow immediately increases engagement, and highlighted elements help users quickly understand functionality without feeling overwhelmed.
FINAL DESIGN
FINAL DESIGN
FINAL DESIGN
Final UI & Prototype
Final UI & Prototype
Final UI & Prototype
Finalized onboarding and first time user experience flow
Finalized onboarding and first time user experience flow
Finalized onboarding and first time user experience flow
**Some parts of the flow, like the challenge creation survey, are still in progress, with a placeholder screen in place.
**Some parts of the flow, like the challenge creation survey, are still in progress, with a placeholder screen in place.
**Some parts of the flow, like the challenge creation survey, are still in progress, with a placeholder screen in place.
REFLECTION
REFLECTION
REFLECTION
Next Steps
Next Steps
Next Steps
Gamified animations and usability testing
Gamified animations and usability testing
Gamified animations and usability testing
This flow was shaped by user interviews, feedback, and time constraints as marketing efforts ramped up. Next, we aim to enhance gamification by introducing an animated mascot and interactive elements, making onboarding feel like an engaging journey rather than a rigid process. With more users joining, usability testing is essential to validate our design choices and refine the experiences further.
This flow was shaped by user interviews, feedback, and time constraints as marketing efforts ramped up. Next, we aim to enhance gamification by introducing an animated mascot and interactive elements, making onboarding feel like an engaging journey rather than a rigid process. With more users joining, usability testing is essential to validate our design choices and refine the experiences further.
This flow was shaped by user interviews, feedback, and time constraints as marketing efforts ramped up. Next, we aim to enhance gamification by introducing an animated mascot and interactive elements, making onboarding feel like an engaging journey rather than a rigid process. With more users joining, usability testing is essential to validate our design choices and refine the experiences further.
REFLECTION
REFLECTION
REFLECTION
Takeaways
Takeaways
Takeaways
🔍 Minimizing cognitive load for faster user engagement
🔍 Minimizing cognitive load for faster user engagement
🔍 Minimizing cognitive load for faster user engagement
Eliminating unnecessary steps, like auto-creating a personal club, helps users reach value faster. Prioritizing immediate value over redundant setup ensures users quickly understand the app’s purpose instead of getting lost in unnecessary processes.
Eliminating unnecessary steps, like auto-creating a personal club, helps users reach value faster. Prioritizing immediate value over redundant setup ensures users quickly understand the app’s purpose instead of getting lost in unnecessary processes.
Eliminating unnecessary steps, like auto-creating a personal club, helps users reach value faster. Prioritizing immediate value over redundant setup ensures users quickly understand the app’s purpose instead of getting lost in unnecessary processes.
📊 Designing flows around user intent, not just UI
📊 Designing flows around user intent, not just UI
📊 Designing flows around user intent, not just UI
Placing the referral code upfront ensured users from marketing campaigns landed where they expected, reinforcing the need to align onboarding with acquisition strategies. I learned to adapt onboarding based on user context, as different apps and flows require tailored approaches.
Placing the referral code upfront ensured users from marketing campaigns landed where they expected, reinforcing the need to align onboarding with acquisition strategies. I learned to adapt onboarding based on user context, as different apps and flows require tailored approaches.
Placing the referral code upfront ensured users from marketing campaigns landed where they expected, reinforcing the need to align onboarding with acquisition strategies. I learned to adapt onboarding based on user context, as different apps and flows require tailored approaches.
🕹️ Gamification should feel natural, not forced
🕹️ Gamification should feel natural, not forced
🕹️ Gamification should feel natural, not forced
I now understand that gamification works best when it enhances usability rather than dictating the experience. It should guide users intuitively without overwhelming them. Instead of forcing engagement, it should reinforce key actions seamlessly within the user journey.
I now understand that gamification works best when it enhances usability rather than dictating the experience. It should guide users intuitively without overwhelming them. Instead of forcing engagement, it should reinforce key actions seamlessly within the user journey.
I now understand that gamification works best when it enhances usability rather than dictating the experience. It should guide users intuitively without overwhelming them. Instead of forcing engagement, it should reinforce key actions seamlessly within the user journey.
Thanks for stopping by, let's connect!
Thanks for stopping by, let's connect!
Got a budding idea, a design challenge, or just want to say hi? I'm all ears.
Got a budding idea, a design challenge, or just want to say hi? I'm all ears.
designed & coded by alli chu🌷
designed & coded by alli chu🌷