The welcome page a new account lands on today, beside three onboarding-card directions drawn on the app's own tokens. Each one teaches how Tour Dash works in the words of the side that just signed up: an agent hears about cover, vendors and getting paid to cover; a vendor hears about the board, direct invites and Stripe. Flip the board between the two with the switch above it.
Shipped, 22 September. Direction A is the live welcome on tour-dash.pages.dev, and the same deck runs on sample data at /demo/welcome, where the banner's account switcher flips it between an agent and a vendor. It went out close to the board, with these differences:
The welcome page shipped on 12 September is two cards and a check: edit your profile, set up payouts, and any four filled-in areas earn a verified mark. Under it sit three feature cards with looping footage, one per thing the account can do. It is the right size for what it does, which is making an account bookable. What it does not do is walk somebody through the product. A new agent still has to work out on their own that they can both post cover and take it, that a vendor is hired from a different page, and that their card is charged before anybody goes anywhere.
The brief is onboarding cards: a short, ordered set that says how to use the product, for an agent if an agent signed up and for a vendor if a vendor did. The account type is already chosen on the first signup screen and cannot be changed later, so every direction here reads it and shows one deck, never a chooser.
All three directions share the same content: five cards for a vendor, six for an agent, listed in full at the bottom of the page. The card copy is lifted from the live signup and welcome screens where it exists, and the four new lines are written to the same voice. What differs between the directions is where the cards live, how many you see at once, and what the last one asks you to do.
Dribbble's onboarding-cards search could not be loaded from here: the page refuses scripted fetches and the browser extension was not connected this session. Its index was readable through search, and the shots it lists are the idiom the deck direction leans on: a stack of rounded cards, one idea per card, an illustration on top, a title and a line under it, a dot row and a next button, with earlier cards peeking behind the current one.
GetLayers was opened for the section mechanics rather than for a style, since the style is locked to the app's tokens. Three assets shaped the directions. The Stack borrows its sticky pile from Cards Almanac, whose motion contract is preserve-only, so the mock keeps its offsets and tilt values as they ship. The Deck takes its fan-and-peek from the Cards Cascade deck. The Rail is built on the "left heading over rule-separated index rows" composition, the same skeleton the app's own How it works page already uses for its fee table.
| Question | Current | A · Deck | B · Rail | C · Stack |
|---|---|---|---|---|
| First thing read | "Not verified yet, 0 of 4" | What the product is, for your side | "Welcome" and a list of six titles | "Welcome" and a card with a clip |
| Cards seen at once | All five, as a grid | One | All, one open | One, with two peeking |
| Where it lives | /welcome, gated by the profile stamp | A sheet over the dashboard, then /welcome stays for setup | Replaces /welcome | A full-page route before the dashboard |
| Phone | Grid collapses to a long column | Native; it was drawn at 390 first | Rows stack, media drops, still reads | Card stacks vertically; the pile still works at 92vw |
| Skip | "Go to my dashboard" at the bottom | Every card, top right | Top right, always visible | Top right, only control above the pile |
| Setup controls | Two cards, real pop-ups | Last card, same pop-ups | Row 06, same pop-ups | Last card, same pop-ups |
| Where the money is explained | A text link to How it works | Card 5, with a sheet to the fee table | Row 05 | Card 5 |
| Motion | Six looping clips | Swipe with a fan behind; reduced motion drops the fan | Row open and close; nothing else | Sticky pile with tilt; reduced motion flattens to a plain stack |
| Dark theme | Shipped | Inherits | Inherits | Inherits; the paper wash behind the pile needs its dark value |
| Build cost | — | One new component with a card array per side, a swipe handler, a stamp. Small. | Welcome.tsx re-composed, row state, the two cards moved into a row. Small. | New route, sticky layout ported from the GetLayers source, scroll rAF loop. Medium. |
| Biggest risk | — | Six taps before the dashboard; the count and Skip have to be honest about that | It looks like documentation, and people do not read documentation | A takeover on a laptop feels like marketing, not an app you just paid to use |
It answers the brief in the fewest words on the smallest screen, which is where accounts are created. One idea per card, in the order somebody will meet it, and the last card is the setup the welcome page already does. Reduced motion just drops the fan.
Once the deck has been seen, its cards should live somewhere. The rail is that somewhere: /welcome as a read-later list with the setup row at the bottom, reachable from the account menu, not shown on its own.
The pile is the best-looking of the three and the wrong tool for a product someone will open every morning. Its mechanic belongs on the landing page's how-it-works section, where a first impression is the point.
Lines marked shipped are the live welcome and signup copy. The others are new for this report and have been through the same copy pass as the rest of the site.
| # | Agent · Priya | Vendor · Rosa |
|---|---|---|
| 1 | Two ways in, paid the same wayPost a showing, an inspection or an errand when you cannot get to it, and take on the ones other agents post near you. You hire vendors for your listings here too. New. | Agents bring the work to your tradeAgents post what their listings need, and you see the jobs in your trade inside the radius you set. You do not have to go looking for them. New. |
| 2 | Get coverageA showing, an inspection, a walkthrough or an errand. Licensed agents near that address apply, or send it straight to people you pick. Shipped. → Get coverage | Find work near youJobs in your trade, inside the radius you set. Apply at the posted price or name your own. Shipped. → Find work |
| 3 | Or pay a vendorPhotography, staging, cleaning, a locksmith, sign install. Post it to the trade near the property, or hire somebody you have used before. Shipped. → Hire a vendor | Get sent work directlyAn agent can send a job to you by name instead of posting it. Those never reach the public board, so nobody else is competing for them. Shipped. → My jobs |
| 4 | Earn by covering other agentsIt runs both ways. Other agents post work near you, and you are paid when the job is marked complete. Shipped. → Find opportunities | Get paid for itThe card is charged when you are booked, so the money is in before you go. Stripe pays it out once the agent marks the job complete. Shipped. → Open your wallet |
| 5 | How the money movesYour card is charged when you book, and we hold it. Nobody is paid until you mark the job complete. The fee is $5 plus 10% of the price, and never more than $150. New. → Read the fee table | Become bookableStripe has to clear you before anyone can book you, so that step cannot wait. Any four parts of your profile earn the check. New. → Set up with Stripe · Add your details |
| 6 | Verify your profileFill in any four parts of your profile. Stripe counts as one of them. The check tells other agents that a real person set this account up. New. → Add your details · Set up with Stripe | — |