← 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.

Interactive capability demo · Names, data, and performance figures are illustrative.

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 interactive capability demo built around a realistic operating problem — 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.

Interactive capability demo — built to demonstrate the product experience and technical approach. Names, branding, data, and performance figures are illustrative.

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.