Jenson USA

Full-Stack E-Commerce Engineering

Embedded as a full-stack engineering team within Jenson USA — America’s largest independently owned online bike and adventure shop — our work spanned every layer of a high-traffic Optimizely CMS e-commerce platform serving cyclists across 30,000+ SKUs. Every engineering decision was made with performance, conversion, and accessibility in mind.

Frontend Engineering

Our frontend work centred on translating multi-breakpoint Figma design systems into clean, maintainable HTML5, CSS3 and JavaScript with zero deviation from approved specs. We built and maintained component libraries covering product listing pages, product detail pages, promotional banners, mega-menu navigation and checkout flows — each engineered to WCAG 2.1 accessibility standards and optimised for Core Web Vitals.

Key deliverables included a fully responsive product grid with real-time faceted filtering, a dynamic PDP image carousel with lazy loading and aspect-ratio-locked thumbnails, and an interactive size-guide modal in vanilla JavaScript. We adopted BEM methodology with CSS custom properties throughout, enabling rapid design iteration without regressions across the 30,000+ product catalogue.

Figma to Code — Pixel Perfect at Scale

Every component began life as a Figma frame and ended as production-grade code. Our workflow involved extracting design tokens — color, spacing, type scales, shadow layers — mapped directly to CSS custom properties. We maintained a strict handoff protocol: annotated redlines, responsive behaviour documentation, interaction state specs and animation easing curves all captured in Figma and faithfully reproduced in code.

Edge cases unique to e-commerce scale received particular attention: products with 12+ image variants, truncated titles across breakpoints, out-of-stock badge states, promotional price overlays and bundle configurations. Every state defined in Figma, engineered in code, and verified across Chrome, Firefox, Safari and Edge before shipping.

JavaScript & Monetate Personalisation

We authored JavaScript-based Monetate actions that dynamically injected UI components, swapped promotional banners, modified product recommendation carousels and altered checkout messaging based on customer segmentation rules. All DOM manipulation followed a non-blocking pattern deferred past the critical rendering path to prevent layout shift, with clean rollback mechanisms per experience.

Custom analytics events were instrumented within each action to feed conversion data back to the merchandising team. Additional bespoke JS modules included: sticky add-to-cart bars on scroll threshold, live inventory countdown timers, a recently-viewed products widget via localStorage, and a progressive search autocomplete with debounced API calls and client-side result caching for sub-100ms response times.

Backend — C# .NET & Optimizely CMS

Jenson USA’s backend runs on Optimizely CMS (formerly Episerver) — an enterprise .NET content management and commerce platform. We built custom content blocks, authored API controllers for product, inventory and pricing services, and developed scheduled jobs for PIM-to-storefront catalogue synchronisation.

We engineered a custom faceted search integration combining Optimizely Find with client-side JavaScript filtering, delivering sub-200ms response times across 30,000+ SKUs. C# middleware handled category tree serialisation, promotional pricing rule application and real-time stock injection — all optimised through strategic output caching at Optimizely and CDN layers. Additional work included custom visitor group criteria for Monetate segment synchronisation and a service layer abstraction decoupling the frontend rendering pipeline from direct Optimizely API calls.

Cross-Browser Testing & QA

At Jenson USA’s traffic volumes, a cross-browser bug is a revenue event. Our QA process covered a defined browser matrix — Chrome (latest and -1), Firefox (latest and ESR), Safari 14+, Edge Chromium and iOS Safari — across viewports at 320px, 375px, 768px, 1024px, 1280px and 1440px. We maintained a living test suite covering product discovery, filtering, variant selection, add-to-cart, cart modification, checkout entry and order confirmation.

Performance benchmarking ran after every significant release via Lighthouse and WebPageTest, tracking Largest Contentful Paint, Cumulative Layout Shift and Total Blocking Time as primary KPIs. Frontend bundle sizes were monitored through webpack bundle analysis, with code splitting and dynamic imports applied to non-critical-path features.