MAB Testing Accelerator

Overview

Developed a custom Chrome Extension to bypass the multi-step CMS publication cycle for homepage banners. By injecting real-time style overrides and asset swaps directly into the browser, the tool enabled instant validation of image crops, copy placement, and CTA alignment before any content was committed to the production pipeline.

Problem

Setting up a Multi-Arm Bandit (MAB) test with 12-14 variants required a high-friction, manual workflow. Between managing multiple image crops and complex metadata in the CMS, the process was easily prone to errors that could only be caught after a lengthy publication and CDN propagation cycle. This made it difficult for teams to iterate quickly on high-stakes homepage content.

Constraints

• Multi-Device Support: The tool had to accurately handle various screen resolutions and device breakpoints by mapping multiple image sizings/crops to their specific CSS media queries.
• Targeted Asset Swapping: It had to identify specific element IDs on the page to ensure new test images were inserted into the appropriate component background without affecting the rest of the site's layout.
• Non-Invasive Architecture: The solution had to function as an external utility, allowing for a "live preview" of assets already processed by the CMS without requiring any changes or hooks within the production codebase.

Approach

I identified that the primary bottleneck was the set up time between receiving assets and design/stakeholder sign off. I built a Chrome Extension that identifies the unique style blocks used by the homepage Hero component. The extension provides a UI to input a CDN image base path and then programmatically rewrites the media queries in the browser's DOM. This allows for 'live prototyping' of any image asset instantly.

Key Decisions

Tech Stack

• JavaScript (Chrome Extension API)
• CSS
• DOM Manipulation
• WCM/CDN Architecture

Result & Impact

• Reduced from hours to minutes
  Validation Time
• Utilized by Design and Product teams for MAB test validation
  Team Adoption
• Eliminated redundant CMS publication cycles
  Efficiency

This tool turned a high-friction engineering task into a self-service design process. By empowering designers to test their own assets in a live environment, we removed engineering as the middleman for visual QA.

Learnings

• Internal tooling is often the highest-leverage work an engineer can do to speed up the process and allow developers to work on important feature work.
• Internal tools don't need to be complex to be high-impact; sometimes a simple browser utility is the most effective way to bypass a massive platform bottleneck
• Small, scoped tools (like an extension) can solve enterprise-level bottlenecks without requiring backend refactoring.