Skip to content
Lumina

A configurator for a modular speaker system

Twelve modules, four finishes and a stand — assembled in the browser and priced as you build.

Client
Halden Audio
Year
2025
Discipline
Product configurator
Our role
Design, WebGL, front-end

The challenge

The challenge

The system sold in modules, so every customer needed a different combination — and the old site asked them to work it out from a PDF compatibility chart. Support was fielding the same six questions every day, and the configurator the team had trialled took eleven seconds to load on a phone.

The approach — 3 moves

What we did

  • 01

    We modelled the range as one parametric assembly rather than as 48 separate product photographs, so adding a finish later is a material swap, not a reshoot.

  • 02

    Compatibility rules live in the same typed config as the geometry. An invalid combination cannot be selected, which removed the error state entirely instead of designing one.

  • 03

    The scene streams in behind a static render of the default configuration, so the page is interactive before WebGL has finished compiling shaders.

The configurator with a three-module stack selected
Finish picker showing the four lacquer options
Module compatibility shown inline as the stack is built
Checkout summary listing the assembled configuration

Outcome

What changed

Add to cart
+34%
LCP on 4G
1.9s
Support tickets on fit
−62%

Built with

  • Next.js
  • React Three Fiber
  • Draco
  • Shopify Storefront API

Next project

Product pages you can turn the chair on

Brackett Furniture / 2025 / 3D web experience