Onboarding Redesign @ Scratchbac
Onboarding Redesign @ Scratchbac
Redesigning the in-app onboarding process to reduce user registration dropoff.
Redesigning the in-app onboarding process to reduce user registration dropoff.
Overview
Overview
Overview
Scratchbac, a social app focused on building hyperlocal communities, aimed for a modern rebrand. As part of this overhaul, we set out to redesign the onboarding flow to create a more engaging and streamlined experience for new users.
Scratchbac, a social app focused on building hyperlocal communities, aimed for a modern rebrand. As part of this overhaul, we set out to redesign the onboarding flow to create a more engaging and streamlined experience for new users.
Role & Skills
Role & Skills
Role & Skills
Product Designer
Market Research
Flow mapping
Wireframing
Prototyping
Tools Used:
Figma
Notion
Product Designer
Market Research
Flow mapping
Wireframing
Prototyping
Tools Used:
Figma
Notion
Challenge
Challenge
Challenge
Our main goals and challenges were to:
Develop a more polished and visually appealing design for the entire app.
Enhance the onboarding process to encourage users to complete sign-up.
Decrease the drop-off rate during onboarding to retain more users.
Our main goals and challenges were to:
Develop a more polished and visually appealing design for the entire app.
Enhance the onboarding process to encourage users to complete sign-up.
Decrease the drop-off rate during onboarding to retain more users.
Screens from the old onboarding
Screens from the old onboarding
Screens from the old onboarding
The Problem
The Problem
The Problem
Scratchbac’s old onboarding process struggled to keep users engaged. Key challenges included:
Rebrand Misalignment: The outdated design clashed with the app’s upcoming rebrand.
High Drop-Off Rates: Users were abandoning the flow before finishing setup.
Clunky Data Collection: The process felt overwhelming, asking for too much too soon.
Scratchbac’s old onboarding process struggled to keep users engaged. Key challenges included:
Rebrand Misalignment: The outdated design clashed with the app’s upcoming rebrand.
High Drop-Off Rates: Users were abandoning the flow before finishing setup.
Clunky Data Collection: The process felt overwhelming, asking for too much too soon.
Research and Insights
Research and Insights
Research and Insights
With limited resources, we got creative:
Competitive Deep Dive: Studied onboarding flows from apps like Instagram, Tinder, and Bumble to spot trends in engagement and tone.
Key Takeaways:
Conversational language made users feel at ease.
Skippable steps reduced pressure without sacrificing data collection.
Visual appeal kept users hooked even in longer flows.
With limited resources, we got creative:
Competitive Deep Dive: Studied onboarding flows from apps like Instagram, Tinder, and Bumble to spot trends in engagement and tone.
Key Takeaways:
Conversational language made users feel at ease.
Skippable steps reduced pressure without sacrificing data collection.
Visual appeal kept users hooked even in longer flows.
Approach
Approach
Approach
We focused on balancing simplicity, aesthetics, and emotional connection:
1. Aligning with the Rebrand:
Fresh Visuals: Introduced the new brand colors, fonts, and playful illustrations to set a modern, community-driven tone.
2. Streamlining the Journey:
Essential Data Only: Trimmed the setup to critical info (e.g., email, location) and kept all other details (like interests) optional, where users could easily skip.
3. Boosting Engagement:
Friendly Tone: Swapped formal language for casual phrases to give friendly neighbourhood vibes.
Early Wins: Let users create their first post during onboarding, creating a “sunk cost” effect to encourage completion.
We focused on balancing simplicity, aesthetics, and emotional connection:
1. Aligning with the Rebrand:
Fresh Visuals: Introduced the new brand colors, fonts, and playful illustrations to set a modern, community-driven tone.
2. Streamlining the Journey:
Essential Data Only: Trimmed the setup to critical info (e.g., email, location) and kept all other details (like interests) optional, where users could easily skip.
3. Boosting Engagement:
Friendly Tone: Swapped formal language for casual phrases to give friendly neighbourhood vibes.
Early Wins: Let users create their first post during onboarding, creating a “sunk cost” effect to encourage completion.
Overview of user flow
Overview of user flow
Overview of Information Architecture
Overview of Information Architecture
Key Iterations
Key Iterations
Key Iterations
First Try (Pretty but Basic):
We had to push out an intermediate version to match the app rebranding.
Aesthetic overhaul with minimal engagement. Looked great but didn’t fix drop-offs.
First Try (Pretty but Basic):
We had to push out an intermediate version to match the app rebranding.
Aesthetic overhaul with minimal engagement. Looked great but didn’t fix drop-offs.
Second Try (Engagement Focus):
With more time on hand, we worked on the second iteration.
Added conversational prompts, progress rewards (e.g., celebratory animations), and a post-creation hook.
Added optional prompts where users could add their hobbies/interests so we could get to know them better.
Second Try (Engagement Focus):
With more time on hand, we worked on the second iteration.
Added conversational prompts, progress rewards (e.g., celebratory animations), and a post-creation hook.
Added optional prompts where users could add their hobbies/interests so we could get to know them better.
We also restructured individual screens to create a more fun and interactive experience, while still collecting the necessary data. A small icebreaker section was added at the end, which would display on users' profiles, encouraging them to connect more meaningfully with others even before chatting.
We also restructured individual screens to create a more fun and interactive experience, while still collecting the necessary data. A small icebreaker section was added at the end, which would display on users' profiles, encouraging them to connect more meaningfully with others even before chatting.
Results
Results
Results
The new onboarding flow became a gateway to happier users:
Fewer Drop-Offs: Saw a notable decrease in users abandoning the process midway (about 20%).
Higher Engagement: New users spent more time exploring the app after onboarding.
Positive Feedback: Users described the flow as “friendly” and “easy,” aligning with Scratchbac’s community-first mission.
The new onboarding flow became a gateway to happier users:
Fewer Drop-Offs: Saw a notable decrease in users abandoning the process midway (about 20%).
Higher Engagement: New users spent more time exploring the app after onboarding.
Positive Feedback: Users described the flow as “friendly” and “easy,” aligning with Scratchbac’s community-first mission.
We even created the highly requested dark mode!
We even created the highly requested dark mode!
Key Learnings
Key Learnings
Design for Emotion: A little personality (like playful copy or animations) can turn a functional process into a memorable experience.
Let Users Dabble: Allowing actions like post-creation before account completion builds investment.
Constraints Spark Creativity: Limited resources pushed us to borrow smartly from proven patterns instead of reinventing the wheel.