Report · 5 September 2026

Reference Pages Redesign

How it works, Settings and Profile, brought into the language the rest of the app now speaks. All three were built early and left alone: stacks of white cards in a narrow column, describing a product with a quarter of the features it has today. Two of them also told people things that were not true. Rebuilt as hairline sections with rails, with every number computed from the code that charges it.

Scope /how-it-works, /settings, /profile and /profile/:id, both account types Status Committed to main as 202dba2, 5e42f8d and 3e0418e, and deployed to tour-dash.pages.dev on 2026-09-05

How it works

Five identical cards in one column, describing four features, on a product that now runs three marketplaces and nineteen kinds of work.

Six sections with a contents rail, divided by hairlines rather than boxed. The rail is the only navigation on a page that is otherwise all reading.
A side toggle. The page opens on your own side and lets you read the other one. An agent choosing between two applicants is looking at a decision those applicants also see a screen for, and now they can read it.
Both catalogues in full, the nine agent service types and the ten trades grouped by moment, read from SERVICE_TYPES and PROVIDER_TRADES so the page cannot drift from the app.
Three kinds of deal. Job, lead and referral compared by who pays, when the money moves and what we take. Below sm the four columns stack as blocks, because a table that clips with no affordance is worse than no table.
The fee curve, read at five prices, from splitForPrice, and the lead curve at four from leadSplit. The taper is now visible instead of asserted from one example.
Where the money sits. Escrow on a job, the 72-hour lead dispute window, why a referral is tracked and not held, Stripe payouts gating a booking, and the wallet's three directions.
A map of the app, filtered by side, plus the public job board at /jobs.
Two steps that existed in the app and were mentioned nowhere here: sending a job straight to named people, and receiving one that way.

The What can be posted section: two columns, Agent work with nine entries each carrying an icon, name and one line, and Trade work with ten entries grouped under Before it lists, While it's on market and Closing it out, with By quote marked on the quote-first rows only. — Both catalogues, generated from the same constants the posting flows read.

The What it costs section: two tables side by side, On a job reading twenty-five dollars at thirty per cent down to four hundred dollars at eleven per cent, and On a lead reading ten dollars at thirty-two per cent down to one hundred and fifty dollars at thirteen per cent. — The taper, at real prices. Nothing here is typed in; every figure is computed.

The fee tables at 390 pixels, both fitting the column exactly with price, fee, payout and rate columns intact. — Phone. Both fee tables fit the 342px column with nothing clipped.

The whole rebuilt page read as a vendor: six numbered sections, a six-step flow starting with setting up payouts, then the catalogues, the three kinds of deal, the fee tables, where the money sits, and a shorter Around the app list without Posted jobs, Vendors, Leads or Referrals. — The vendor side. Six steps instead of five, and the app map drops the pages a vendor does not have.

Settings

Here the design problem and the honesty problem were the same problem. The page looked like a settings page while almost nothing on it did anything.

The previous Banking and cards section: the real payout card, and beneath it an Add a card panel with fields for cardholder name, card number, expiry date and CVV, and a full-width amber Add card button. — Before. This form collected a card number and a CVV into React state, saved nothing, and showed "Card added successfully!".

The card form is gone. stripe-checkout already creates and reuses a Stripe customer for the payer, so the card genuinely lives at Stripe and there was never anything here to save. The section says that instead.
The support form is gone. It thanked you and dropped the message. SUPPORT_EMAIL is null until there is an inbox, and the section says so rather than pretending.
Three notification switches are gone. Nothing sends email, SMS or push. In-app notifications are real, and are described.
Eight sections became eight better ones, grouped in the nav into Your account and Policies and help. Below md the row scrolls the section you picked back into view instead of leaving it off the left edge.
Privacy and terms were two-paragraph scaffolding. They now describe what this app does: what is held, what Stripe holds instead, who can see an address, and when contact details are exchanged.
Fees stopped duplicating How it works. The rule and the anchor stay here; the full tables are one link away.
The card shells came off. Sections are a heading, a hairline and blocks. PayoutSetup keeps its card, because it is the one interactive surface on the page.

The rebuilt Payments and payouts section: a grouped nav reading Your account with Notifications, Payments and payouts and Fees, then Policies and help with Cancellations, Privacy, Terms, Common questions and Support. The panel shows the payout card marked Ready, then three hairline-divided blocks headed Your card lives at Stripe not here, Paying is what books it, and Where to see it. — After. No card fields, and the section explains where the card actually is.

The Fees section in dark mode: three blocks headed The rule, The rate falls as the job gets bigger with a See the numbers button, and Nothing comes out of the payout. — Dark. Same tokens, no second design.

Still open. The cancellation terms are unchanged in substance, and nothing in the code enforces them: there is no refund logic behind the 24-hour rule or the 50% fee. They read as policy on the page and are a manual process behind it.

Profile

A header card, two stat tiles and a reviews panel, with every credential rendered as the same grey pill.

Before. Brokerage, licence, key and MLS board as one undifferentiated pill row, and the score said twice within one screen.

The person is the subject. Their name is the h1, not "My profile", with the avatar beside it and insurance and lockbox access as marks under the title.
Facts are separated by kind in a rail: rating and finished jobs, then trade, coverage, turnaround, rate and licence for a vendor, or brokerage and licence for an agent, then MLS boards as the list they are.
The score is said once.
The stat tiles are gone. Earnings sit in the rail and link to the wallet, which is the ledger those figures have to agree with.
An agent can hire a vendor from their profile. The wizard already deep-links on trade and provider, so the button opens straight on the job form with that person chosen. Leave review steps down to outline beside it, keeping one accent on the surface.
Reviews are a list, and both empty states say what produces the first review rather than "No reviews yet" alone.
On a phone the rail sits between About and Reviews, placed explicitly in the grid rather than reordered, so a screen reader gets the same order the eye does.

After. One accent on the surface, and it is the action the page exists for.

Phone. The facts come before the reviews, which is the order the decision is made in.

How it was verified

Headless Chrome over CDP against /demo, which makes no Supabase requests.

Check	Result
Widths	390, 768, 1280 and 1440. `scrollWidth` equals `clientWidth` at every one, and no table is wider than its column.
Themes	Light and dark on all three pages.
Both sides	Agent and vendor, on How it works and on Profile.
The hire link	Lands on `/hire?trade=listing-photography&provider=…` with the trade and person set.
Console	Clean on all three.
Types and build	`tsc --noEmit` clean, `npm run build` succeeds.

Open questions

There is no support inbox. SUPPORT_EMAIL in Settings.tsx is one constant away from a working section.
The cancellation policy is not enforced anywhere in code.
The nine agent service types are still Title Case — "Home Showings", "Pick Up Placement", "Admin Tasks" — against the locked sentence-case convention. They sit beside the ten sentence-case trades on How it works, where the mismatch is now visible. Changing them touches every screen that renders a service type.