Back to home

Prototyping an Onboarding Flow That Actually Converts

Prototyping an Onboarding Flow That Actually Converts

Organisation

Stackwise

Role

Designer

Duration

6 Weeks

Tools & Technologies

FigmaFramerMaze

Problem

Stackwise had an onboarding flow that was bleeding users before they ever saw the core product. 60% of new signups were dropping off at step two. The existing approach tested copy and button colors without addressing the core issue: excessive steps, premature requests, and lack of progress visibility.

Audit of inconsistent buttons, inputs, and cards across the product
Annotated screenshot calling out inconsistent radius, border, and color usage

My role

I owned the full UX redesign — user research, flow mapping, high-fidelity prototyping in Framer, micro-interaction design, and working with the engineering team to spec every interaction for production.

Outcome

  • Onboarding completion rate went from 38% to 84% in 4 weeks of launch

How i solved it

Research Phase

I started where the data was — session recordings of 40 users going through the existing onboarding.

You can't ask for commitment before you've shown value. The flow was asking people to invest before they understood what they were investing in.

Solution Approach

I restructured the entire flow around a single principle — show the product working before asking for anything. Reduced mandatory steps from 7 to 3, repositioned integrations as optional post-activation, and prototyped all micro-interactions in Framer.

Audit of inconsistent buttons, inputs, and cards across the product
Annotated screenshot calling out inconsistent radius, border, and color usage

What shipped

A completely rebuilt onboarding flow — 3 mandatory steps instead of 7, a value demonstration before any integration requests, and smooth transitions between every state.

The prototype was so close to production that engineering said it was the smoothest handoff they'd ever had.

Completion rate went from 38% to 84%, alongside a drop in support tickets in the first two weeks post-launch.

What worked

Watching session recordings before redesigning surfaced the real problem instantly, with no guesswork. Prototyping every state in Framer left engineering with zero ambiguity during the build. Moving the value demonstration to step one turned out to be the single biggest lever on completion rate.

What I'd Do Differently

Test the prototype with real users before handing it to engineering — one confusing step only surfaced after launch. Set up more granular funnel tracking from day one to measure each step individually. Explore a more personalized onboarding path for different user types earlier in the process.

Download