00 — PRODUCT DIRECTION
Tell us what you need. Relay finds the right local professional and stays with you until the work is finished.
Relay is an operator-managed local-services marketplace built for configurable local service areas. The customer describes a job; Relay scopes it, prices it, recommends one qualified professional with current checks shown before booking, and carries the job to completion. No directory, no bidding, no phone tag.
Customer problem
Hiring household help means comparing strangers, guessing at scope, and chasing quotes. The anxiety isn't price — it's letting an unknown person into your home and not knowing what happens next.
Value proposition
One request, one recommended professional, one price shown before you commit. Relay stays accountable through arrival, work, and completion.
Primary persona
Dana, 38 — works full time and owns a 2/2 in Relay's launch market. Wants it handled today, will pay a fair premium for certainty, hates being sold to.
1 · Answer the next question, not all of them
Each screen asks for one thing and states what happens after it.
2 · Trust is evidence, not decoration
Badges reflect real verification status, including when it is unavailable.
3 · Never a dead end
Every state — including failure — offers a next action and a way to reach a human.
Core journey
{{ j }}
→
01 — FOUNDATIONS
Visual system
Color · all pairings meet WCAG AA on their intended background
Type · Inter (SF Pro on device)
Display 30 / 700
Screen headline · one per screen
Title 22 / 700
Section and sheet titles
Headline 17 / 600
Card titles, buttons
Body 16 / 400 — the floor for anything a customer must read.
Body copy, inputs
Label 14 / 500 — field labels, metadata
Never grey below 14px for essential info
$125.00 · 9:00–11:00 AM
Tabular numerals for money and time
Spacing · 8-point
{{ s.n }}
16px minimum screen padding. 24px between content groups.
Radius & elevation
12 input
14 button
18 card
24 sheet
Touch & reach
44
Minimum interactive target. Primary actions live in the bottom 240px of the screen; destructive actions never do.
Iconography
{{ i.label }}
One outline family, 1.6px stroke, 24px box. Unfamiliar metaphors always carry a text label. No emoji.
Motion & accessibility
Sheets 240ms ease-out; status changes cross-fade 160ms; skeletons shimmer 1.2s. All motion is suppressed under reduced-motion. Status is always word + shape, never color alone. Inputs keep visible labels; errors state the recovery step.
02 — COMPONENTS
Component library
Every screen in sections 03–05 is assembled from these. States shown left to right: default, pressed, focused, selected, disabled, loading, error, success.
Buttons
52px tall, 14px radius, full-width in flows
Primary · pressed
Primary · focused
Loading
Disabled
Success
Inputs
Placeholder text
125 Oak Street
78
Enter all five digits of your ZIP code.
Not editable
4
8
Search past requests
Status chips & verification
Scheduled
On the way
Completed
Running late
Cancelled
Verified · confirmed by Relay
Renewal in progress · not yet confirmed
Verification unavailable
Selectable service card
Home Cleaning
Selected state
Selected
Lawn Care
Default state
Pool service
Not available in your service area yet
Provider card & price breakdown
Maya R.
4.9 ★ · 126 jobs · ID verified
Deep clean$110.00
Relay service & support$15.00
Total$125.00
VISA
Visa ···· 4242
Default
Progress tracker & timeline
Request received
Done
Finding the right pro
Now
Match ready
Upcoming
Sat, Aug 1
Tomorrow
Today · full
Photo uploader & voice note
Empty
✓
Upload failed · Retry
Feedback & overlays
Draft saved. Pick it up anytime.
Undo
We couldn't send your request. Check your connection and tap submit again — nothing was lost.
Cancel this booking?
Maya has held Saturday morning for you. Cancelling now costs $25 of the $125 total.
No requests yet
When you book help, it'll show up here.
Bars, rows & skeletons
Review your request
{{ t.label }}
Maya R.9:02 AMOn my way, should be with you by 9:20.
Rating, address & notification
★★★★★
Home
125 Oak Street, Apt 3B
Maya is on the way, arriving around 9:20 AM.
Sat 9:02 AM
03 — HAPPY PATH
The phone is live — tap through it. This rail is prototype scaffolding, not part of the product.
Design notes
{{ note }}
Simulate provider stage
04 — LIFECYCLE STATES
One tracking screen, seven stages
The header block is the only thing that changes rank. Below it the provider card, address, price and timeline stay put so nothing jumps between updates.
{{ l.n }}
{{ l.title }}
{{ l.eta }}
{{ l.body }}
R
{{ l.push }}
Why there's no map
Relay's pros aren't tracked continuously, so a live map would be theatre. An honest arrival window plus a real "on the way" ping answers the actual question — when should I be ready? — and it works with the screen reader, in bright sun, and on a bad connection. If continuous location becomes available for a category, the map replaces the window block only in the "On the way" stage.
05 — ERRORS & EDGE CASES
Fifteen ways it goes wrong
Each one names what happened in plain language, says what Relay is already doing, and gives at least one forward action plus a route to a person.