The next 20 years of US Coachways
start at the homepage.
A complete UX rebuild plan. Competitive teardown vs. CharterUP and GoGo Charters, JTBD personas, user flows, full wireframes across eleven screens, two hi-fi visual directions, an SEO template system designed to defend the existing paid budget with organic, a hosting decision matrix, and an atomic-design developer handoff.
The thesis in 90 seconds
US Coachways has the strongest moat in the industry — 20+ years, 300,000+ trips, 7,000 vehicles in network, GSA/FEMA contracts, Fortune 500 references, a 9.3 NPS. But the website acts like a 2014 broker lead-form, while CharterUP has set a new floor with instant-quote, instant-book, real-time tracking, and operator-rated comparison shopping.
The new site has to do four things, in this order:
- Convert the existing paid-acquisition spend at a materially higher rate, by replacing the "request a quote, we'll call you" pattern with an instant quote with verified human confirmation — a hybrid model that outflanks CharterUP on trust and GoGo on speed.
- Defend SEO by rebuilding the city/route/comparison surfaces as a templated, programmatic system with first-class Core Web Vitals — currently US Coachways trails both competitors on organic share-of-voice for high-intent queries.
- Convert tenure into trust by surfacing the metrics that actually distinguish USC: "FEMA-approved. Fortune 500-trusted. 300,000+ trips since 2004." CharterUP can't say this. GoGo can't say this.
- Operationalize with a self-serve dashboard for repeat corporate bookers (employee shuttles, recurring trips) that competitors haven't shipped yet — turning a one-shot transaction into a managed account.
Booking model recommendation
Hybrid: instant verified quote → human-confirmed booking. Show real-time pricing pulled from SubOut.com inventory (parity with CharterUP), but require a 90-second confirmation call for trips over $5,000, multi-vehicle, or government/Fortune 500 accounts. This is USC's wedge: CharterUP's pure self-serve has well-documented operator-cancellation issues that the hybrid model directly addresses. The "human in the loop" becomes a feature, not a bug.
Risk we must absorb
The BBB record shows a pattern of late cancellations and slow refunds. The redesign must include a publicly-stated Trip Guarantee (auto-backup operator, automatic 110% refund on cancellation) and surface it on every page. This is a marketing claim that costs operations money but converts buyers who've been burned.
Where each player wins, today.
Feature-by-feature parity check across the three players, scored from a buyer's perspective. Green = current win, amber = present but weak, red = absent.
| Capability | US Coachways today | CharterUP competitor | GoGo Charters competitor |
|---|---|---|---|
| Instant online quote (real-time pricing) | ✗ RFQ form → call-back, hours-to-days | ✓ <60 sec, real marketplace inventory | ✗ RFQ form → call-back, "personalized in a timely fashion" |
| Self-serve booking & checkout | ✗ Phone/agent-only | ✓ Self-serve, 10% deposit, credit card on file | ✗ Agent-mediated, 10% deposit, PDF emailed |
| Vehicle comparison (photos, amenities, reviews) | ~ SubOut.com exists but consumer site doesn't expose | ✓ Side-by-side w/ safety ratings, on-time %, reviews | ~ Generic fleet pages, no live inventory |
| Operator safety ratings & DOT data | ✗ Not surfaced on site | ✓ Safety records & on-time performance per operator | ✗ Not surfaced on site |
| Real-time bus tracking | ✗ Not offered to customer | ✓ Live tracking + driver messaging in-app | ✗ Not offered |
| Tenure / scale credibility | ✓ 35 years, 300K+ trips, 12M+ riders, FEMA, F500 | ~ Founded 2018, fast-growing | ~ Founded 2012, niche claims |
| Government & enterprise contracts | ✓ GSA Schedule, FEMA, Fortune 500 | ~ Some F500, light on government | ✗ No public government track record |
| Network depth (vehicles) | ✓ 7,000+ vehicles, 10,000+ drivers, 44 states | ~ 5,000–8,000 vehicles, 700+ operators | ~ Smaller, not disclosed |
| Trip guarantee / backup operator | ✗ Implicit, not promised | ✓ "Network of 700+ operators enables backup" | ✗ Not promised |
| SEO surface: city pages | ~ Exist but thin, dated templates | ✓ Deep, well-templated, ranks #1–3 in many cities | ✓ Highest volume of city pages; local phone numbers |
| SEO surface: route pages (A→B) | ✗ Not built | ~ Some, not programmatic | ~ Some, not programmatic |
| Account / dashboard for repeat bookers | ✗ None | ✓ Save quotes, recurring shuttles, fleet management | ✗ None |
| Transparent published pricing ranges | ~ Generic FAQ pricing | ✓ Live + published price pages | ✓ Published averages per trip type |
| 24/7 phone & chat support | ✓ 24/7 phone, claimed | ✓ 24/7 phone + in-app messaging | ✓ 24/7 phone, claimed |
USC's three real advantages
- Tenure & track record. "Founded 2004, 300K+ trips, 12M+ Americans moved, FEMA disaster-relief partner" is unmatched messaging.
- Government & enterprise rolodex. GSA Schedule, federal contracts, F500 logos — competitors have to earn these credentials; USC already owns them.
- Existing marketplace tech. SubOut.com is real, proprietary, and operator-side functional. It just isn't exposed to consumers as a marketplace UX yet.
USC's three urgent gaps
- No instant quote. CharterUP wins every comparison-shopping buyer who Googles at 11pm. This is the #1 conversion leak.
- No customer-facing transparency. No live tracking, no operator ratings, no published prices, no public guarantee. Modern buyers won't transact $8K on faith.
- No account layer. Repeat corporate clients (the highest-LTV segment) have no reason to log in. The product literally ends at the receipt email.
The five features that have to ship — and how each one shows up as a CTA.
Each CTA is paired with a microcopy pattern (UX-PATTERNS.md § 1.1 — action + benefit), a behavioral lever (Fogg B=MAT, Cialdini), the Nielsen heuristic it satisfies, and the competitive moat it builds.
Verified Instant Quote in 60 Seconds
CTA copy: "See real prices in 60 seconds — no calls required"
Secondary: "Get quote →" (button) and "or talk to a planner" (text link)
Why: The single largest gap vs. CharterUP. Pulls live SubOut.com inventory + dynamic pricing into the consumer site. Closes the comparison-shopping leak: today, anyone Googling "charter bus rental [city]" at 11pm goes to CharterUP because it's the only one that returns a price.
Levers: Removes Fogg Ability friction (no phone call), satisfies Nielsen H1 (Visibility of System Status — buyer sees real prices), H7 (Flexibility — power users can self-serve).
Moat: Parity feature with CharterUP, but paired with USC's tenure makes it the trusted version.
The USC Trip Guarantee
CTA copy: "Backed by the USC Trip Guarantee — see what's covered"
Pairs with a trust band on every page: "On-time or 110% refund. Backup bus within 2 hours. Always."
Why: Directly addresses the BBB complaint pattern. Turns USC's operational risk into a marketing claim competitors can't match without ceding margin. CharterUP "tries to find a backup"; USC contractually guarantees one within a time window.
Levers: Cialdini commitment (the brand is making a public, expensive promise), Kahneman loss aversion (specifies the dollar value of failure).
Moat: Defensible by USC's network depth (7,000 vehicles, 44 states); a thin-network competitor literally can't promise this.
Federal & Fortune 500 Approved
CTA copy: "The bus operator trusted by FEMA, the GSA, and 200+ Fortune 500 teams"
Pairs with a logo wall + a dedicated "For Enterprise & Government" entry point in the nav.
Why: Competitors literally cannot say this. CharterUP is a 2018 startup; GoGo is a 2012 lead-gen brand. USC's GSA Schedule + FEMA disaster-relief track record is a permanent credential.
Levers: Cialdini authority + social proof. Particularly powerful for corporate buyers (the highest-LTV cohort) who need internal justification.
Moat: Permanent. Takes years and audits to qualify for federal contracts.
Live Trip Tracking + Driver Direct-Message
CTA copy: "Track your bus live. Message your driver. From the same place you booked."
Surfaces in the post-booking confirmation: "Live tracking opens 2 hours before pickup →"
Why: Parity with CharterUP, but turns the booking from a one-shot transaction into a multi-touch experience. The day-of-trip dashboard is the highest-emotion moment in the journey and currently gets zero attention from USC.
Levers: Nielsen H1 (Visibility), Eyal Variable Reward (the trip update is intrinsically engaging), reduces frantic support calls (operations win).
Moat: Once shipped, becomes table-stakes — but builds the account layer that powers CTA #5.
The USC Account: Recurring Shuttles, One Dashboard
CTA copy: "Manage every trip your company takes from one dashboard"
Targets the corporate-shuttle, school-district, and team buyer who books 4–40 times a year. "Start your team account →"
Why: Neither CharterUP nor GoGo has shipped a real account layer for recurring B2B buyers. This is the un-fought territory. Save quotes, reorder trips, invite teammates, set cost centers, see one consolidated invoice. Locks in the highest-LTV cohort.
Levers: Cialdini commitment & consistency (creating an account is a foot-in-the-door), Eyal investment (saved data = switching cost), Nielsen H6 (Recognition over recall — repeat bookers see past trips).
Moat: Network-effect-light but switching-cost-heavy. The longer a corporate buyer uses the account, the more painful CharterUP becomes.
Price-Match + Transparent Pricing Pages
CTA copy: "Found it cheaper? We'll match it — and give you $100 back."
Why: Bottom-funnel SEO targets ("charter bus prices [city]", "vs CharterUP") need a destination. Publish honest per-trip-type pricing pages. Pair with a price-match promise — Cialdini reciprocity + Kahneman loss aversion ("$100 back" anchors loss, not gain).
Moat: Operational — only feasible because USC's network buying power can absorb the match cost.
Hierarchy on the homepage
CTAs 1, 2, and 3 share the above-the-fold real estate. CTA 4 (tracking) is a post-booking surface, not a homepage CTA. CTA 5 (Account) gets a dedicated entry in the primary nav ("For Business →") and appears in the post-booking flow as the cross-sell. See hi-fi homepage for visual hierarchy.
Who we're actually designing for.
Three primary archetypes, each defined using Christensen's Jobs-to-Be-Done frame (USER-RESEARCH.md § 1.1). The 9 audience segments you selected collapse into these three patterns. Every wireframe decision below is justified against one of these.
"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."
- Context
- Booking on behalf of others; not the bus expert. Reports up.
- Trips
- Weddings, corporate offsites, school events, sports tournaments.
- Functional
- Get a price fast. See the actual bus. Lock it in.
- Emotional
- Fear of being the person whose bus didn't show up.
- Social
- Needs an itemized invoice to forward to finance.
- Pain
- Phone tag with brokers; opaque pricing; no visual of vehicle.
- Win metric
- Booked in < 15 minutes, no follow-up calls needed.
"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."
- Context
- Fortune 500, hospital systems, federal agencies, school districts.
- Trips
- Employee shuttles, conferences, disaster response, recurring routes.
- Functional
- Vendor due-diligence packet. MSA-ready terms. Consolidated billing.
- Emotional
- Wants the boring, safe choice — won't get fired for picking USC.
- Social
- Internal stakeholders need credentials, insurance, safety records.
- Pain
- Cap-table-style spreadsheets across many one-off bookings.
- Win metric
- Single account, single invoice, signed MSA.
"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."
- Context
- Volunteer or part-time coordinator; trips are not their day job.
- Trips
- Religious group outings, youth sports, senior clubs, casino runs.
- Functional
- Predictable price; ability to pay deposit + collect from members.
- Emotional
- High personal accountability to the group; wants reassurance.
- Social
- Will share reviews / social posts after a good experience.
- Pain
- Doesn't know what to ask for; intimidated by quote forms.
- Win metric
- Confident the driver will be there and the kids will be safe.
How each persona moves through the product.
Double Diamond shape: Discover → Define → Develop → Deliver. The flow below is the primary acquisition path. See Maya (the coordinator) — she's the volume archetype.
Primary flow · Acquisition → quote → booking → trip
City / Route / Trip-Type page]) --> B{Has trip
details?} B -- No --> C[Browse trust signals
· Reviews · Trip Guarantee
· Federal & F500 logos] C --> D[Try the quote builder
4 steps · ~90 sec] B -- Yes --> D D --> E[Step 1
Trip type + dates] E --> F[Step 2
Pickup → Destination] F --> G[Step 3
Passengers + amenities] G --> H[Step 4
Contact email/phone] H --> I{Eligible
for instant
quote?} I -- Yes · standard trip --> J[Quote results page
3–6 buses · live prices
· operator ratings · photos] I -- No · large/complex --> K[Hold for planner
'A USC planner will call in 15 min'
+ Trust Guarantee restated] J --> L{Selected
a bus?} L -- Yes --> M[Trip details page
· Itinerary editor
· Add stops · Amenities] L -- No · save & compare --> N[Save quote
· Email/SMS magic link] M --> O[Checkout
· 10% deposit
· Card on file] O --> P[Booking confirmed
Receipt + dashboard invite] P --> Q[Dashboard
Pre-trip checklist
· Operator chat
· Live tracking opens T-2hr] Q --> R[Trip day
Live bus tracking
· Driver direct-message] R --> S[Post-trip
Review · Rebook · Save to team] S --> T([Account upgrade prompt:
'Book again as a team' →
The USC Account]) K --> O classDef start fill:#0b2a4a,stroke:#0b2a4a,color:#fff; classDef decision fill:#fff4d6,stroke:#d97706,color:#5a3e02; classDef win fill:#dcefe1,stroke:#1b8a4a,color:#0e4a23; classDef alert fill:#fde7e3,stroke:#c2271f,color:#7a160e; class A,T start class B,I,L decision class P,Q,R,S win class K alert
Edge case flows worth calling out
- Returning user with magic link. Magic-link email/SMS skips Steps 1–4, lands on saved quote. Reduces re-friction (Nielsen H6).
- Multi-vehicle / over $5K. Auto-route to planner — but show the prices anyway so the buyer doesn't bounce.
- Last-minute (< 48h). Show only operators with verified live availability; surface an "expedited fee transparency" line so there's no sticker shock.
- Cancel / modify. Self-serve from the dashboard up to 7 days out; in-app chat with planner inside 7 days. Nielsen H3 (User control & freedom).
Where competitors lose buyers
- CharterUP: A buyer who clicks "request planner help" loses self-serve momentum and lands in a cold-call queue. We avoid this by making the planner an opt-in upgrade, not a fork.
- GoGo Charters: The PDF-emailed quote process loses ~40% between quote and confirmation (industry estimate). Our quote → checkout is one continuous session.
- Current US Coachways: No path from confirmation → second trip. We close this with the dashboard + Account.
The sitemap and URL system.
Built for SEO first (every URL is a ranking target) and for users second. Below is the canonical structure. Bold = pages we'll wireframe and ship in v1.
/"] R --> S[Solutions] R --> CITIES["Locations"] R --> ROUTES["Routes"] R --> P[Pricing] R --> T[Trust & About] R --> ACC[Account] R --> BIZ["For Business
/business"] R --> HELP[Help] S --> S1["Weddings
/weddings"] S --> S2[Corporate / Shuttles
/corporate-shuttle] S --> S3[Sports Teams
/sports-team-charter] S --> S4[Schools & Youth
/school-bus-rental] S --> S5[Senior & Tours
/senior-group-travel] S --> S6[Religious
/church-charter] S --> S7[Government & Military
/government] S --> S8[Casino & Entertainment
/casino-charter] S --> S9[Conferences
/conference-shuttle] CITIES --> C1["City template
/charter-bus-rental/{city}"] ROUTES --> RT1["Route template
/{origin}-to-{destination}-charter-bus"] P --> P1[Pricing overview] P --> P2["vs CharterUP
/compare/charterup"] P --> P3[vs GoGo
/compare/gogo-charters] T --> T1["About
/about"] T --> T2[Trip Guarantee
/guarantee] T --> T3[Safety
/safety] T --> T4[Reviews
/reviews] T --> T5[Careers / Operators] ACC --> Q["Quote builder
/quote"] Q --> QR["Quote results
/quote/{id}"] QR --> TD["Trip details
/trip/{id}"] TD --> CO["Checkout
/checkout/{id}"] CO --> DASH["Dashboard
/account/trips/{id}"] ACC --> DASH BIZ --> BIZ1[Enterprise overview] BIZ --> BIZ2[Government & GSA] BIZ --> BIZ3["Operator portal
/operators"] classDef ship fill:#0b2a4a,stroke:#0b2a4a,color:#fff; class H,C1,RT1,P2,T1,Q,QR,TD,CO,DASH,BIZ3,S1 ship;
URL principles
- One canonical URL per ranking intent — no
?utm=-based ranking pages. - City pages:
/charter-bus-rental/{city-slug}(matches CharterUP pattern, ranks today). - Route pages:
/{origin}-to-{destination}-charter-bus— bidirectional canonicalization, one of the two pages picks up. - Trip-type:
/{trip-type-slug}(e.g./weddings) — short URLs for brand-defining service pages. - Comparison:
/compare/{competitor}— high-intent bottom-funnel, must exist. - Application URLs (quote/checkout/dashboard) are
noindexand on the/account/*path for clean separation.
Nav hierarchy (header)
- Solutions (mega-menu of 9 audience pages)
- Locations (top 25 cities, "All cities" link)
- Pricing (transparent pricing + comparison pages)
- For Business (Account / enterprise / government)
- About (trust, guarantee, reviews, safety)
- Persistent "Get a Quote" CTA (primary button, top right)
- Persistent Phone number + "24/7" badge (secondary)
Eleven screens, mobile-first, grayscale.
Wireframes are blueprints, not products. Grayscale, bordered, placeholder copy. Every screen is annotated with the Nielsen heuristic it satisfies, the JTBD persona it serves, and the interaction pattern it implements.
01 Homepage
Hero quote-start + Trust Guarantee + Top 5 CTAs hierarchy. Maya & Robin.
02 Quote builder
4-step, ~90 sec. Progressive disclosure. Maya.
03 Quote results
Vehicle compare grid. Filter rail. Maya.
04 Trip details
Itinerary editor + amenities. Maya & Robin.
05 Checkout
10% deposit, secure card. Trust reinforced.
06 Dashboard
Live tracking + chat + rebook. All personas.
07 SEO city template
Programmatic city/route page. SEO-first.
08 Trip-type landing
Weddings / Corporate / Sports / etc.
09 Trust & About
Story, stats, guarantee, leadership.
10 Customer dashboard (mobile)
Day-of-trip optimized.
11 Operator portal (B2B)
SubOut.com refresh. Supply-side.
Eleven screens, glossy. Two visual directions on the homepage.
The full Hi-Fi Gallery polishes every wireframe screen to selling-point fidelity in Direction A — Trusted Refresh — paired mobile + desktop. The homepage exists in two directions (A and B) so leadership can choose; everything downstream is unified under Direction A.
Open the Hi-Fi Gallery · 11 screens →
Interactive prototypes · 4
Homepage A & B · Quote builder · Quote results — fully working flows.
Open Homepage A →Homepage · the two visual directions
Both keep US Coachways' blue/red — this is a refresh, not a rebrand. They differ in editorial weight, photography approach, and density.
The Trusted Refresh
For procurement buyers and risk-averse coordinators. Heavy navy, serif headers, photography of real buses + real drivers. Reads like an institution that's been doing this for 35 years. Recommended for v1 — all 11 gallery screens use this aesthetic.
Open Direction A · interactive →The Modern Marketplace
For the comparison shopper. Lighter, denser, closer to CharterUP's product-led aesthetic. Big map, live "buses available now" indicator, route-pricing front and center. Homepage-only — included so leadership can compare.
Open Direction B · interactive →Defending the paid budget with organic — the templates that have to exist.
Paid acquisition is replaced one organic ranking at a time. The five page templates below are designed to capture every high-intent query family. Each is a programmatic template, not a hand-built page.
| Template | URL pattern | Targets | Volume (est) | Priority |
|---|---|---|---|---|
| City page | /charter-bus-rental/{city} |
"charter bus rental [city]", "[city] bus rental", "minibus rental [city]" | 250+ cities, 5K–80K/mo each | P0 |
| Route page | /{origin}-to-{dest}-charter-bus |
"NYC to Boston charter bus", "DC to Atlantic City bus rental" | Top 500 routes, 200–8K/mo each | P0 |
| Trip-type page | /{trip-type} |
"wedding bus rental", "sports team bus", "school field trip bus" | 9 pages, 10K–60K/mo each | P0 |
| Vehicle-type page | /buses/{vehicle-type} |
"56 passenger coach", "minibus rental", "ADA charter bus" | ~8 pages, 8K–25K/mo each | P1 |
| Comparison page | /compare/{competitor} |
"us coachways vs charterup", "charterup alternative" | 3–5 pages, 1K–4K/mo each — very bottom-funnel | P0 |
| Guide / blog | /guides/{slug} |
"how to plan a wedding shuttle", "what does a charter bus cost" | ~50 pages over Y1, 1K–15K/mo each | P2 |
What every SEO template must contain (the skeleton)
- H1 with primary keyword + a single H2 with secondary intent.
- An inline quote builder above the fold. Don't make the user click "Get a quote" — start them on the form right here.
- 3 trust-signals row · DOT/MC numbers · 35-year stat · Trip Guarantee. Server-rendered, no LCP cost.
- City/route specific content · 250–500 words, local pickup landmarks, popular trip-types for this city, FAQ schema.
- Vehicle gallery with real photos and starting prices for this city (pulled from SubOut.com).
- Real reviews filtered to this city/route when ≥ 3 exist. Schema.org Review markup.
- Internal links · 6 nearby cities · 4 popular routes from this city · top 3 trip-types.
- FAQ section with FAQPage schema. 5–8 questions, real answers.
- Footer CTA · phone number with local area code if available, secondary quote button.
Core Web Vitals targets (non-negotiable)
- LCP < 1.8s on mobile 4G. Hero image is a single optimized AVIF, no carousel.
- INP < 200ms. Quote builder hydrates lazily — initial form is plain HTML.
- CLS < 0.05. Reserve space for every async element (reviews, vehicle gallery).
- HTML < 50KB compressed, server-rendered, critical CSS inlined.
- One JS bundle for the quote builder, code-split per route.
- Image strategy · CDN-hosted, AVIF + WebP fallback,
srcsetfor 4 breakpoints.
Schema.org per template
- City/Route →
LocalBusiness+Service+BreadcrumbList. - Trip-type →
Service+FAQPage+AggregateRating. - Comparison →
FAQPage+Article. - All →
Organizationwith DOT/MC numbers inidentifier.
Why this works
CharterUP's SEO advantage is largely structural: their city pages are templated and dense. GoGo's advantage is volume — they have a city page for every metro. US Coachways currently has thin, dated city pages and zero route pages. Shipping the route template alone is a meaningful unfair advantage because neither competitor has a programmatic route system.
Salesforce + Heroku — keep, refactor, or replace?
The honest matrix. Salesforce is the system of record and should stay. The web tier on Heroku is the decision point.
| Option | Pros | Cons | 5-yr TCO (rough) | Recommendation |
|---|---|---|---|---|
| A. Stay on Heroku, modernize the stack on it | Lowest migration risk. Heroku Postgres / Redis stay. Team's existing knowledge. | Pricing is 3–5× Vercel/Render for equivalent perf. No global edge CDN. CWV ceiling. Salesforce acquired Heroku — long-term roadmap uncertain. | $$$ — high ongoing | Tactical only — defensible if leadership prefers minimal disruption. |
| B. Web tier → Vercel (Next.js or Astro) · Salesforce stays | Best-in-class CWV, edge SSR/ISR critical for SEO templates, preview deploys, image optimization built-in. Direct Salesforce integration via REST/Bulk API. Strong dev market. | New CI/CD discipline required. Vendor lock-in for ISR. Pricing scales with traffic. | $$ — moderate | ✓ Recommended for SEO-led growth, low-ops team. |
| C. Web tier → AWS (ECS + CloudFront + RDS) · Salesforce stays | Full control, optimal at scale, GovCloud option matters for FEMA/GSA business. AWS Marketplace is already in USC's tech stack. | Highest ops overhead. Slowest team velocity. CWV requires careful CDN + image config. | $$ — moderate (heavy ops cost) | Conditional — only if government contracts demand FedRAMP/GovCloud. |
| D. Replace Salesforce too — Hubspot or custom CRM | Cleaner single stack. Cheaper CRM seats. | Re-implements years of Salesforce workflow, lead routing, operator data, GSA reporting. 12–18mo project of its own. Not recommended in this initiative. | $$$$ — highest | ✗ Not now |
The pragmatic recommendation
Option B — Web tier on Vercel running Next.js, Salesforce stays as system-of-record. Quote/booking/dashboard apps use Salesforce REST API for lead capture, opportunity creation, and contact records. SubOut.com remains the operator-side platform but exposes a pricing/inventory API the new site consumes. Keep Heroku Postgres for application-only data (quotes-in-progress, account sessions) — gradually phase out. This gets you elite CWV (mandatory for SEO-led growth) without re-platforming the CRM.
Integration map · v1
- Vercel ↔ Salesforce REST API (lead, contact, opportunity)
- Vercel ↔ SubOut.com API (inventory, pricing, operator data)
- Vercel ↔ Stripe (deposit, balance, refunds)
- Vercel ↔ Twilio (SMS magic links, trip updates)
- Vercel ↔ Segment (analytics → Salesforce + Mixpanel)
- Vercel ↔ Sanity / Contentful (city/route content)
What stays on Salesforce
- Lead routing & SLA
- Planner workflows
- Operator master data
- GSA / federal reporting
- Service-desk tickets
- Marketing automation
What moves to Vercel
- Marketing site (all SEO templates)
- Quote builder & checkout
- Customer dashboard
- Business account portal
- Compare / pricing pages
- Trust / About / Reviews
Atomic design system + design tokens + accessibility floor.
Stack-agnostic spec. Atoms → molecules → organisms → templates → pages (Frost, ATOMIC-DESIGN.md). The token layer below is portable; the component contracts are framework-neutral.
Color tokens
Spacing & type scale
// 4px base spacing scale --space-1: 4px; // hairline --space-2: 8px; --space-3: 12px; --space-4: 16px; // base unit --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; // Radii --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-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);
// Type scale (mobile / desktop) --display-xl: 44px / 72px // hero --display-lg: 34px / 52px // section --display-md: 26px / 36px // page --heading-lg: 22px / 28px --heading-md: 18px / 22px --body-lg: 17px / 19px --body-md: 15px / 16px // default --body-sm: 13px / 14px --caption: 12px / 12px --mono: 12px / 13px // codes, IDs // Families --font-display: "Söhne", "Inter", system-ui --font-body: "Söhne", system-ui --font-mono: "JetBrains Mono", ui-monospace
Atomic inventory · v1 components
| Atom / Molecule / Organism | States | A11y notes |
|---|---|---|
| Button (primary, secondary, ghost, danger) | default · hover · focus-visible · active · disabled · loading | ≥ 44px touch · 4.5:1 contrast · focus ring 2px outset · aria-busy when loading |
| Input (text, email, date, number, select) | empty · focused · filled · error · disabled · readonly | Label above; never placeholder-only · aria-invalid + aria-describedby for error |
| Quote-step segment | idle · active · complete · error | Each step a <section> · aria-current="step" · keyboard back/next |
| Vehicle card | default · hover · selected · unavailable · loading-skeleton | Card itself a <button> or <a> · full keyboard click · alt text on photo |
| Trust badge row | default | Decorative icons aria-hidden · figures of merit in text · honest claims only |
| Live tracking map | pre-trip · live · post-trip · GPS-unavailable | Text status as primary; map is enhancement · aria-live="polite" for ETA updates |
| Driver-message thread | collapsed · expanded · sending · failed | Real-time updates announced · scroll position preserved · SMS fallback |
| Quote-results filter rail | default · applied · cleared | Filter chip removable via keyboard · clear-all link · count announced on change |
| Pricing table (city/route) | default · sortable | Real <table> · scope="col" headers · captions describe scope |
| Modal (confirm cancel, edit itinerary) | open · closing | Focus trap · Esc closes · returns focus to trigger · backdrop click optional |
Accessibility floor (non-negotiable)
- WCAG 2.2 AA on every shipped surface.
- Contrast ratio ≥ 4.5:1 for body text, ≥ 3:1 for large text and UI components.
- Touch targets ≥ 44×44px on mobile; ≥ 32×32px with sufficient spacing on desktop.
- Every interactive element keyboard-reachable with visible
:focus-visiblering (2px solid, brand red, 2px offset). - Skip-to-content link, semantic landmarks (
<header>,<main>,<nav>,<footer>).
prefers-reduced-motionrespected: no parallax, no auto-playing carousel.- Forms: label above input, errors with text + icon + ARIA, never red-only.
- Live regions:
aria-live="polite"for ETA / status updates,"assertive"for errors. - Color is never the only signal (status uses icon + text + color).
- All images have
alt; decorative images getalt="".
Responsive breakpoints
// Mobile-first; min-width queries only --bp-sm: 480px // big 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 · cap content width at 1440
Full Developer Deployment Code
A copy-paste-ready handoff brief (Tech Stack · User Flow · Design Tokens · Component Contracts · Responsive Rules · A11y Checklist) is generated by the Spec Engineer mode of the UX skill. Request it after the wireframes are approved and we'll output the stack-agnostic version your dev team can scope against.
14 weeks to v1 launch. Then quarterly compounding.
Sequenced so paid SEM keeps converting at higher rates from week 4 onward — not waiting for a "big bang" launch.
Stand up the platform · ship the new homepage and one trip-type page
- Vercel + Next.js scaffold, Salesforce REST integration, Stripe keys, Sanity content model.
- Atomic component library v0 (buttons, inputs, cards, nav, footer).
- Homepage (Direction A, the Trusted Refresh) goes live behind a beta flag — 5% of paid traffic split-test.
- Trust Guarantee policy drafted, approved, published.
The 4-step quote → results → save flow
- Quote builder ships with SubOut.com inventory pulled live; pricing is read-only at first.
- Quote results page with vehicle compare grid, filter rail, "save quote → magic link" flow.
- SMS / email magic-link infra via Twilio + Postmark.
- Split-test: 50% paid traffic → new flow, 50% → legacy. Measure quote-completion rate.
Self-serve booking and the post-booking experience
- Stripe checkout for 10% deposit, balance scheduling, refund automation.
- Customer dashboard v1: trip details, itinerary edit (T-7d cutoff), operator chat (SMS bridge), live tracking placeholder.
- Trip Guarantee enforcement: backup-operator alert wired to ops team.
- Cut over 100% of paid traffic to new flow.
The compounding asset · city, route, comparison templates
- City page template (250 cities seeded from existing SubOut data).
- Route page template (top 500 routes by current search volume).
- 3 comparison pages (vs CharterUP, vs GoGo, vs local broker).
- Trip-type pages (9 of them, full content + CMS).
- Schema.org markup, sitemaps, 301 redirects from legacy URLs.
Day-of-trip dashboard and the team account
- Live GPS tracking surface (operator GPS feed → customer dashboard map).
- Driver direct-message via SMS bridge.
- USC Account (B2B): saved trips, team members, cost centers, consolidated invoicing.
- Operator portal (SubOut.com) refresh — same design system, lighter scope.
Public launch · DNS cutover · paid creative refresh
- DNS cutover from Heroku to Vercel for marketing surfaces.
- Salesforce-driven legacy URLs 301'd.
- Paid creative refreshed to reference instant quote + Trip Guarantee.
- PR push: "USC launches instant-quote marketplace with industry-first Trip Guarantee."
The compounding loop
- Q1 post-launch · Add 25 cities/quarter to programmatic SEO surface. Build out guides.
- Q2 · Mobile app (React Native, reuses the same atoms). Driver-side app for operators.
- Q3 · International expansion if margin allows. Procurement marketplace features (RFP-style for F500 buyers).
- Q4 · AI trip planner — describe your event in natural language, get a recommended fleet.
Per-page rebuild map (current site → new site)
| Current US Coachways page | New equivalent | Ships in | Notes |
|---|---|---|---|
| Homepage | Hi-fi homepage (Direction A) | Week 1–2 | Quote builder embedded above the fold |
| Get a Quote (form) | 4-step Quote Builder + Results | Week 3–5 | Replaces RFQ entirely |
| Service pages (Weddings, Corporate, etc.) | 9 Trip-type landing pages | Week 9–11 | New template, same URLs (301 from legacy) |
| City landing pages | City template (programmatic) | Week 9–11 | Seed top 50 in week 9, balance over Q1 |
| Our Story / About | Trust & About page (new) | Week 1–2 | "35 years, 300K trips, FEMA" as hero |
| Pricing FAQ (current generic) | Pricing + Comparison pages | Week 9–11 | Per trip-type, per city; comparison vs CharterUP/GoGo |
| Operator pages (SubOut.com) | Operator portal refresh | Week 12–13 | Same design system applied; functionality kept |
| (missing) | Quote Results · Trip Details · Checkout | Week 3–8 | New surfaces — no legacy equivalent |
| (missing) | Customer dashboard · Live tracking | Week 6–13 | New surfaces |
| (missing) | USC Account (B2B) | Week 12–13 | New surface — the LTV unlock |
| (missing) | Route pages | Week 9–11 | New SEO surface — competitive wedge |
| Contact · Help · Terms | Same, refreshed | Week 1–2 | Trivial port |
The North-Star metric
Cost-per-booked-trip from paid acquisition, measured weekly. If the new homepage + quote builder doesn't materially move this metric by week 5, we stop and re-diagnose before continuing. Everything else (SEO, account layer, tracking) is a compounding play — but if conversion doesn't improve, the foundation is wrong.
"I do not decorate. I architect decisions. Every wireframe is a hypothesis. Every spec is a contract." — The Designer's Oath, UX skill