Hep B Free Network provides tools for hepatitis B advocacy groups to launch and grow local chapters.
Hep B Free Network provides tools for hepatitis B advocacy groups to launch and grow local chapters.
Role
Product Designer
Product Designer
Product Designer
Type of project
Web / Onboarding
Web / Onboarding
Web / Onboarding
Tools
Figma
Figma
Figma
overview
Client
Client
Client
Client
The Hep B Free Network (HBFN) helps local hepatitis B advocacy groups by providing coaching, tools, and a simple path to build a digital presence.
The Hep B Free Network (HBFN) helps local hepatitis B advocacy groups by providing coaching, tools, and a simple path to build a digital presence.
The Hep B Free Network (HBFN) helps local hepatitis B advocacy groups by providing coaching, tools, and a simple path to build a digital presence.
The Hep B Free Network (HBFN) helps local hepatitis B advocacy groups by providing coaching, tools, and a simple path to build a digital presence.
Onboarding focus
Onboarding focus
Onboarding focus
Onboarding focus
HBFN’s first onboarding challenge was speed to value. Two big hurdles for new advocacy groups are creating an online presence to show legitimacy and understanding their first steps toward making an impact in their communities.
HBFN’s first onboarding challenge was speed to value. Two big hurdles for new advocacy groups are creating an online presence to show legitimacy and understanding their first steps toward making an impact in their communities.
HBFN’s first onboarding challenge was speed to value. Two big hurdles for new advocacy groups are creating an online presence to show legitimacy and understanding their first steps toward making an impact in their communities.
HBFN’s first onboarding challenge was speed to value. Two big hurdles for new advocacy groups are creating an online presence to show legitimacy and understanding their first steps toward making an impact in their communities.
Our onboarding efforts focused on getting members to launch their website using HBFN's website builder and connecting with an advocacy advisor for a kickoff session.
⟶ Increase activation (website launched + advisor meeting scheduled)
⟶ Reduce advisor support burden over time
⟶ Enable faster chapter launches
⟶ Design onboarding that can scale to many chapters
⟶ Increase activation (website launched + advisor meeting scheduled)
⟶ Reduce advisor support burden over time
⟶ Enable faster chapter launches
⟶ Design onboarding that can scale to many chapters
⟶ Increase activation (website launched + advisor meeting scheduled)
⟶ Reduce advisor support burden over time
⟶ Enable faster chapter launches
⟶ Design onboarding that can scale to many chapters
Onboarding Focuses: Website Launch + Advisor Session
Problem
Problem
Problem
Problem
Learning a new website builder overwhelmed time-constrained advocacy leaders, and heavy reliance on advisors made onboarding difficult to scale.
⟶ Increase activation (website launched + advisor meeting scheduled)
⟶ Reduce advisor support burden over time
⟶ Enable faster chapter launches
⟶ Design onboarding that can scale to many chapters
⟶ Increase activation (website launched + advisor meeting scheduled)
⟶ Reduce advisor support burden over time
⟶ Enable faster chapter launches
⟶ Design onboarding that can scale to many chapters
⟶ Increase activation (website launched + advisor meeting scheduled)
⟶ Reduce advisor support burden over time
⟶ Enable faster chapter launches
⟶ Design onboarding that can scale to many chapters
Solution
Solution
Solution
Solution
The solution was a two-phase onboarding approach that leaned on hands-on guidance early on, then transitioned to a self-guided experience.
⟶ Increase activation (website launched + advisor meeting scheduled)
⟶ Reduce advisor support burden over time
⟶ Enable faster chapter launches
⟶ Design onboarding that can scale to many chapters
⟶ Increase activation (website launched + advisor meeting scheduled)
⟶ Reduce advisor support burden over time
⟶ Enable faster chapter launches
⟶ Design onboarding that can scale to many chapters
⟶ Increase activation (website launched + advisor meeting scheduled)
⟶ Reduce advisor support burden over time
⟶ Enable faster chapter launches
⟶ Design onboarding that can scale to many chapters
Impact
Impact
1
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
Clear path to scale
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
Using advisor-led onboarding as a learning phase informed a self-guided experience designed to scale as more chapters joined the network.
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
2
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
Reduced advisor overhead
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
Moving repeatable guidance out of one-on-one support reduced manual follow-ups and allowed advisors to focus on higher-value coaching.
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
3
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
Lower cognitive load
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
Introducing guidance incrementally helped non-technical members stay focused on what mattered next without feeling overwhelmed.
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
goals
Balancing goals
Balancing goals
Balancing goals
Balancing goals
Given limited time and resources, we aligned early on what success would look like for both the business and our members.
Given limited time and resources, we aligned early on what success would look like for both the business and our members.
Given limited time and resources, we aligned early on what success would look like for both the business and our members.
Given limited time and resources, we aligned early on what success would look like for both the business and our members.
Business goals
Business goals
Business goals
Business goals
⟶ Create process that can scale and reduce advisor support burden
⟶ Enable faster chapter launches
⟶ Demonstrate value quickly through website launch and first advisor session
⟶ Increase activation (website launched + advisor meeting scheduled)
⟶ Reduce advisor support burden over time
⟶ Enable faster chapter launches
⟶ Design onboarding that can scale to many chapters
⟶ Increase activation (website launched + advisor meeting scheduled)
⟶ Reduce advisor support burden over time
⟶ Enable faster chapter launches
⟶ Design onboarding that can scale to many chapters
⟶ Increase activation (website launched + advisor meeting scheduled)
⟶ Reduce advisor support burden over time
⟶ Enable faster chapter launches
⟶ Design onboarding that can scale to many chapters
UX goals
UX goals
UX goals
UX goals
⟶ Reduce cognitive load during first-time setup
⟶ Create early wins to build confidence
⟶ Support non-technical users
⟶ Reduce cognitive load during first-time setup
⟶ Create early wins to build confidence
⟶ Support non-technical users
⟶ Reduce cognitive load during first-time setup
⟶ Create early wins to build confidence
⟶ Support non-technical users
⟶ Reduce cognitive load during first-time setup
⟶ Create early wins to build confidence
⟶ Support non-technical users
strategy
A phased onboarding solution
A phased onboarding solution
To balance time and development constraints with a long-term vision, we split the solution into two phases. Phase 1 delivered a lightweight approach and gave us the opportunity to gather real user insights before investing in a scalable onboarding system that could support a growing number of members.
To balance time and development constraints with a long-term vision, we split the solution into two phases. Phase 1 delivered a lightweight approach and gave us the opportunity to gather real user insights before investing in a scalable onboarding system that could support a growing number of members.
To balance time and development constraints with a long-term vision, we split the solution into two phases. Phase 1 delivered a lightweight approach and gave us the opportunity to gather real user insights before investing in a scalable onboarding system that could support a growing number of members.
To balance time and development constraints with a long-term vision, we split the solution into two phases. Phase 1 delivered a lightweight approach and gave us the opportunity to gather real user insights before investing in a scalable onboarding system that could support a growing number of members.
Onboarding Roadmap
onboarding evolution
What we shipped (MVP)
What we shipped (MVP)
Instead of introducing new, complex onboarding tools, we made small adjustments to existing resources, like setup video-guided articles on the network site, to support users. We prioritized writing clear, reusable guidance and observing how users followed it and interacted with the website builder.
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
➡︎
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
Onboarding checklist
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
➡︎
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
8-step "Launch Website" article with video guidance
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
➡︎
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
Advisor check-ins to ensure member progress and smooth onboarding
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
➡︎
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
Help Center for further guidance and to reduce advisor support
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
Website Setup Guide
Help Center
What we learned
What we learned
Even with few members, the amount of advisor effort required to track progress and nudge users highlighted a model that wouldn’t scale.
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
Overwhelming setup
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
Members felt overwhelmed by the steps to get their website launch ready.
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
Clinic bottleneck
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
Members frequently got stuck gathering hepatitis B clinic info for their local clinic directory.
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
Support overhead
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
Advisors spent significant time tracking and nudging members.
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
User Feedback & Insights from Phase 1 Onboarding
Future scalable onboarding
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
1 Interactive website builder tutorial
This feature provides step-by-step guidance directly within the website builder, so users can follow along as they make changes instead of referencing a separate guide. It helps reduce confusion and keeps setup moving forward.
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
In-page guidance allows users to learn the website builder by making changes in real time, rather than following instructions in a separate window.
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
Progress feedback reinforces momentum and keeps users engaged.
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
In-place editing prompts action directly where content needs editing.
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
Attention indicators helps users quickly identify which pages still need atttention before launch.
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
2 Progress-driven checklist
The checklist guides users through setup by breaking tasks into manageable steps, linking directly to where work happens, and helping them stay on track without needing ongoing advisor follow-ups.
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
Expandable task sections reduce cognitive load by organizing tasks into manageable groups rather than presenting a single long list.
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
Anchored links bring users directly to pages where they need to perform their task.
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
3 AI Clinic Search
AI Clinic Search removes a major setup bottleneck, reducing the time spent researching and removing a common blocker during setup in the website builder.
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
AI Clinic Search is integrated into the website builder and helps advocacy groups find nearby clinics for their site's local clinic directory, allowing them to choose options that best meet the needs of their community.
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
Multi-select reduces setup time by allowing users to add multiple clinics to their directory.
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
AI confidence score builds confidence and trust in feature and links to official clinic sources for further detail verification.
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
They hadn’t updated their website in 7 years, which left them with a website design that looked outdated. Their website content was regularly updated by interns, but without a design system to follow, each intern made updates in their own style (Ruh-roh!).
©2024
Go Back To Top
©2024
Go Back To Top
©2024
Go Back To Top
©2024
Go Back To Top