Global outdoor-gear brand · Outdoor & mobile-living gearA condensed mega-nav rebuilt from the accessibility tree
The client's own split-URL header test had a broken cookie and four configuration bugs. Rather than depend on it, I built the condensed navigation as a self-contained variant that reads its data from what the server already renders.
- The existing header exposed an eleven-link strip. The proposed header collapses it to Products, Activities, Journal and Sale with mega panels.
- Live verification of the client's split-URL mechanism showed the server ignored and then deleted the cookie it set, so persistence was broken site-side.
- The Convert configuration had four bugs, including a split-URL pattern that redirected non-matching URLs to the raw variation string.
A condensed bar with structured mega panels will lift navigation engagement and product discovery, and it can be tested without waiting for the client's header deployment.
- Parsed panel data at runtime from the server-rendered accessibility nav tree, which is identical in both arms and carries clean canonical URLs.
- Injected the bar as a sibling of the native strip so the click goals resolve identically in control and variant.
- Panels appended to the body as fixed-position layers, with their top edge recomputed on open, scroll and resize.
- Rebuilt the panel layout from the real on-demand-mounted DOM captured live, not from mockups.
- Resilience stack: element gate, body class after HTML, an eight-second late-hydration guard, a debounced mutation observer on the header, and a capture-phase outside-click close.
Failing safe
If the accessibility tree is missing, the script aborts before adding the body class. The visitor sees the untouched control rather than a half-built header.
Reading the tool's runtime
Deriving an idempotent split-URL regex meant reading how Convert actually applies the pattern, because a non-matching URL redirected literally to the variation string.
Measured on header nav clicks, panel link clicks, product discovery. Test results belong to the client and are shared in conversation, with their permission, rather than published here.
More experiments
View all →AU office-furniture retailer · A buy-first product page built as a theme template
A full product-page redesign delivered as an alternate Shopify template over eighteen build rounds: gallery, purchase panel, cross-sell, compare, showrooms and a new footer, with an honest above-the-fold budget.
The hard part. Keeping every native behaviour, from variant pricing to freight bands, working through a hidden buy button, while the theme editor quietly overrode settings the template thought it controlled.
SA daily-deals marketplace · A promo banner that sits after exactly sixteen products
Place one banner after the sixteenth card, aligned to a row end, on a virtualised, lazy-loaded grid with mixed-width tiles. Simple brief, hostile page.
The hard part. The clearance page unmounts cards as you scroll and keeps only a few dozen of five hundred in the DOM. A naive placement 'chased' the scroll position and kept moving.