US Coachways
UX Dossier.

Is the business context clear enough to design from?

The skill prescribes a 5-question gate before any UX work begins. The point is to surface assumptions, not pretend they don't exist. Below is the assessment for the US Coachways rebuild as of intake.

STRATEGY CHECK · US Coachways rebuild
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

1. VALUE PROPOSITION                             [x] Clear   [ ] Fuzzy   [ ] Unknown
   "America's largest, most-trusted charter bus broker — 35 years,
    300K+ trips, FEMA-approved, Fortune 500-trusted, now with
    instant pricing and a 110% Trip Guarantee no other broker offers."

2. REVENUE MODEL                                 [x] Defined [ ] Exploring [ ] Unknown
   Brokerage commission on charter bookings, 10% deposit at booking +
   balance due 30 days pre-trip. Recurring revenue from corporate
   shuttle accounts (highest-LTV cohort).

3. TARGET SEGMENT                                [~] Specific [x] Broad [ ] Unknown
   Broad-but-known. 9 audience types collapse to 3 archetypes
   (see Personas § 05). Highest-LTV is corporate/government; highest
   volume is group leaders (weddings, schools, religious).

4. COMPETITIVE POSITION                          [x] Mapped   [ ] Vague   [ ] Unknown
   Mapped against CharterUP (instant-quote marketplace, 2018) and
   GoGo Charters (phone-driven broker, 2012). See § 02 Business
   Context for full competitor analysis. USC's moat: tenure +
   government/F500 credentials + network depth (7,000 vehicles).

5. SUCCESS METRICS                               [~] Defined [x] Fuzzy [ ] Unknown
   Defined directionally, not numerically.
   Primary: cost-per-booked-trip from paid acquisition ↓
   Secondary: organic share-of-voice on high-intent queries ↑
   Tertiary: % of trips repeat-booked via accounts ↑
   Targets not set numerically yet — flag for sprint 0.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
RECOMMENDATION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

0-1 Unknown: Proceed with UX work
→ 2 Unknown (Target segment specificity, Success metric quantification)
2-3 Unknown: Flag gaps, proceed with assumptions documented
4-5 Unknown: Recommend business strategy session before UX

Verdict: PROCEED with documented assumptions. Set numeric
KPIs in sprint 0; the UX direction is independent of the exact
threshold and won't be invalidated by setting one.

The competitive structure of the charter bus industry, applied to US Coachways.

Four frameworks, ordered from least-to-most adversarial: Lean Canvas (what the business is), SWOT (where it stands), Competitor Analysis (who else is in the room), Porter's Five Forces (the structural forces acting on everyone). Each ends with the UX implications.

2.1  Lean Canvas

2.2  SWOT

Strategic implications · S-O · W-O · S-T · W-T

2.3  Competitor Analysis

Competitor identification

Competitor profile · CharterUP

Competitor profile · GoGo Charters

Feature comparison matrix

Positioning map · Trust × Speed

The two axes that matter most to charter-bus buyers are trust the operator will show up (vertical) and speed to a real price (horizontal). Plotting the field:

The empty top-right quadrant is the white space. Both axes are needed: speed alone (CharterUP) doesn't beat the trust deficit; trust alone (USC today) doesn't survive the comparison-shopping buyer. The proposed USC owns the corner by combining them.

Competitive insights

2.4  Porter's Five Forces

2.5  Business context → UX priorities

Auditing the current US Coachways site against Norman's six principles.

Norman's framework is a diagnostic: when an interface frustrates users, at least one of the six principles has been violated. Below each principle is applied to the current uscoachways.com — not the proposed redesign — to surface what the redesign must fix and why. Then the Gulfs of Execution and Evaluation locate the friction in time.

3.1  The six principles, applied

3.2  Gulf of Execution & Gulf of Evaluation

3.3  Seven Stages of Action · primary booking interaction

The current site evaluated against Krug's three laws, then re-framed using Garrett's five planes and placed in the Double Diamond.

Where Norman diagnosed the surface friction (Section 03), Krug evaluates whether the current site is even self-evident, Garrett locates which structural plane is broken, and the Double Diamond names which phase of the design process this project is in.

4.1  Krug's three laws, applied

4.2  Garrett's five planes · the structural commitment

4.3  Double Diamond · where this project is

Three archetypes, framed by the job they're hiring USC to do.

The nine audience segments from intake collapse into three jobs-to-be-done patterns. Each persona uses Christensen's full template — context, job statement, functional/emotional/social needs, current state, success criteria, constraints, emotional landscape. Every claim about behavior is confidence-tagged: VALIDATED = direct evidence; INFERRED = extrapolated from competitor reviews and industry data; ASSUMED = domain knowledge, needs primary research.

5.1  Maya · The Coordinator

Office Manager · Wedding Planner · Event Coordinator · 35–48 · 42% of traffic · avg trip $4.2K · primary target

ARCHETYPE: Maya, the Coordinator
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

CONTEXT
───────
When:      A group needs to move and she's the one responsible.
           Boss said "handle it"; bride said "you're in charge of the shuttle."
Where:     At her desk, between 20 other tasks. Phone is open.
Frequency: 4–12 trips per year on average; spikes around event season.

THE JOB
───────
Primary Job: Lock in a bus she trusts, get the price approved,
             move on to the next ten things on her list.
Job Statement:
  "When I'm responsible for getting 60 people somewhere on time,
  I want to lock in a bus I trust and pay for it without seven
  phone calls, so I can move on to the next ten things on my list."

NEEDS HIERARCHY
───────────────
Functional Need: A real price, a real bus photo, a booking she can
                 confirm in one session.
Emotional Need:  Confidence she won't be the person whose bus didn't
                 show up.
Social Need:     An itemized invoice she can forward to finance without
                 explanation.

CURRENT STATE
─────────────
Current Solution: Googles "charter bus rental [city]" → fills RFQ on 3
                  sites → fields callbacks for two days → picks one →
                  PDF quote → another call → manual deposit.
