Lead engineer
Jackie Mack Designs
Custom configurator and engraving flow for an artisan jewelry brand, layered onto a headless WooCommerce stack with a streamlined single-page checkout.
- Checkout conversion
- +22%
- Configurator drop-off
- −41%
- Avg. order value
- +14%
The problem
The previous multi-step checkout was bleeding ~30% of carted orders. The product configurator was a heavyweight plugin that rebuilt the entire DOM on every option change — fine on desktop, painful on mid-tier mobile. Engraving was a separate post-purchase email exchange, which delayed fulfillment and lost edge-case orders.
My role
Lead engineer end-to-end: configurator UI, engraving capture, single-page checkout flow, and the WooCommerce-side metadata wiring that carries engraving instructions into the order email and admin view.
Approach
The configurator is a single React island that diffs option state and only re-renders the affected variant images. Engraving is captured inline with character validation, font preview, and a confirmation modal — captured as line-item meta so it survives the cart-to-order transition without a custom plugin.
Checkout collapsed to one page: address, payment, review. Stripe Payment Element handles the card capture; cart, shipping calculation, and order placement happen client-side against the WooCommerce Store API with optimistic UI on success.
Outcome
Checkout conversion improved 22% in the first month. Configurator drop-off — measured as users who opened the configurator but never added to cart — fell 41%. Average order value rose 14%, driven mostly by the engraving option being visible at the right moment in the flow.
Stack