Case Study

Designing a real-time 3D configurator for custom motocross gear

I designed and built the end-to-end e-commerce experience for Ride MFG, centred around a real-time 3D configurator that allows customers to preview their kit.

I delivered this project solo touching on UX, UI and development. The project solved Ride MFG's biggest usability issue in the ordering journey and significantly reduced the chance of error.

RoleDesigner & Developer

ScopeUX, UI, Front-end, 3D Configurator

PlatformShopWired (Twig + Tailwind + Three.js)

AccessibilityWCAG 2.1 AA

Ride MFG case study hero image
01Problem

Riders couldn’t accurately see what they were ordering

Customers selected their kit colours through the product form without any real-time visual feedback. Instead, they had to rely on a static reference image to understand how colours applied across the kit, then wait for a designer to manually create and email a proof.

This created predictable issues

01Logos vanishing into backgrounds
Brand graphics swallowed by similar tones.
02Contrast nightmares
Combinations that looked fine in the form and wrong on the printed kit.
03Mismatched orders
Riders received proof concepts that didn’t match what they pictured. Creating more revision rounds than necessary.
04Manual clean-up for the team
Every confused order needed a human in the loop.
Old static key image and form-based colour picker, the experience riders had to navigate before checkout
Before: a static key asked riders to imagine the result, and then select a colour from the product form and interpret where and how it would look.
02Insight

Customers needed to see the kit before ordering.

Adding validation or warning messages would only mask the problem and shift issues further down the process. It quickly became clear that the kit needed to update in real time as colours were selected.

03Solution

Reframing the experience through product decisions

Rather than refining the existing flow, I reworked the experience to give customers immediate visual feedback throughout the customisation process.

  1. Decision 01

    Replace the static preview with the 3D Model

    Customers had no way to see what they were ordering before checkout. A live preview updated instantly as colours changed, making issues like poor contrast immediately visible.

  2. Decision 02

    Show outcomes instead of preventing errors

    Poor colour combinations were displayed in immediately within the viewer, allowing customers to spot issues and self-correct.

  3. Decision 03

    Separate semi-custom and bespoke design journeys

    The semi-custom configurator and fully bespoke design service solved different customer needs. Splitting the journeys created a clearer path for each.

  4. Decision 04

    Migrating the platform to support scale

    The existing Wix setup limited how deeply the customisation experience could integrate with the product flow. As part of the redesign, the platform was migrated to ShopWired to support the new real-time configurator and overall UX.

  5. Decision 05

    Build from a blank theme for full UX control

    A ShopWired skeleton theme with Tailwind and Twig meant nothing was already styled. No existing patterns to undo before the design work could start.

After: a real-time 3D configurator. Colour selections render on the model live, with full rotation to inspect every angle.
04Deep Dive

Real-time feedback in the browser

The configurator is the core of the product. Built using Three.js, it renders the jersey in the browser with separate material layers for each customisable area.

Default kit rendered in the brand’s starting colours

Fully interactive configurator with guided controls

Customers start with a preset design that can be customised in real time using colour controls mapped directly to the live 3D model. This removes guesswork and makes the impact of every change immediately visible.

Customisation controls showing isolated colour zones and logo upload

One control per panel, mapped to the live model

Each colour input was mapped directly to a specific area of the kit, replacing the old system where customers had to colour swatches against a static reference image.

Blue on blue rendering exposes a contrast failure inside the configurator

Lets customers see the bad combinations

The previous system silently accepted any combination. Contrast nightmares like Blue on Blue or logos lost in matching backgrounds only surfaced when the proof was later emailed.

07Reflection

Building directly in the browser changed how decisions were made.

Instead of designing static screens in Figma, the experience evolved through interaction, performance constraints, and real user behaviour. Working this way exposed usability problems much earlier, especially around how customers interpreted colour changes and panel mapping in real time.

What ships next

  • Name and Number combinations

    Customers can add and style their name and numbers on the back of the

  • In-browser logo upload

    Pull the bespoke logo step into the configurator flow.

  • Shareable preview links

    A URL that opens the configurator with someone else’s build for feedback.

Building something where the buyer has to imagine the result?

If your product asks the user to picture the outcome before they commit, I’d want to talk.

Get in touch → See more work