Product Designer
Onboarding flow
Overview
Service Start helps Bits of Good teams accelerate nonprofit website builds with reusable, customizable boilerplate code for common product needs.
What we built
Scalable UI components and systems that can be reused across nonprofit projects.
Why it mattered
Reusable onboarding and boilerplate patterns save time, development effort, and nonprofit budget.
Personal contribution
I focused on nonprofit admins and volunteers, turning signup into a guided sequence that tells users what to do next without overwhelming them.
Constraint
The flow had to use existing Bits of Good design-system components.
Goal
Keep onboarding clear and simple for both nonprofit admins and volunteers.
Approach
The onboarding design works by controlling pacing, separating mental models, guiding progress, and keeping each screen visually focused.
Step-based structure
Split onboarding into joining an organization, setting up a profile, and exploring features.
Grouped information
Separated organization details from personal information to create clear mental boundaries.
Guided progression
Made the high-contrast Next button the primary path, with Back and Skip placed as secondary actions.
Reduced clutter
Avoided mixing unrelated fields so each screen stayed minimal and easy to parse.
Impact
The final onboarding sequence lets new users enter Service Start with less cognitive load and a stronger sense of where they are in the process.
01
Goal
Help users complete setup without confronting every field and decision at once.
Fix
Distributed content into focused screens and used progress indicators plus a dominant Next action.
The flow supports confidence, forward movement, and easier comprehension before users reach the dashboard.
Takeaways
This project sharpened how I think about designing within constraints: the value came from hierarchy, pacing, and mental-model alignment rather than inventing new UI.
Mental
models matter
Step-based, information-heavy tasks are easier when screens match how users naturally group information.
Systems
shape hierarchy
Working inside a design system shifted the challenge toward layout clarity and screen-level decisions.
More
feature previews
With more time, I would add short videos or screenshots to strengthen users’ product understanding.