Pain Points:      Phone tag · opaque pricing · no visual of vehicle ·
                  feels like buying a car blindfolded.
Workarounds:      Books the same operator every time even if overpriced,
                  because she trusts them to show up.

SUCCESS CRITERIA
────────────────
Success Metric:    Booked in under 15 minutes, no follow-up calls needed.
Quality Threshold: Bus has photos · operator has ≥ 4.5 rating ·
                   cancellation terms understood up front.
Time Expectation:  < 10 minutes from landing on site to deposit charged.

CONSTRAINTS
───────────
Budget:   Set by boss / bride / event budget; she manages within it.
Time:     Scarcest resource. She is interrupted constantly.
Skills:   Comfortable with web apps; not a transportation expert.
Access:   Mostly desktop in the office; occasional mobile finalize.

EMOTIONAL LANDSCAPE
───────────────────

BEFORE (Trigger State)
├── Primary Emotion: Mild anxiety · "I've never booked a 56-pax bus before"
├── Intensity:       3 / 5
└── Internal Dialogue: "How do I even know if a price is fair?"

DURING (Engagement State)
├── Desired Emotion: Control + speed
├── Anxiety Triggers: phone-only flow · vague pricing · "we'll get back to you"
└── Trust Requirements: real operator name, real photo, written cancel policy

AFTER (Outcome State)
├── Success Emotion: Quiet relief · "Bus is locked, on to the next thing"
├── Failure Emotion: Panic + blame · "I should have called more places"
└── Share Likelihood: High, if great. Coordinators network with coordinators.

