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 personalized account home built only from native BigCommerce modules — the bridge between the reskin and the full dashboard. Plus a phases review deck.
Purchase history turned into a re-buyable list with cadence hints, plus "based on recent purchases" modules across the storefront.
The #1 surface (32% of sessions) brought under Caster: elevated hero search, grouped autocomplete, query SERP with facet accordions.
The full top nav: find-by-machine + by-brand + 5 category groups, lighter dropdowns for the other sections, mobile accordion.
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: buy-the-equipment CTA, most-bought parts, full documentation library, specs, service entry, related models. 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.
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.
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).