HEP B FREE NETWORK
HEP B FREE NETWORK
HEP B FREE NETWORK
HEP B FREE NETWORK

Improving first-time user onboarding

Improving first-time user onboarding

Improving first-time user onboarding

Role

Product Designer

Product Designer

Product Designer

Type of Project

Web App

Web App

Web App

Onboarding

Onboarding

Onboarding

Tools

Figma

Figma

Figma

Lottie

Lottie

Lottie

overview

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.

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.

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

Onboarding Focuses: Website Launch + Advisor Session

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

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

Impact
Impact
1
Clear path to scale

Using advisor-led onboarding as a learning phase informed a self-guided experience designed to scale as more chapters joined the network.

2
Reduced advisor overhead

Moving repeatable guidance out of one-on-one support reduced manual follow-ups and allowed advisors to focus on higher-value coaching.

3
Lower cognitive load

Introducing guidance incrementally helped non-technical members stay focused on what mattered next without feeling overwhelmed.

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.

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

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

strategy

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.

Onboarding Roadmap

onboarding evolution

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.

➡︎

Onboarding checklist

➡︎

8-step "Launch Website" article with video guidance

➡︎

Advisor check-ins to ensure member progress and smooth onboarding

➡︎

Help Center for further guidance and to reduce advisor support

Website Setup Guide

Help Center

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.

Overwhelming setup

Members felt overwhelmed by the steps to get their website launch ready.

Clinic bottleneck

Members frequently got stuck gathering hepatitis B clinic info for their local clinic directory.

Support overhead

Advisors spent significant time tracking and nudging members.

User Feedback & Insights from Phase 1 Onboarding

Future scalable onboarding
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.

In-page guidance allows users to learn the website builder by making changes in real time, rather than following instructions in a separate window.

In-place editing prompts action directly where content needs editing.

Progress feedback reinforces momentum and keeps users engaged.

Attention indicators helps users quickly identify which pages still need atttention before launch.

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.

Expandable task sections reduce cognitive load by organizing tasks into manageable groups rather than presenting a single long list.

Anchored links bring users directly to pages where they need to perform their task.

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.

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.

Multi-select reduces setup time by allowing users to add multiple clinics to their directory.

AI confidence score builds confidence and trust in feature and links to official clinic sources for further detail verification.

Let's work together!

lsportis@gmail.com

Let's work together!

Let's work together!

lsportis@gmail.com

Let's work together!

lsportis@gmail.com