Product / Onboarding UX

Onboarding flow in WeWeb

A five-step, onboarding flow that gives users a personalized glimpse of their result before they ever see a signup form.

Role: UI and flow logic, built from a client-provided design spec
Company: Brave Leadership
Timeline: Live status unconfirmed
Team: Kenneth + client design spec
Impact: No metrics tracked for this flow specifically

Overview

This flow precedes the Super Objective (SO) Tool itself, opening with "You're about to discover your Super Objective™." It's structured as a problem-agitation-solution sequence: a multi-select resonance screen, a single-select screen narrowing those picks to one pain point, a "here's what that's costing you" consequence screen, a positive reframe, then the transition into the full SO Tool.

Problem

Getting a user to commit to a self-discovery tool cold is a hard ask, so the flow needed to build buy-in by giving users an early, personalized sense of the payoff before asking for anything.

Process

Five steps: multi-select resonance → single-select narrowing → cost framing → positive reframe → transition into the SO Tool.

The reframe step is the hinge of the flow: a selected pain point like "I'm stuck and don't know why" flips to a paired positive outcome, "You see the path forward," with a supporting benefit list.

Solution

Designed the UI and wireframe in Figma and rebuilt the design and flow logic in WeWeb, including conditional logic that personalizes the reframe and outcome copy based on the user's earlier answers.

SO Tool welcome screen reading "You're about to discover your Super Objective™", with supporting copy and a "Let's Get Started" button — Welcome / intro screen

Multi-select screen asking the user to select 3 options that resonate most, showing a grid of pain-point tiles with three highlighted — Resonance screen (multi-select)

Single-select screen asking which pain point is most challenging right now, listing only the three the user picked on the previous screen with one highlighted and a "Selected: 1/1" counter — Pain-point selection (single-select)

Red-bordered consequence screen headed "Here's what that is costing you", listing nine costs tied to the selected pain point above a "Flip to What's Possible" button — "Here's what that's costing you": consequence screen

Reframe screen showing "I'm stuck and don't know why" becoming "You see the path forward", with a supporting grid of nine benefits — Reframe screen

Super Objective™ is a trademark of Brave Leadership.

Results

No completion or conversion metrics exist for this flow specifically. It's tracked separately from the SO Tool's own 63% completion figure.

My role

Kenneth designed the UI and built the flow logic in WeWeb from a design spec the client provided. He did not originate the underlying content or copy strategy for this flow.

Let's talk.

Open to remote roles in digital marketing, marketing automation, and web development. I reply within a day.

kenjsangalang@gmail.com

Email me →

linkedin.com/in/kenneth-jon-sangalang-tech

View profile →

GitHub

github.com/ken-turtle-learner

See the code →

Available now · Remote