Working mockups for shop.usaclean.com, organized by the path a buyer actually takes — find & navigate, evaluate & decide, cart & checkout, and account & retention. Click through any surface, then dig into the brief behind it. Built on the Caster Design System.
These are interactive HTML mockups, not a working store — built to make the proposed IA, search-first behavior, and merchandising tangible so the team can click through, react, and refine before any of it gets built into BigCommerce. The work is grouped below by funnel stage; each feature links to its live prototype and the brief behind it. For a presentation-style walkthrough of a single feature, see the review decks.
The Tennant page lists 252 machines before a single part. Three clickable directions (machine-first, parts-first, brand hub), each split into quick wins, near-term and future, with OOTB, app and custom called out.
Where each prototype feature stands on shop.usaclean.com, with the evidence and what is left. The store runs on the prototype's foundations; navigation and the retention features are the biggest gaps.
A freight-benefit loyalty program — not points. Tier engine built on native Customer Groups; National Accounts walled off from day one.
Two concept detail pages for the X-series machines (spec-forward vs guided, real product photos) plus a full compare experience: listing checkboxes → tray → compare page.
What AI assistants can actually see of the live store. Headline finding in July: Cloudflare 403-blocked AI crawlers (lifted since, per the live-site audit). Four-layer scorecard + staged fix plan.
A subscription option in the PDP buy box for consumables — cadence picker wired into the v2 PDP, concepts brief behind it.
A personalized account home built only from native BigCommerce modules — the bridge between the reskin and the full dashboard. Plus a phases review deck.
B2B operators don't shop categories — they shop their fleet. These surfaces get a buyer from "I know my machine" to "here's the part" with the fewest steps: a buy-language taxonomy, machine lookup everywhere, search under Caster, and one rich hub per model.
Six intent-led top-level sections and a flatter, machine-typed taxonomy that matches operator language ("walk-behind scrubber," "ride-on sweeper") instead of internal SKU groups. The annotated sitemap explains every change.
The same make/model/serial intercept wherever intent shows up: the homepage hero finder, header-search suggestions, the megamenu featured panel, and the PLP filter cascade.
The #1 surface on the site (32% of sessions) brought under Caster: elevated hero search, grouped autocomplete, a query SERP with facet accordions + filter chips + mobile drawer. The brief makes the "skin Hawk vs. replace its rendering" call.
The complete top nav: full-bleed Find Parts megamenu (find-by-machine + by-brand + 5 category groups + promoted strip), lighter dropdowns for Equipment / Supplies / Service / Resources, and a mobile accordion.
One rich hub per machine model. Phase 1 ships four elements — model info header, documentation library, dispatch-a-tech CTA, related models — the subset that needs no catalog-wide data work. The parts grids and specs card land in Phase 2 with the compatible_models[] tagging. Production URL /parts/by-machine/{brand}/{model}/.
One template for ~399 brand pages, with Tennant as the example. A routes you to your machine, B shops parts on the page, C is a brand hub with documents and service. Recommendation: A, plus C's documents strip, plus B's filters in two steps. Decision pending.
Once a buyer is on a product or listing page, these patterns close the gap between browsing and buying — raising AOV and confidence. All four ship in BC Stencil native for Phase 1; each brief documents the data signal that justifies graduating to Phase 2.
Two concept detail pages for the X20BT (Option A spec-forward vs Option B guided, real product photography) plus the compare experience: listing checkboxes → sticky tray → compare page with grouped specs and diff toggle. Decision pending → PD-005.
Ship a low-friction Frequently Bought Together pilot first, then graduate to the configurator only if the data justifies it. Both concepts render side-by-side on the prototype PDP.
3-tier "1–5 / 6–11 / 12+" table on the PDP that live-highlights as qty changes, PLP card badges, and cart nudges + a summary savings line. Native Bulk Pricing Rules.
A "Guides & Videos" tab on the PDP with PDF + video doc-cards, plus a mobile floating button for field-tech access. Product Custom Fields drive it.
Honest urgency: exact count under threshold ("Only 3 left"), "In stock" above. On PLP cards, PDP related items, cart rows, and the account fleet snapshot. No synthetic-urgency theater.
B2B buyers don't decide everything in one sitting. The cart has to hold work-in-progress without forcing a checkout — and make it trivial to come back and finish.
Per-item Save / Move actions with the saved list inline below the active cart; totals + badge recalculate live, no reload. Amazon's canonical pattern on BC's native Wishlist API. Phase 2 adds named lists for recurring procurement.
Durable, account-scoped "Q2 reorder" / "Building 3 standing order" lists, aligned with how Grainger and HD Supply structure persistent B2B surfaces. Backed by B2B Edition Shopping Lists.
For accounts paying tens of thousands a year on Net-30, the account area is the relationship. These surfaces turn it from a transaction record into a personalized home — and turn purchase history into the cheapest, highest-trust personalization a parts site has.
A staged path: a Phase 0 theme-only reskin, a new Phase 0.5 personalized home (native modules only), then the Phase 1 full dashboard with the named account-team card. The review deck maps all the phases side by side.
A free, login-gated status program for the self-serve buyer — the technician, the single-location buyer, the owner-operator. Tiers ride on native BigCommerce Customer Groups, so they cost nothing; the reward is a lower free-freight threshold, which is worth 5–10× what a points program returns on the same order. National Accounts get a rebate instead — that boundary is one database field wide.
Purchase history deduped into a re-buyable list with cadence hints ("bought 4× · ~every 6 wks · due now"), filters, and save-to-list — plus "based on recent purchases" modules on home, PLP, PDP, cart, and a returning-guest bridge.
Fleet roster of registered machines with status badges, due-by indicators, and one-click parts access. The equipment-side counterpart to the account dashboard's fleet snapshot.
Every feature has a Phase 2 and Phase 3 documented in its brief, gated on real post-launch data. Phase 1 is the bet; Phase 2 is the data-justified iteration. The most-likely first follow-ups:
The reasoning behind the prototype: a brief per feature, the Caster Design System that everything is built on, and the project-level references (IA, roadmap, decisions, guidelines). For presentation-style walkthroughs, the review decks turn a single feature into a click-through overview.
The token source, component library, and showcase every prototype page in this repo consumes. Caster class names deliberately match the prototype's (.btn, .product-card, .pill) so the eventual BigCommerce swap is a stylesheet replacement, not a refactor. .scroll-row + .reorder-row graduated to Caster in v0.16.3 (decisions D26/D27).