All case files

Series A, Dev tools

Onboarding that teaches itself

Onboarding that teaches itself

Onboarding that teaches itself

Replaced a ten-step setup wizard with an interactive, in-product walkthrough that gets developers to their first project in minutes.

Role

Design engineer

Team

1 PM, 3 engineers

Timeline

3 months, 2024

View live

Onboarding that teaches itself: product interface

−38%

first-session drop-off

4 min

to a first project

Built with

Figma, React, Motion

The problem

New users hit a ten-step setup wizard before they saw the product. Over half of them left in the first session.

Constraints

The setup steps were real requirements, not fluff, and the API they depended on couldn’t change this quarter.

Design decisions

Let people use the product first and set it up as they go. Every step became a moment inside a real first project.

What I built

Five onboarding concepts prototyped in code and tested with twelve developers, then the winner built in React with Motion transitions and inline hints.

Trade-offs

Deferring setup meant some users hit errors later. We added gentle, contextual prompts instead of blocking them up front.

The result

First-session drop-off fell 38% and the median time to a first project is now four minutes. Setup tickets halved the next quarter.

What I’d do differently

I’d instrument the old wizard properly before redesigning it. We had to guess where people dropped off for the first two weeks.

P.S.

If your Figma file and your product have drifted apart, let’s fix that.

Twenty minutes, no deck. Bring a screen you’re stuck on and I’ll tell you how I’d design and build it, even if we never work together.

© 2026 Noor Avila. Designed in Figma, built in Framer.

Back to top

Create a free website with Framer, the website builder loved by startups, designers and agencies.