Team
Aneika, Hiba, Tessa, Lucy, and I
Role
Product Design
Service Start @ Bits of Good
Overview
Service Start is an application developed by Bits of Good to help nonprofits accelerate their website development by providing reusable, customizable boilerplate code for core features.
what we're building
Scalable UI components & Scalable systems
why it matters:
Saves time & development costs
Personal Contribution: Onboarding
I designed Service Start’s onboarding from the ground up for nonprofit admins and volunteers. I simplified a potentially overwhelming signup into a focused step‑by‑step flow, using a clear call‑to‑action and progress indicator to help users know exactly what to do next.
Constraints
Onboarding needed to be built using the existing Bits of Good design system components.
Goals
Keep the onboarding flow as clear and simple as possible for both nonprofit admins and volunteers.
Present information in small, digestible steps so users could process what they were seeing without feeling overwhelmed.
I structured onboarding into three core steps (joining an organization, setting up a profile, and exploring key features), not including the splash and completion screens. Each step focuses on a single overarching task so users only need to think about one type of information at a time.
Organization details and personal information are separated into different steps to create a clear mental boundary between “Organization Information” and the "Personal Information.” This helps users process each section without feeling overloaded.
On each screen, the primary call-to-action is the “Next” button, styled with a high-contrast orange to visually encourage forward progress. “Back” and “Skip” are available but more subtle and placed in secondary positions, since they don’t directly support the primary goal of completing onboarding.
By distributing content across the three steps and avoiding mixing unrelated fields on the same screen, the UI stays minimal and focused, which supports the goal of reducing mental load for new users.
Step-by-step, information-heavy tasks are easier to complete when they’re broken into focused screens that match users’ mental models, which helps reduce cognitive load.
design system -> heirarchy
Working within an existing design system shifted my focus from designing new components to crafting clear hierarchies and layouts at the screen level.
if i had more time
With more time, I would deepen the “explore key features” step by adding short videos or screenshots of specific features to help users build a stronger mental model of how the product works before they reach the dashboard.
