# Tailorly — UX spec

## Users & primary jobs
- **Solo owner/tailor** (buyer, daily user, often at a counter or on a phone): 1) take in a garment fast, with deposit; 2) see what's due and what's stuck; 3) pay seamstresses correctly each week.
- **1099 seamstress** (secondary, phone, read-mostly): see my tickets, mark done, see my pay.
- **Customer** (no login): receives texts, optionally self-books a fitting.

## Information architecture
Top nav: **Board** (home) · **New order** · **Schedule** · **Customers** · **Payroll** · Settings (shop details, payments, QuickBooks, service rates, texts, hours).
Order detail and customer profile are reached from the board, schedule and search. Seamstress view: separate mobile page "My tickets" via magic link, with no nav.

## Key flows
1. **Intake**: Board → New order → customer (find/add) → garments (service, due, assignee, price) → deposit % → "Create order & take deposit" → Order detail (success banner, receipt text).
2. **Progress**: Board → move ticket (menu or drag) → prompt "Text customer?" → Send/Skip.
3. **Fitting**: Order detail → Book fitting (or customer self-books) → reminder text 24 h before → add notes/photos.
4. **Pickup**: Order detail → "Collect balance & mark picked up" → QuickBooks sync.
5. **Payroll**: Payroll → pick week → Download CSV.
6. **First-run**: checklist on Board: shop details → connect payments → first order → test text. 14-day trial banner shown at top.

## Screens
| Screen | Purpose / content / actions | Mockup |
|---|---|---|
| Board | 6 stage columns, tickets show #, service, customer, assignee, due pill. Search, assignee filter, board/list toggle. | `mockups/board.html` |
| New work order | One-page form: customer, garments, deposit. | `mockups/new-order.html` |
| Order detail | Status, fittings and notes/photos, measurements (versioned), invoice and balance, activity log. | `mockups/order.html` |
| Schedule | Weekly fitting list, booking link, book fitting. | `mockups/schedule.html` |
| Customers | List and search, profile, measurement versions, CSV import. | `mockups/customers.html` |
| Payroll | Weekly totals per seamstress, CSV download, plus seamstress view notes. | `mockups/payroll.html` |

**States (all screens)**
- *Empty*: a sentence plus one primary action, e.g. "No work orders yet. Create your first one in under a minute."
- *Loading*: skeleton blocks, buttons show "Creating…" and are disabled.
- *Error*: a red banner with role=alert and a Retry action. Form errors appear inline next to the field and in a summary.
- *Success*: a green banner with role=status.
- *Specific*: card declined → order is still saved, deposit due, Retry. QuickBooks failure → amber banner, never blocks pickup. SMS failure → inline "Fix number". Booking slot taken → "That time was just booked. Pick another."

## Design system
- Colours: bg #F7F5F2, surface #FFFFFF, ink #1F2933, muted #52606D, line #D9D4CC, brand navy #1E3A5F, accent #B4532A, success #1B6B3A, warning #8A5A00, error #B42318, focus #1D4ED8.
- Type: system sans. 24 page title, 18 section, 16 body, 14 meta. Line height 1.5.
- Spacing: 4/8/16/24 scale. Radius 8 (controls), 10 (cards).
- Components: primary/secondary button (min 44px), text input, select, ticket card (4px left border, red when overdue), status pill (colour + text), banner, table, note.
- Tone: plain and warm, like a shop counter. Short verbs ("Create order", "Send"). No jargon. Errors say what to do next.

## Accessibility
- All text/background pairs meet WCAG AA (4.5:1). Status is never colour only (pills carry text such as "Overdue 1 day").
- Everything keyboard-operable. Board drag has a "Move to…" menu alternative. Visible 3px focus ring, skip link, logical tab order.
- Every input has a visible label. Errors are linked via aria-describedby and aria-invalid. Banners use role=alert/status.
- Touch targets ≥44px. Layout is usable at 360px width, columns scroll horizontally on the board.

## Open questions
1. Does the SMS prompt on each stage move ("Text Maya?") suit you, or should texts send automatically with a per-stage on/off in Settings? Default I chose: prompt, with an "always send" option.
2. Seamstress login is by magic link (no password). OK for MVP?
3. Is "Picked up" hidden after 7 days on the board acceptable (kept in Customers)?