Onboarding flow · 2023

HarborTeaching by doing — an onboarding that never says "click here".

An onboarding flow that teaches by doing. It never says "click here" — the interface makes the next step obvious instead.

Role

Product design + prototyping

Year

2023

Stack

React · Framer Motion · Amplitude

+41%
Reached core action
5 to 1
Onboarding steps
-63%
Onboarding drop-off

Theproblem.

The old onboarding was a five-step coach-mark tour. Users dismissed it and then could not find the one feature the whole product depended on.

WhatI did.

  1. 01

    Replaced the tour with a real task using the real interface, seeded with sample data so nothing could go wrong.

  2. 02

    Used motion to direct attention to the next affordance rather than annotating it with a tooltip.

  3. 03

    Made every step skippable and resumable, because a tour you cannot leave is a hostage situation.

Whatchanged.

Users finish onboarding having already done the core task once. Activation moved from a tutorial metric to a real one.