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.
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: Cloudflare 403-blocks AI crawlers. 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}/.
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).