CONFIDENCE
──────────
Context:        INFERRED (USC's existing customer mix is heavily this archetype)
Job statement:  ASSUMED (validation: 5–8 coordinator interviews recommended)
Success metric: ASSUMED (CharterUP's "60 seconds" target is the proxy benchmark)

5.2  David · The Procurement Lead

Operations Director · VP Procurement · Government contracting officer · 40–58 · 8% of traffic · avg contract $85K · highest LTV cohort

ARCHETYPE: David, the Procurement Lead
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

CONTEXT
───────
When:      Standing up a new employee shuttle, a conference, a multi-year
           federal contract, or a hospital evacuation drill.
Where:     Mostly desktop, often with a contracts team on a shared screen.
           Sometimes a vendor portal his org mandates he use.
Frequency: 2–10 contracted programs per year + ad-hoc rush jobs.

THE JOB
───────
Primary Job: Pick a vendor he can defend in an audit and a board review,
             on a contract he can sign once and stop worrying about.
Job Statement:
  "When I'm setting up recurring employee shuttles or large-event
  transport, I want a vendor that can demonstrate safety, scale, and
  a contract I can defend in audit, so I can sign once and stop
  worrying about it."

NEEDS HIERARCHY
───────────────
Functional Need: Vendor due-diligence packet · DOT/MC numbers · insurance
                 COI · safety record · MSA-ready terms · consolidated
                 monthly invoice across all trips.
Emotional Need:  The boring, safe choice. Won't get fired for picking USC.
                 Specifically the opposite of "we picked a startup that
                 ghosted us."
Social Need:     Internal stakeholders (legal, finance, audit, the board)
                 need to see institutional credentials and a paper trail.

CURRENT STATE
─────────────
Current Solution: Existing vendor on an MSA, renewed because switching
                  is painful. Or RFP process every 2–3 years that
                  produces ~6 lengthy proposals to compare.
Pain Points:      Cap-table-style spreadsheets across many one-off
                  bookings · no real-time visibility into what trips
                  are happening · brokers who pitch then disappear ·
                  "we'll get back to you" is fatal at this scale.
Workarounds:      Internal motorpool · stays with incumbent vendor
                  past the point of value · forces ops team to call
                  every trip in by phone.

SUCCESS CRITERIA
────────────────
Success Metric:    Single account · single invoice · signed MSA · zero
                   missed pickups in 12 months.
Quality Threshold: Insurance ≥ $5M · DOT satisfactory · operator-network
                   depth that can survive losing 1 vendor.
Time Expectation:  RFP cycle ≤ 6 weeks · individual trip booking
                   ≤ 5 min (planner-assisted or self-serve, his choice).

CONSTRAINTS
───────────
Budget:   Large but accountable. Every dollar reports up.
Time:     Has time for the contract decision. Has zero time for
          per-trip operational friction.
Skills:   High. Comfortable in SAP, Coupa, Salesforce. Knows the
          procurement vocabulary cold.
Access:   Desktop · corporate SSO · sometimes air-gapped network
          for government work.

EMOTIONAL LANDSCAPE
───────────────────

BEFORE (Trigger State)
├── Primary Emotion: Scrutiny · "I will be asked why I chose this vendor"
├── Intensity:       4 / 5 during RFP, 2 / 5 between
└── Internal Dialogue: "Can this vendor pass our security & insurance review?"

DURING (Engagement State)
├── Desired Emotion: Reassurance + control
├── Anxiety Triggers: missing COI · no GSA Schedule listing · vague safety claims · founder photos but no leadership bios
└── Trust Requirements: federal contracts as proof · F500 references he can call · SOC-style documentation

AFTER (Outcome State)
├── Success Emotion: Invisibility · "Trips happen, board never asks about transportation"
├── Failure Emotion: Career-defining failure · "We're on the front page because a bus didn't show up to FEMA"
└── Share Likelihood: Very high, network-driven. Procurement leads swap vendor references constantly.

CONFIDENCE
──────────
Context:        VALIDATED (USC has GSA + FEMA + F500 references on file)
Job statement:  ASSUMED (validation: 3–5 procurement-lead interviews recommended)
Self-serve appetite: ASSUMED (Assumption 2 from § 01 · highest-risk assumption)

5.3  Robin · The Group Lead

Coach · Pastor · Senior club president · Youth-group organizer · 28–70 · 50% of traffic · avg trip $1.8K · SEO target

ARCHETYPE: Robin, the Group Lead
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

CONTEXT
───────
When:      Volunteering or part-time leading a group somewhere they
           don't normally go together: tournament, retreat, casino
           night, choir trip, senior bus outing.
Where:     At home on the couch, on a phone after work. Sometimes at
           a community center on a borrowed laptop.
Frequency: 1–4 trips per year. Each one matters.

THE JOB
───────
Primary Job: Make the bus part of the trip feel like the easy part,
             so the trip itself feels safe and special.
Job Statement:
  "When I'm taking my team / congregation / club somewhere we've
  never been together, I want to feel like the bus is the easy
  part of the day, so the trip itself feels safe and special."

NEEDS HIERARCHY
───────────────
Functional Need: A predictable price she can present to the group ·
                 the ability to pay a deposit and collect from members
                 over time.
Emotional Need:  Reassurance. High personal accountability — these are
                 her people, not strangers. The bus going wrong is a
                 personal failure.
Social Need:     A trip that members talk about positively · the
                 ability to be the person who "did a great job."

CURRENT STATE
─────────────
Current Solution: Calls 2–3 local operators · asks a friend who
                  booked one last year · ends up at the same broker
                  her sister-in-law used.
Pain Points:      Doesn't know what to ask for · intimidated by
                  quote forms · worried about hidden fees · scared
                  she's overpaying · scared she's underpaying for
                  a sketchy operator.
Workarounds:      Asks members to "just drive themselves to the
                  venue" if it gets too hard. Avoids the bus
                  entirely on smaller trips.

SUCCESS CRITERIA
────────────────
Success Metric:    Members get there on time, get home safely, no
                   one complains, photos go up on Facebook.
Quality Threshold: Driver is professional · bus is clean · price
                   matches what was quoted · no surprises.
Time Expectation:  Researching: 30–60 min over a couple evenings ·
                   Booking: ~20 min once she's decided.

CONSTRAINTS
───────────
Budget:   Tight. Often collecting from members. $1.5K–$2.5K typical.
Time:     Has evenings; doesn't want to spend them on hold.
Skills:   Medium. Comfortable with Facebook, email, web forms. Not
          comfortable with anything that feels enterprise-y.
Access:   Mostly mobile (60%+). Couch + phone.

EMOTIONAL LANDSCAPE
───────────────────

BEFORE (Trigger State)
├── Primary Emotion: Self-doubt + hope · "I want to do this right"
├── Intensity:       4 / 5 (high personal stakes)
└── Internal Dialogue: "What if I pick the wrong one and the kids get stranded?"

DURING (Engagement State)
├── Desired Emotion: Hand-held + confident
├── Anxiety Triggers: too many fields · jargon · sketchy-looking site · no phone number
└── Trust Requirements: real reviews (especially from people like her), a phone option that's a real person, transparent total cost

AFTER (Outcome State)
├── Success Emotion: Pride + relief · "Everyone had a great day, and I made it happen"
├── Failure Emotion: Public shame · "I'm the one who picked the bus that didn't show"
└── Share Likelihood: Very high. Word-of-mouth in churches, schools, clubs is enormous.

CONFIDENCE
──────────
Context:        INFERRED (large share of competitor city-page traffic comes from this archetype)
Job statement:  ASSUMED (validation: 5+ group-leader intercept interviews recommended)
Mobile-first:   INFERRED (industry data + competitor analytics patterns)

5.4  Cross-persona synthesis

Each persona maps to a different surface of the redesigned product. Maya drives the homepage and quote builder. David drives the For-Business surface. Robin drives the SEO templates. The three are not competing for design attention — they each own a different door into the same product.

What each persona says, thinks, feels, and does — separated, because the gap between them is where insight lives.

The JTBD template (Section 05) framed the job. The empathy map adds the verbatim layer the template doesn't capture — the words coordinators actually use, the thoughts they don't say out loud, the emotions that drive their behavior. Where Says and Does disagree, that's the highest-leverage design opportunity in the dossier.

6.1  Empathy Map · Maya, the Coordinator

6.2  Empathy Map · David, the Procurement Lead

6.3  Empathy Map · Robin, the Group Lead

6.4  Cross-empathy synthesis · the three "Says/Does gaps"

Maya's end-to-end journey, from "boss said handle it" to "I'd book USC again."

Personas (§ 05) framed the job. Empathy maps (§ 06) added the verbatim layer. Now the journey map locates every action, thought, emotion, pain, and opportunity along the actual end-to-end experience. The emotional curve below is the design target: keep peaks high at decision and trip day, eliminate the valley where competitors capture comparison shoppers.

Journey: Booking a charter bus for the first time at a new job · Archetype: Maya (Coordinator) · Scenario: 60-pax wedding shuttle, NYC → Brooklyn venue, 8 weeks out · Timeframe: ~3 days from trigger to deposit; ~8 weeks from deposit to advocacy

7.1  The eight phases of Maya's journey

7.2  Emotional curve · current journey vs. proposed

The vertical axis is Maya's felt emotion (Low → High). The red line is the current USC experience; the green line is the proposed redesign. The biggest swing is at phase 3 (Compare) — where today she leaks to a competitor that returned a price first, and where the proposed instant quote keeps her on USC.

7.3  Critical moments

7.4  Where David and Robin diverge

Synthesizing Sections 02–07 into seven clusters and one committed problem statement.

The Define phase of Diamond 1 converges everything we've discovered into a single thesis. Every observation from competitive audit, personas, empathy maps, and journey gets clustered into themes; each theme produces a labeled insight; the insights collapse into the problem statement the entire Solution Space is designed against.

8.1  Input data · observations being clustered

The "sticky notes" feeding this affinity map come from four sources: competitive audit (§ 02), Norman/Krug/Garrett site audits (§§ 03–04), three JTBD personas (§ 05) + three empathy maps (§ 06), and the eight-phase journey (§ 07). 47 distinct observations were captured; the seven clusters below contain the ones that appeared three or more times.

AFFINITY MAP: US Coachways rebuild
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Data sources:  Competitor audit + Site audit + 3 JTBD personas
               + 3 empathy maps + 8-phase journey
Participants:  N/A — desk research synthesis (composite quotes)
Date:          May 2026
Confidence:    INFERRED · primary-research validation pending

────────────────────────────────────────────────────────────
Observations captured: 47
Clusters surfaced:       7
Outliers (worth noting): 3

8.2  Seven clusters · ranked by frequency & impact

8.3  Outliers worth noting

Three observations didn't cluster but may be significant. They're noted here so they're not lost in a future research cycle.

• "My sister-in-law used a company last year — what was the name?" (Robin · once) — implies word-of-mouth referral is operationally powerful in the group-lead segment but invisible in USC's analytics. May warrant a referral-code system for friends/family/group-leader networks specifically.
• "Can I pay 10% now and collect from the group later?" (Robin-adjacent · once) — implies a split-payment / "collect from members" feature could remove a friction point for clubs & congregations. Not in v1 scope; flagged for v2 consideration.
• "What if my card is declined and I don't know?" (Maya · once) — implies the silent-failure mode in checkout is a real anxiety; surfacing payment status loudly (not just an error toast) might convert.

8.4  The committed problem statement

Seven clusters collapse into one thesis. Everything in Diamond 2 (wireframes, hi-fi, handoff) is designed against this statement. If a feature doesn't trace back to it, the feature is scope creep.

The statement names the user (three archetypes), the job (real price + verification + day-of accountability, in one session), and the structural problem (the market has forced buyers to choose between speed and trust because no broker has offered both). USC is uniquely positioned to occupy the empty quadrant — and the rest of this dossier is the design plan for doing so.

Three sub-problem statements · one per persona

8.5  How-Might-We questions · the bridge into Solution Space

Each cluster generates a How-Might-We question that the design team can ideate against. These are the prompts the wireframes (Section 11 onward) are answers to.

The seven How-Might-We prompts, converted into specified user stories.

Each story below answers one of the HMW prompts from § 8.5. Every story uses Mike Cohn's As a / I want to / So that format, with Dan North's Gherkin Given/When/Then acceptance criteria and Bill Wake's INVEST checklist. Edge cases & design notes are explicit because the wireframes (already written) reference these stories as their contract.

9.1  Eight P0 stories for v1

9.2  Story sizing & sprint plan

9.3  Out-of-v1 (parking lot)

Stories that emerged from research but are firewalled from v1 scope (per § 8.4). Listed here so they don't get lost and so the team can defer with intention, not by omission.

The behavior layer · why each P0 story actually triggers the action it claims to.

User stories define what the system does. Behavioral analysis specifies why users will actually use it. Each P0 story is run through Fogg's B=MAP diagnostic (motivation × ability × prompt), then the engagement loop is mapped against Eyal's Hook Model, then persuasion patterns and System-1/2 targeting are committed per surface.

10.1  Fogg B=MAP · diagnosing every P0 story

10.2  Eyal Hook Model · the engagement loop USC builds

10.3  Persuasion patterns · Cialdini + Kahneman, mapped to surfaces

10.4  System 1 vs System 2 · which surfaces target which

10.5  Synthesis · the behavioral spec per surface

Combining Fogg + Eyal + Cialdini + Kahneman into a single annotation per primary surface. This is the spec the wireframes already implement (Section 11 onwards), now made explicit.

[SURFACE: Homepage hero]
├── PROMPT:    External (SEO/paid) → Internal (book another trip)
├── MOTIVATION: Anticipation/Hope (real price now)
├── ABILITY BARRIER: Time (Maya is interrupted)
├── PROMPT TYPE: Facilitator (motivation is already there)
├── SYSTEM TARGET: System 1 (scan, click, type, submit)
├── PERSUASION: Authority (trust band) + Reciprocity (quote without email upfront)
└── INVESTMENT ASK: Email/SMS at end of quote builder (small, loads magic link)

[SURFACE: Quote Results]
├── PROMPT:    Direct from quote builder
├── REWARD TYPE: Hunt (real prices) + Self (decision agency)
├── VARIABLE ELEMENT: Operator data revealed (each card surprises)
├── SYSTEM TARGET: System 1 default · System 2 opt-in
├── PERSUASION: Social Proof (operator ratings) + Anchoring (premium card first)
└── INVESTMENT ASK: "Save quote" or pick a bus (commitment escalator)

[SURFACE: Customer Dashboard · day-of trip]
├── PROMPT:    Internal (anxiety) + Owned (T-2h SMS)
├── REWARD TYPE: Self (relief) + Tribe (share-link to group)
├── VARIABLE ELEMENT: Map updates on movement, not on interval
├── SYSTEM TARGET: System 1 (anxious scanning)
├── PERSUASION: Liking (driver photo + first name)
└── INVESTMENT ASK: Post-trip review → "book again" (peak-end moment)

[SURFACE: For-Business / Team Account]
├── PROMPT:    Spark (cold first encounter, Authority leads)
├── MOTIVATION: Anticipation + Belonging (Social Acceptance internally)
├── ABILITY BARRIER: Social Deviance ("Can I commit my company?")
├── PROMPT TYPE: Spark transitioning to Facilitator post-MSA
├── SYSTEM TARGET: System 2 (deliberate procurement evaluation)
├── PERSUASION: Authority (FEMA · GSA · F500) + Reciprocity (MSA download)
└── INVESTMENT ASK: SSO setup · invite teammates · upload PO list (switching cost)

The current site and the proposed wireframes, scored against H1–H10 with severity ratings 0–4.

A heuristic eval is a discount usability method that catches glaring problems without requiring participant recruitment. Below, each of Nielsen's ten heuristics is run twice — against the current uscoachways.com (severity ratings of violations) and against the proposed wireframes (severity ratings post-fix). The delta is the case for the rebuild.

11.1  Methodology note

11.2  The ten heuristics, scored

11.3  Aggregated severity · current vs proposed

11.4  Known S1 cosmetic issues on the proposed site

Documented for the cleanup sprint backlog. None are release blockers; each is a polish-pass candidate after primary v1 ship.

11.5  Heuristic issues that need user research to validate

Per Nielsen: a heuristic violation doesn't automatically mean a fix is needed. These three borderline cases should be validated with users before treating as confirmed problems.

The off-the-shelf patterns that implement every fix in this dossier.

Sections 10 (Behavioral) and 11 (Heuristics) committed to what we'll do and why. This section locks the how at the pattern level: the canonical CTA copy, form-field microcopy, error-message library, empty states, loading states, and wireframe annotation key the dev team picks up directly. Every pattern below traces to UX-PATTERNS.md (which itself aggregates Krug, Wroblewski, NN/g, Cialdini, and platform conventions).

12.1  CTA microcopy · canonical phrases per intent

Formula: [Action verb] + [Value / object] + [Optional urgency / benefit]. One canonical CTA phrase per intent, locked at the design-system layer so H4 (Consistency) never regresses.

12.2  Form patterns · labels, placeholders, validation

12.3  Error message library

Formula: [What happened] + [Why / context] + [How to fix]. Plain language, never error codes user-facing, always paired with a recovery action.

12.4  Empty states · what each blank screen should say

Formula: [What this space is for] + [Why it's empty] + [How to fill it]. Empty states are a teaching moment, not a void.

12.5  Loading & progress states

Per Nielsen's response-time research: < 0.1s feels instant, < 1s feels fluid, < 10s holds attention, > 10s needs progress + estimate.

12.6  Wireframe annotation key

Every wireframe annotation in this project (Section 07 Wireframes) uses these category prefixes so engineers can pattern-match implementation needs without re-reading the dossier.

ANNOTATION CATEGORIES · USC wireframe standard
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

// NAV      navigation pattern         e.g. "// NAV - Persistent header, 5 items"
// FORM     form interaction           e.g. "// FORM - Autosave every 30s · validate on blur"
// FEEDBACK system feedback           e.g. "// FEEDBACK - Toast 4s · top-right"
// ACTION   action pattern             e.g. "// ACTION - Confirm cancel · destructive"
// SOCIAL   social proof               e.g. "// SOCIAL - User count · live activity"
// SCARCITY real scarcity              e.g. "// SCARCITY - '23 buses available' · live data only"
// URGENCY  time-based                 e.g. "// URGENCY - 24h quote expiry · countdown"
// LOSS     loss-aversion frame        e.g. "// LOSS - 'Cancel by Jul 15 or balance auto-charges'"
// COMMIT   commitment escalator       e.g. "// COMMIT - Progress bar · start at 25%"
// CONTENT  static content placement   e.g. "// CONTENT - Hero copy block"
// LOADING  loading treatment          e.g. "// LOADING - Skeleton placeholder, 3 cards"
// ERROR    error state                e.g. "// ERROR - Inline validation, below field"
// EMPTY    empty state                e.g. "// EMPTY - 'No trips yet' · CTA to quote builder"
// A11Y     accessibility note         e.g. "// A11Y - aria-live=polite on ETA · 44px tap targets"
// SEO      SEO-specific spec          e.g. "// SEO - H1 contains primary keyword · LocalBusiness schema"

12.7  Pattern selection by user goal

The component hierarchy the dev team builds against — atoms, molecules, organisms, templates, pages.

Frost's mantra: create design systems, not pages. Below is the v1 inventory in five tiers. Atoms are the indivisible UI elements; molecules combine atoms into single-purpose units; organisms compose molecules into recognizable interface sections; templates lay organisms onto a grid; pages are template instances with real content. Every wireframe (§ 07) and hi-fi (§ 08) traces back to a specific atom or molecule below.

13.1  Naming convention & design tokens

Frost's standard: [category]-[name]-[variant]-[state]. Maps directly to component props in React / Vue / Svelte and to CSS classes if the team picks utility-first instead of component-first.

NAMING · USC component standard
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

btn-primary-default      // red CTA, idle
btn-primary-hover        // red CTA on hover · darker shade + 1px translate
btn-secondary-disabled   // ghost button when action unavailable
input-text-error         // text input with invalid value
card-vehicle-selected    // quote-result card with active selection
nav-link-active          // main nav item on current section
card-vehicle-loading     // skeleton placeholder during fetch

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
DESIGN TOKENS · canonical names (Salesforce-compatible)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

--usc-color-navy-900   #061a30  primary dark surface
--usc-color-navy-800   #0b2a4a  primary brand
--usc-color-red-600    #c2271f  primary CTA
--usc-color-amber      #f3b042  live badge · in-progress
--usc-color-ok         #1b8a4a  success states
--usc-color-paper      #f7f4ec  cream background (Dir A)

--usc-space-1..10      4·8·12·16·24·32·48·64·96·128
--usc-radius-sm/md/lg  4 · 8 · 14
--usc-elev-1/2/3       subtle · card · floating
--usc-font-display     "Söhne", "Inter", system-ui
--usc-font-body        same
--usc-font-mono        "JetBrains Mono", ui-monospace

13.2  Atoms · the indivisible elements

12 atoms cover the v1 product. Each one has all states documented per Frost's atom-spec template.

13.3  Molecules · single-purpose combinations

13.4  Organisms · recognizable interface sections

13.5  Templates · page-level layouts

Eleven v1 templates. Each one corresponds 1:1 with a wireframe screen in Section 07. Grid system: 12-col desktop / 4-col mobile, 24px gutters, 1440px max content width, 32px page margins.

13.6  Pages · template instances with real content

Per Frost: pages aren't typically specified in the design system — they're the stress test of the template. The hi-fi prototypes already on file demonstrate this: each one is a Page instance of a Template above, with real (or composite-real) content stressing the layout.

Additional pages (Quote Results, Trip Details, Checkout, Dashboard, SEO city) are scheduled for the design sprint following dossier approval; templates and organisms are spec'd above and ready to populate.

13.7  Component dependency map · build order

Frost: build bottom-up. Engineering should commit atoms in week 1, molecules in week 2, organisms in weeks 3–4, templates compose in weeks 5–8. Pages assemble continuously across sprints.

13.8  Spec handoff checklist

Per Frost's checklist — verify completeness at every tier before code commit.

The copy-paste handoff brief — what the front-end team picks up at sprint zero.

Final convergence of the Deliver phase. The Design Specification below collapses Sections 12–13 into a single document the developer reads once. The Developer Deployment Code is the literal text to paste into a Frontend Developer skill conversation to begin implementation. Together they're the contract between this dossier and the codebase.

14.1  Design Specification · US Coachways v1

# DESIGN SPECIFICATION · US Coachways · v1.0
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

## 1. COLOR PALETTE

| Token                  | Hex      | Usage                                  |
|------------------------|----------|----------------------------------------|
| --usc-color-navy-900   | #061a30  | Primary surface, dark mode             |
| --usc-color-navy-800   | #0b2a4a  | Primary brand                          |
| --usc-color-navy-600   | #1b4fa8  | Link, active state                     |
| --usc-color-blue-500   | #2c6fd1  | Accent, info                           |
| --usc-color-red-700    | #9a1e22  | Danger, sale, hover-pressed            |
| --usc-color-red-600    | #c2271f  | Primary CTA                            |
| --usc-color-red-500    | #dc2f25  | Hover CTA                              |
| --usc-color-amber      | #f3b042  | Live badge, in-progress                |
| --usc-color-ok         | #1b8a4a  | Success states                         |
| --usc-color-warn       | #d97706  | Warning states                         |
| --usc-color-danger     | #c2271f  | Error states (= red-600)               |
| --usc-color-ink-900    | #11161f  | Primary text                           |
| --usc-color-ink-500    | #5a6273  | Secondary text                         |
| --usc-color-ink-100    | #e4e7ee  | Borders, dividers                      |
| --usc-color-paper      | #f7f4ec  | Cream background (Dir A)               |
| --usc-color-white      | #ffffff  | Surface background (Dir B)             |

## 2. TYPOGRAPHY

Font pairing: Söhne (display + body) + JetBrains Mono (code/labels)
Fallback stack: system-ui, -apple-system, sans-serif

| Element  | Family       | Size (mobile / desktop) | Weight | Line-height |
|----------|--------------|-------------------------|--------|-------------|
| Display  | Söhne        | 44px / 84px             | 700    | 0.98        |
| H1       | Söhne        | 34px / 56px             | 700    | 1.02        |
| H2       | Söhne        | 26px / 38px             | 600    | 1.10        |
| H3       | Söhne        | 22px / 28px             | 600    | 1.20        |
| Body-lg  | Söhne        | 17px / 19px             | 400    | 1.50        |
| Body-md  | Söhne        | 15px / 16px             | 400    | 1.55        |
| Body-sm  | Söhne        | 13px / 14px             | 400    | 1.50        |
| Caption  | Söhne        | 12px / 12px             | 500    | 1.40        |
| Mono     | JetBrains    | 12px / 13px             | 400    | 1.50        |

## 3. SPACING SYSTEM  (4px base)

| Token        | Value | Usage                              |
|--------------|-------|------------------------------------|
| --space-1    | 4px   | Hairline · icon-to-text            |
| --space-2    | 8px   | Default internal                   |
| --space-3    | 12px  | Related element gaps               |
| --space-4    | 16px  | Component padding (default)        |
| --space-5    | 24px  | Section gaps                       |
| --space-6    | 32px  | Major section breaks               |
| --space-7    | 48px  | Page-section margins               |
| --space-8    | 64px  | Hero spacing                       |
| --space-9    | 96px  | Page padding (desktop)             |
| --space-10   | 128px | Reserved for extreme layouts       |

## 4. RADII & ELEVATION

| Token        | Value                                          |
|--------------|------------------------------------------------|
| --radius-sm  | 4px  (inputs · chips)                          |
| --radius-md  | 8px  (buttons · cards)                         |
| --radius-lg  | 14px (modals · primary cards)                  |
| --radius-pill| 999px (chips · phone badges)                   |
| --elev-1     | 0 1px 2px rgba(11,42,74,.08)                   |
| --elev-2     | 0 4px 12px -2px rgba(11,42,74,.12)             |
| --elev-3     | 0 12px 32px -8px rgba(11,42,74,.18)            |

## 5. COMPONENT STATES

### Button (btn-*)
| State    | Background          | Text   | Border / Ring                        |
|----------|---------------------|--------|--------------------------------------|
| Default  | --color-red-600     | white  | none                                 |
| Hover    | --color-red-500     | white  | translateY(-1px) + elev-2 red shadow |
| Active   | --color-red-700     | white  | translateY(0)                        |
| Focus    | --color-red-600     | white  | 2px outline --color-red-500 offset 2 |
| Disabled | opacity .4          | white  | cursor: not-allowed                  |
| Loading  | --color-red-600     | white  | spinner replaces label · aria-busy   |

### Input (input-*)
| State    | Background  | Border                | Label color           |
|----------|-------------|------------------------|-----------------------|
| Default  | --paper-2   | 1px --ink-100          | --ink-500             |
| Focus    | white       | 1px --navy-700         | --navy-700            |
| Valid    | white       | 1px --color-ok         | --ink-500 + check icon|
| Error    | white       | 1px --color-danger     | --color-danger        |
| Disabled | --ink-100   | 1px --ink-100          | --ink-300             |

### Vehicle card (card-vehicle-*)
| State     | Treatment                                           |
|-----------|-----------------------------------------------------|
| Default   | --ink-100 border · --radius-md · --elev-1           |
| Hover     | --navy-700 border · --elev-2                        |
| Selected  | --navy-900 border 2px · checkmark badge top-right   |
| Unavail.  | opacity .5 · "Currently unavailable" overlay        |
| Loading   | Skeleton placeholder (same dimensions)              |

## 6. ACCESSIBILITY REQUIREMENTS

| Requirement              | Specification                                      |
|--------------------------|----------------------------------------------------|
| Standard                 | WCAG 2.2 AA on every shipped surface               |
| Contrast (body)          | ≥ 4.5:1                                            |
| Contrast (large / UI)    | ≥ 3:1                                              |
| Tap target (mobile)      | ≥ 44 × 44 px                                       |
| Click target (desktop)   | ≥ 32 × 32 px with sufficient spacing               |
| Focus ring               | 2px solid --color-red-500, offset 2px              |
| Landmark structure       | header · main · nav · footer required              |
| Skip-to-content link     | First focusable element on every page              |
| prefers-reduced-motion   | Honored: no parallax · no auto-carousel · no spin  |
| prefers-color-scheme     | Dark mode not v1 (light only)                      |
| Color-only signals       | Never · always paired with icon + text             |
| Form errors              | text + icon + aria-invalid + aria-describedby      |
| Live regions             | aria-live="polite" for ETA · "assertive" for errors|
| Images                   | All meaningful images have alt · decorative alt="" |
| Keyboard navigation      | Every interactive element reachable + visible focus|

## 7. RESPONSIVE BREAKPOINTS  (mobile-first)

| Breakpoint  | Min-width | Layout intent                          |
|-------------|-----------|----------------------------------------|
| (default)   | 0         | Phone portrait                         |
| --bp-sm     | 480px     | Large phone / small tablet portrait    |
| --bp-md     | 768px     | Tablet portrait                        |
| --bp-lg     | 1024px    | Tablet landscape / small laptop        |
| --bp-xl     | 1280px    | Desktop · primary design width         |
| --bp-2xl    | 1536px    | Wide desktop · content max 1440px      |

## 8. INTERACTIONS

| Element             | Trigger        | Response                                       |
|---------------------|----------------|------------------------------------------------|
| Primary button      | Hover          | Background → red-500 · translateY(-1px)        |
| Primary button      | Click          | scale(0.98) · 100ms                            |
| Card                | Hover          | --elev-2 shadow · translateY(-2px) · 140ms     |
| Input               | Focus          | Border transition --ink-100 → --navy-700 200ms |
| Step transition     | Forward / back | Fade 120ms · honor prefers-reduced-motion      |
| Modal open / close  | Trigger        | Fade backdrop 150ms + scale modal 0.96 → 1     |
| Live tracking map   | GPS update     | Bus icon translates with 800ms ease            |
| Toast               | Trigger        | Slide-in from bottom · auto-dismiss 4000ms     |
| Quote-builder step  | "Continue"     | Validate → save state → fade next panel        |

## 9. ATOMIC COMPONENT INVENTORY

ATOMS (12):
  Button · Input · Label · Icon · Badge · Checkbox · Radio
  Stepper · Avatar · Divider · Spinner · Link

MOLECULES (16):
  Form-field · Tab-group · Search-field · Stepper-progress
  Trust-badge-row · Operator-credentials · Price-block · Vehicle-card
  Live-trip-status · Chip-filter · Toast · Inline-alert
  Review-card · Stat-block · Pricing-row · Phone-CTA-block

ORGANISMS (18):
  Site-header · Persistent-trust-bar · Hero-quote-builder
  5-CTA-differentiator-strip · Trip-Guarantee-panel · Quote-builder-organism
  Quote-results-grid · Trip-details-editor · Checkout-organism
  Dashboard-hero · Live-tracking-surface · Reviews-wall
  Solutions-grid · Logo-wall · Pricing-table · Comparison-table
  Site-footer · Operator-portal-dashboard

TEMPLATES (11):
  Homepage · Quote-builder · Quote-results · Trip-details · Checkout
  Customer-dashboard · SEO-city-or-route · Trip-type-landing
  Trust-About · Day-of-trip-mobile · Operator-portal

PAGES (continuous):
  Hi-fi prototypes already on file demonstrate template instances.

14.2  Developer Deployment Code · copy-paste handoff

The block below is the canonical handoff brief. Paste into a new conversation with the Frontend Developer skill (or hand to any front-end team). The developer has creative freedom within these structural constraints.

---
DEVELOPER DEPLOYMENT CODE · US COACHWAYS v1
---

You are the Developer. I am the Designer.

Here are the approved wireframes, design tokens, and component specifications.
Implement this in [STACK-AGNOSTIC · recommend Next.js (React) + Tailwind +
headless CMS · see Hosting matrix in Strategy Book § 10] using clean,
component-based code organized by Frost's atomic hierarchy.

## Design Context
US Coachways rebuild · charter-bus brokerage moving from RFQ-only to
instant-quote marketplace with the only public Trip Guarantee in the
industry. Mobile + desktop parity; mobile is the larger paid-traffic share.
14-week target to v1 launch (phased roadmap in Strategy Book § 12).

## User Flow Reference
Primary acquisition flow (Maya · the Coordinator · 42% of traffic):
  SEO landing or paid search →
  Hero quote builder (4 steps, ~60 sec) →
  Quote results (3-6 buses with operator credentials) →
  Trip details editor →
  Single-page checkout (10% deposit) →
  Customer dashboard with live tracking T-2h →
  Post-trip rebook + Team Account upsell

Three personas: Maya (Coordinator · primary), David (Procurement · LTV),
Robin (Group Lead · SEO volume). Persona-tag on every component.

## Design Tokens

### Colors
--color-navy-900: #061a30   (primary surface, dark)
--color-navy-800: #0b2a4a   (primary brand)
--color-navy-600: #1b4fa8   (link, active)
--color-blue-500: #2c6fd1   (accent, info)
--color-red-600:  #c2271f   (primary CTA)
--color-red-500:  #dc2f25   (CTA hover)
--color-amber:    #f3b042   (live badge)
--color-ok:       #1b8a4a   (success)
--color-warn:     #d97706   (warning)
--color-danger:   #c2271f   (error · = red-600)
--color-ink-900:  #11161f   (text)
--color-ink-500:  #5a6273   (text-secondary)
--color-ink-100:  #e4e7ee   (border)
--color-paper:    #f7f4ec   (cream bg · Direction A)
--color-white:    #ffffff   (surface · Direction B)

### Typography
Font family: "Söhne", -apple-system, system-ui, sans-serif
Mono: "JetBrains Mono", ui-monospace, monospace
Display (hero): 84px / 700 / 0.98 (desktop); 44px / 700 (mobile)
H1: 56px / 700 / 1.02 (desktop); 34px / 700 (mobile)
H2: 38px / 600 / 1.10 (desktop); 26px / 600 (mobile)
Body: 16px / 400 / 1.55 (desktop); 15px / 400 (mobile)
Caption: 12px / 500 / 1.40

### Spacing (4px base)
4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128

### Radii
sm 4px · md 8px · lg 14px · pill 999px

### Elevation
elev-1: 0 1px 2px rgba(11,42,74,.08)
elev-2: 0 4px 12px -2px rgba(11,42,74,.12)
elev-3: 0 12px 32px -8px rgba(11,42,74,.18)

## Component Requirements (12 atoms · 16 molecules · 18 organisms)

Full inventory in Dossier § 13. Highest-priority for sprint 1:
- Button (5 variants × 6 states)
- Input (6 variants × 7 states)
- Form-field molecule (label + input + helper + error)
- Vehicle-card molecule
- Quote-builder organism (4-step wizard with stepper, autosave, sticky summary)
- Site-header organism (sticky · trust-bar above · CTA right)

Build order: atoms wk1 → molecules wk2 → organisms wks3-4 →
templates wks5-8 → pages continuous.

## Responsive Behavior
Mobile-first; min-width breakpoints only.
sm 480 · md 768 · lg 1024 · xl 1280 · 2xl 1536
Content max-width: 1440px (centered, 32px page margins).
Touch targets: 44 × 44 px minimum on mobile.

## Accessibility Checklist
- [ ] WCAG 2.2 AA on every shipped surface
- [ ] 4.5:1 contrast for body text · 3:1 for large & UI
- [ ] 44 × 44 px tap targets on mobile · 32 × 32 px desktop
- [ ] Visible focus-visible ring (2px solid --color-red-500, offset 2)
- [ ] Skip-to-content link first focusable on every page
- [ ] Semantic landmarks (header · main · nav · footer)
- [ ] prefers-reduced-motion respected
- [ ] Forms: label above input · errors with text + icon + aria
- [ ] aria-live="polite" on ETA / status regions
- [ ] aria-live="assertive" for error toasts
- [ ] Color never the only signal
- [ ] All images have alt · decorative alt=""

## Implementation Notes

PERFORMANCE (non-negotiable for SEO surfaces):
- LCP < 1.8s on mobile 4G
- INP < 200ms
- CLS < 0.05
- HTML < 50KB compressed · critical CSS inlined
- AVIF + WebP fallback · srcset for 4 breakpoints
- Quote-builder hydrates lazily; initial form is plain HTML

INTEGRATIONS:
- Salesforce REST API (lead · contact · opportunity)
- SubOut.com API (inventory · pricing · operator data)
- Stripe (deposit · balance · refunds · 3DS2)
- Twilio (SMS magic links · trip-day status)
- Mapbox (autocomplete · live tracking)
- Segment (analytics → Salesforce + Mixpanel)
- Sanity or Contentful (city/route/trip-type content)

ANALYTICS:
- Instrument every P0 story's conversion event (see Dossier § 09)
- North-star: cost-per-booked-trip from paid (weekly)
- Funnels: hero → quote → results → trip-details → checkout → confirmed

OUT-OF-V1 (firewall · see Dossier § 8.4):
- Native mobile apps (web-responsive only in v1)
- AI trip planner
- International / multi-language
- Operator ownership / fleet acquisition
- CRM rebuild (Salesforce stays as system of record)

---
END DEPLOYMENT CODE
---

14.3  Quick Spec · printable wallet card

Lightweight version for the team's wall or sprint kickoff. Same numbers, fewer words.

# QUICK SPEC · US Coachways v1

## Tokens
Primary CTA: #c2271f · Brand: #0b2a4a · Accent: #2c6fd1 · Error: #c2271f
Font: Söhne · Base: 16px · Mono: JetBrains
Spacing 4px base: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96

## Components (high-level)
Button: 5 variants × 6 states · 44px min height
Input: label-above · validate on blur · 16px min font
Vehicle card: photo + operator + price + CTA · hover lifts 2px
Quote builder: 4 steps · autosave · sticky summary panel
Dashboard: status-first · live map · driver chat · share-link
Trust bar: persistent · Trip Guarantee + phone + DOT/MC

## States
Default → Hover → Focus-visible → Active → Disabled → Loading
Inputs add: Valid → Invalid

## A11y
Contrast 4.5:1 · Tap target 44px · Focus visible 2px red ring
prefers-reduced-motion honored · aria-live for ETAs

## Responsive
Mobile-first · 480 · 768 · 1024 · 1280 · 1536
Content max 1440px centered

## North-star metric
↓ cost-per-booked-trip from paid acquisition (weekly).
If new homepage + quote builder doesn't materially move this by Week 5,
stop and re-diagnose before continuing.

14.4  Final verdict · dossier complete

"I do not decorate. I architect decisions.
I do not guess user needs. I map their jobs.
I do not hand off ambiguity. I deliver specifications.
Every wireframe is a hypothesis. Every spec is a contract."

The Designer's Oath · UX Designer skill

UX Dossier · US Coachways · May 2026 · 14 sections · 9 reference frameworks · 3 personas · 8 P0 stories · 47 components
Companion artifacts: Strategy book · Wireframes (11 screens) · Hi-fi Direction A · Hi-fi Direction B · Interactive quote builder