- Murray Bunton / Designer
Onboarding Refactor
A reimagined onboarding flow powered by an adaptive template system that yielded great results
Role: Design & Build
Tech: React, TypeScript, Next, TipTap
Date: 2025
Main collaborators:
Background
Onboarding is a key make-or-break moment for any product and Guidelines' flow was functional, but extremely forgettable.
Beyond the basic, uninspiring stepped form, the core issue was what waited at the end of it: a blank canvas. Guidelines already had a deep library of powerful, flexible blocks, but the barrier to starting was often too high.
We knew we could do better. So we split the fix into three connected problems: how the flow felt, how quickly the product understood a brand, and how directly that understanding became something real.
Three problems, one flow
Solve these together and a brand goes from a folder of assets to a fully dressed workspace in the time it takes to answer a few onboarding questions:
A flow that you want to finish
An accordion-like step flow that visibly grows with every answer, so progress feels tangible rather than administrative.
A product that understands your brand
An algorithm that infers colour, logo, and type presets from whatever's uploaded, so nobody has to make decisions they're not ready to make yet.
A template that speaks your design language
A system that plugs the inferred theme straight into one of Murray's templates, live, before onboarding even ends.
A flow that grows with you
The old flow never demonstrated why any of it mattered. It was a generic setup wizard with nothing to inspire. Its replacement needed to be engaging and a little joyful, visibly carrying someone towards a real starting point, not just the end of a form.
I designed and built an accordion-like step flow that borrows from the layout lines in a type specimen: each finished step folds into a slim rule, and the next grows open beneath it, so the flow gets visibly taller as you go. It turns "four steps left" into something that feels like progress.
Drag the slider to see the transformation from functional to polished
Teaching the product to understand your brand
The instinct is to ask: upload your logo, tell us your primary colour, pick a heading font. But onboarding is the wrong moment for that many decisions: most people have never thought about their "tertiary colour". So we flipped it: the product makes an informed first guess, and people can correct us later, once they've got something real to react to.
Colour
Scored by brightness, saturation, and area, then checked against harmony maps like complementary and triadic to infer a primary, secondary, tertiary, and neutral.
Logos
Uploaded marks are sorted into the formats a template needs: wordmark, logotype, horizontal lockup, icon or symbol.
Typography
Fonts are read by how they're used, so headings and body copy sort themselves, without anyone labelling either.
A visual representation of the brand theme algorithm result
One brand, five starting points
None of that brand-reading matters unless it goes somewhere. Murray designed the templates, and I built the plumbing that injects the inferred theme. Each one is authored in TipTap, walked node by node, with string placeholders swapped for the brand's own tokens.
Because the system understands a brand rather than just holding its assets, the same upload can drive several genuinely distinct templates: not palette swaps of one layout, but different structures suited to different kinds of brand.
Template
Brand
Toggle between all five templates and three example brands to see how each structure adapts to a different upload
A system that keeps working
The token system doesn't clock off once onboarding ends. It's the same engine underneath the page builder itself. Add a new section or swap a colour months later, and it isn't a one-off recompute; every new block already speaks the brand's language.
Every section within a template re-composes itself around the brand's own presets, live in the builder
Cared for, and inspired
This is where the flow, the brand engine, and the templates stop being three separate projects. The accordion grows through each step while the engine reads what's uploaded and renders it live into one of five templates, as part of the flow itself. There's no separate "now pick a template" step — by the time someone reaches it, the product has already picked a strong starting point for them.
The goal was to hold two feelings at once: that the user is being looked after, and that they're already itching to take the reins and build value from their brand. A flow that shows its work earns trust in a way a checklist never will.
A full walkthrough of the updated flow
80%
increase in onboarding completion rate
5x
more personalised starting templates for every new brand
Key takeaway:
Great defaults compound. When the first thing someone sees already feels like theirs, trust follows before a single guide is even published.