← All work SaaS UI · Product design

Lumen — onboarding that shows the product before the signup ends

A B2B SaaS onboarding flow with a live dashboard preview that builds itself as the user answers — plus the reusable UI kit underneath.

StunningFast
TailwindFramer MotionStorybookFigma
90s To a connected, personalized dashboard Launch live demo ↗
upsurfaced.com/demos/lumen-saas-ui-kit-onboarding.html Open full screen ↗

Context

Activation is where SaaS products die: users sign up, see an empty dashboard, and leave. Lumen is a privacy-safe recreation of a real build — onboarding that engineers the aha-moment into the signup itself.

The problem

Most onboarding asks questions and gives nothing back. The user does the work; the product stays a black box until step four. By then, half of them are gone.

The approach

I designed a four-step flow where the product answers back: as the user names their workspace and picks a goal, a live dashboard preview assembles itself beside the form — their name, their metrics, their chart. Underneath it sits a real design system: buttons, badges, toggles, avatar stacks — documented as a kit so a dev team can ship the rest of the product in the same language.

What the build shows

Step one to a personalized, data-connected dashboard preview in about 90 seconds — with progressive disclosure ("Step 2 takes about 90 seconds") lowering the commitment anxiety at every stage. The component strip proves it's a system, not a screen.

Recreated for confidentiality — a faithful, fully-working mimic of a real production build; client names, branding and data have been fictionalized.

Let's make your business impossible to miss.

A free AI-visibility audit shows you exactly where you stand. No strings. Start there, or book a discovery call.