Prism

Prism

Onboarding for a product analytics tool.

Onboarding for a product analytics tool.

Self initiated concept, Product design, end to end, Desktop web app, The systems piece

Self initiated concept, Product design, end to end, Desktop web app, The systems piece

View below

The short version

Most onboarding case studies show the happy path: nice forms, a friendly welcome, a finish screen. The real work is everywhere else. The waiting state while data hasn't arrived yet, the empty feed, the skip that has to feel safe, the exact moment the first event lands. Prism is an onboarding flow for a product analytics tool built around those moments, ending on the thing that actually hooks a new user: their first real insight.

Why I made this

I wanted a piece that proves I can do the unglamorous part of product design, the system work that reads as senior. Onboarding is the perfect test, because it's where most products quietly lose people, and where the hard problems hide in the parts nobody screenshots.


Product analytics was the right subject because it has a real activation problem of its own. The user has to connect a data source before the product does anything. That gap, between signing up and seeing value, is the whole challenge. If you design that bridge well, you've designed the hardest part of any B2B tool.

Who it's for

A product or growth person setting up an analytics tool for their team. They're busy, a little skeptical, and they've abandoned three of these before because nothing happened after sign-up. They don't want a tour. They want proof the thing works, fast.

The bet: value before the finish line

The whole flow is built around one decision. Don't make people earn the payoff by completing setup. Give them a real win inside the flow itself.


So onboarding doesn't end on a "you're all set" screen. It ends on an actual insight, an activation funnel built from the events they just connected, with the biggest drop-off called out in plain language. The moment that usually takes an analyst a week happens before they've even finished onboarding. That's the hook.

The part most people fake: the connect step

Connecting a data source is the make or break moment, and it's almost always designed as a static screenshot of a code snippet. That skips the actual experience, which is waiting.


In Prism, you pick your source, get the snippet, and then a live feed sits in a calm "listening for events" state. Nothing is wrong, nothing is loading forever, it's just honestly waiting. The second an event arrives, the feed flips to "receiving data," the indicator goes green, and Continue unlocks. There's a send a test event option for people who don't want to wait on their own integration.


That empty-to-live transition is the single most important moment in the whole flow, and it's the one a screenshot can never show. Designing the waiting state, not just the success state, is the actual job.

Designing the in-between states

The senior work in onboarding is the states nobody celebrates:


  • The empty event feed, written as an invitation, not a blank box. It tells you exactly what happens next and roughly when.

  • The skip, on the invite step, designed to feel like a smart choice rather than a failure. Good onboarding knows when to get out of the way.

  • The disabled Continue, which says "waiting for first event" instead of just going gray, so the user always knows what's holding them up.

  • The validation, quiet until you need it, never scolding.


None of these are glamorous. All of them are where real products live or die.

Bold and branded, on purpose

The brief asked for bold, so I built a brand instead of a theme. Prism, because product analytics is exactly that: raw light in, a clear spectrum out. That metaphor runs through everything. The logo is a beam hitting a prism and splitting. The palette is a deep ink with that refracted spectrum as the only color. And the step progress on the left panel is the spectrum filling in band by band, so the structure carries the meaning instead of decorating it, raw events on one end, clear answer on the other.


Bricolage Grotesque for headlines that have some confidence to them. One violet for every action. A precise mono for the code and the live data, so the technical moments feel real.

What I cut, and why

I left out billing, SSO config, deep workspace settings, and a product tour. A real analytics tool has all of it. But onboarding has exactly one job, get the user to their first insight, and everything that didn't move them toward that moment got cut. The flow is four steps because four steps is what the job needs, not because four felt tidy.

What I'd test next

It's a concept, so the questions, not the numbers:


  • Does ending on a real insight actually lift activation, or do people bounce off the funnel because it's not their data yet

  • Is the live event feed reassuring, or does an empty feed read as broken before the first event lands

  • Does the test event shortcut help, or does it let people skip the real integration and stall later


I'd watch five people set this up with their own product and mark every spot they hesitate or reach for the docs. Those hesitations are the next sprint.

What I took from it

Starting from a metaphor instead of a screen gave the whole thing a spine. Color, type, the signature, the copy, they all fell out of one idea instead of getting bolted on.


And value should come before the finish line, not after it. The product that proves itself inside onboarding is the one people actually keep.

Let’s connect
Contact me on social or email me if you have any questions 🙌

Let’s connect
Contact me on social or email me if you have any questions 🙌

@2026 Bryan Chiu

@2026 Bryan Chiu