The Onboarding Tour and the Header Compass
How a new tenant goes from “where do I click first” to “I know what each module is for” without watching a Loom video — and why the compass icon stays in the header for the months after.
New tenants need a clear first run, not a guessing game of clicking around until something happens. The onboarding tour gives them that guided start: where the dashboard lives, what each module is for, and which areas belong to their role.
The hub tour
On first sign-in the platform auto-prompts a tour of the home dashboard: the role-tuned widgets the tenant sees, the modules in the sidebar, the user menu, the notification bell. The tour is dismissible at any step and it only auto-prompts once — a tenant who clicked through it on day one doesn’t see it again on day three. The hub tour ends with a question: “want a deeper tour of any module?”
Nine module tours
Saying yes to a module tour drops the user into a guided walk of that module. Nine of them ship: Core (receiving, grading, erasure), Market (verified listings, deal rooms), Auction (publishing a lot, watching, bidding), Escrow (deposit, ship-guard, release), Trade-In (the customer flow and the operator side), Sourcing (bidding on requests), Compliance (certs, evidence packages, audit trail), Admin (platform operations and the support toolbox), Settings (tenant configuration, users, and where each setting applies). Each tour is independent — the user picks which ones to take and in which order.
The header compass
An icon in the header — a small compass — is the resume button. Clicking it opens the tour catalog and shows which tours have been taken, which are partial, which haven’t been started. A user three months in who realises they’ve never used Auction can pick the Auction tour from the compass instead of having to remember where the tour was. The compass is quiet — it doesn’t blink, doesn’t pulse, doesn’t demand attention. It’s a button that waits.
How the tours work
The tours use driver.js for the highlight overlays and the step navigation. Each step pins to a real DOM element with a stable selector — when the underlying UI changes, the tour content gets updated alongside it (a renamed button means the tour selector and the tour copy both change). Steps are short: 1–3 sentences, one screenshot’s worth of UI, one button to advance. A complete module tour averages 6–10 steps.
Dismiss + resume
A tour is interruptible at any step. Pressing Esc, clicking outside, or hitting Skip exits the tour with the progress saved. Returning via the compass picks up where the user left off, or restarts from the top. Multiple tours can be in-progress at once (started Trade-In, paused, started Auction); the compass surfaces both with their progress states.
Why on-screen vs. video
Because a Loom video pauses on a different screen than the user’s. The on-screen tour pins to the user’s actual UI: their tenant’s actual data, their role-tuned widgets, their language preference. A new operations lead doesn’t need to translate from the video to their screen — the tour is already on their screen.