Proof Pack · All families
Reusable Sections
Eight sections, ready to drop in
Every section in the pack, shown in sequence. Import any one on its own, or combine them into new pages. They all share the same Divi 5 variables and presets.
Section 01
Masthead
Full-bleed hero with a proof rail. Opens any case study.
Northsight × Tella · Product Onboarding
Tella Onboarding, Rebuilt
A signup that dropped people at step one became a five-minute path from account to first real value.
Tella is a scheduling tool with a loyal base and a leaky front door. New users signed up, hit a blank dashboard, and bounced. We rebuilt onboarding around the one thing a new user wants: their first scheduled thing, fast.
Client
Tella, scheduling SaaS
Engagement
Onboarding redesign, eight weeks
Scope
Research, flows, UI, and a build-ready system
Section 02
Snapshot and Stat Ledger
At-a-glance cards above a documented-number ledger.
Overview
The work at a glance
Where We Started
Signup ended at an empty dashboard with twelve menu items and no first step. Most new users never created a single event.
What We Changed
We replaced the empty state with a three-step path: connect a calendar, set availability, share a link. First value in under five minutes.
What We Measured
We documented the flow, the screens, and the build. Activation and retention belong to Tella's analytics, so those numbers stay with them.
Section 03
Challenge Band
The problem stated plainly, beside a source note.
The Challenge
The product worked; the front door did not
Tella's core was solid and its fans were vocal. But the first run experience dropped a new user into the full product with no guidance: a blank calendar, a dense sidebar, and no sense of what to do first. The team knew activation was the problem; they needed a first-run experience that earned the second visit, designed and specified so engineering could ship it without guesswork.
Source Material
We worked from session recordings, support tickets, the existing design files, and a week of interviews with new and churned users.
Section 04
Artifact Strip
Three captioned evidence frames in an even row.
Artifact 01
Session recordings, tagged where new users stalled
Artifact 02
The old flow, annotated with every drop-off point
Artifact 03
Interview notes mapped to the missing first step
Section 05
Process Steps
Equal-height numbered steps beside a media panel.
Prototype
A motion loop stands in for the clickable onboarding prototype.
Our Approach
We designed the first five minutes
We mapped the shortest honest path from signup to a user's first real outcome, then designed every screen on it. Connect, set, share. Each step does one thing, shows progress, and skips cleanly. We delivered the flows, the final UI, and a component system specced for the stack Tella already runs, so the handoff was a build, not a translation.
1
Studied session recordings, tickets, and the existing flow.
2
Interviewed new and churned users about the first run.
3
Mapped the shortest path to a user's first real outcome.
4
Designed every onboarding screen and empty state.
5
Shipped a build-ready component system and spec.
Section 06
Evidence Frame
A large interface frame with supporting proof cards.
The Evidence
The redesigned first run
We kept what we designed and shipped separate from activation outcomes, which live in Tella's own analytics.
The rebuilt onboarding as a new user now meets it: connect a calendar, set availability, share a booking link, with progress and a clear first action throughout.
Flow Map
How the old twelve-door dashboard became a three-step path to first value.
Flow Map
The new first run follows the shortest honest path: connect, set availability, share a link, then explore the rest.
Design System
Every screen is built from named components, specced for Tella's stack, so engineering shipped it without redrawing a thing.
What We Did Not Measure
Activation, retention, and revenue sat in Tella's analytics, not ours. We document the work; the numbers stay with the client.
Section 07
Quote and Outcome
A reflection closed by a spined pull-quote.
Reflection
A front door the team could ship and explain
We handed off a first-run experience Tella's engineers built in one sprint, and a system their designers extend without us. The flows, the final screens, and the lead's note below are the record of the work.
“Northsight handed us a first run we could actually ship. New users finally see what Tella does on day one.”
Head of Product, Tella
Section 08
Handoff and CTA Band
The design-system pitch and closing call to action.
Inside the System
Built on a real Divi 5 design system
Every color, type size, spacing step, and component on this page is a named Divi 5 variable or preset. Change one and the whole story restyles, so making it yours is an edit, not a rebuild.
Design Variables
Change one color or type scale in the Variable Manager and the entire page follows. Nothing here is hardcoded, so your rebrand takes minutes.
Element Presets
Mastheads, proof rails, evidence frames, quote panels, and buttons all run on named presets. Restyle one and every match updates with it.
Rows That Stay Even
Card rows hold equal heights no matter how long your content runs. Paste your real copy and the layout keeps its shape on every screen.
Ready For Your Story
The sample case study, labels, and images are isolated for clean swaps. Drop in your own work without untangling a single style.