Product films, launch visuals and interactive experiences.

Tell us about your brief Book a 15-minute call
View all pages

Service

Product Configurator.

XO3D configurators let buyers explore approved product options in a browser, with a clear path from the selection to the next conversation.

Start a conversation

Selected clients

Sony work via ImageNova. Ferrari and Burberry work via KCD.

Product choices, made visible.

A product configurator lets buyers choose permitted product options and see the corresponding result. The visual can use prepared image layers or a real-time 3D model; the appropriate route depends on the choices, views and destination website. XO3D, a director-led product CGI studio in Stevenage, UK, prepares the models, materials and rendered views needed for the agreed colour, finish, size or component options. New geometry and additional views may need further production. Controls, interactions, supported browsers and integration are agreed before development, previews are shared at each milestone, and the finished experience is delivered as embed code or a component for the agreed product page, campaign site or sales tool. Performance and a static fallback are part of the brief.

On whether to use a configurator platform or a CGI studio

When a brand asks me whether to use a 3D configurator platform or commission a CGI studio, my first question back is: what level of quality does your product configurator need?

Come to a CGI studio and define exactly how you want your product to look, and the studio can make a custom build. That can mean much higher quality, and more features or fewer, depending on what you need.

Thomas Howcroft, Founder and Creative Director, XO3D. From the essay “Configurator platform or CGI studio?”

Why it works

Choices the buyer can see.

Make the options clear.

Show buyers what changes between approved options. Measure understanding and completed next steps against the existing experience.

Build the agreed options.

Prepare the models or image layers each option needs. Define valid combinations and unavailable states before development.

Cross-platform performance.

Set a device and browser test matrix, asset limits and an accessible static fallback before release.

Integration scoped to your site.

Review your platform, security policy and data handoff before choosing an iframe or component integration.

What we deliver

Scope the right outputs.

  1. 01

    Colour & Finish Selectors

    Switch between the available colour, finish or material options in one view. The viewer shown is a studio demo, not client work.

  2. 02

    Interactive Visualisers

    Beyond simple selectors, interactive walk-arounds, exploded views and hotspot annotations all in one experience.

Process

Define the experience before development.

  1. 01

    Share the brief.

    Send CAD files, reference imagery and the configuration options you want to offer.

  2. 02

    Define the experience.

    We agree controls, interactions, platforms (web / mobile) and integration before development starts.

  3. 03

    Build and refine.

    Configurator developed through structured stages, with shareable previews at every milestone.

  4. 04

    Deliver and embed.

    We provide an embeddable experience ready for your CMS, ecommerce platform or sales tool.

Acumen: product options and website integration

XO3D built the Acumen furniture demonstration from 114 rendered image layers. Visitors can change timber grade, table edge, wood finish, leg shape and steel-frame finish. The demonstration shows how prepared renders can show product options without a real-time 3D model.

XO3D’s web developer, Lemuel, handled integration into the client’s website. Later option updates were not included in that project. For a new configurator, agree the available choices, permitted combinations, integration responsibilities and update scope before development. The configurator feasibility guide explains those decisions.

The Rollink Flex 360 project shows the modelling and imagery behind a product range. Configurator platform or CGI studio? explains the distinction between the colour selector on XO3D’s site and the configurator built by Rollink’s team, alongside the model preparation needed for browser and AR delivery.

FAQ

Common questions, answered.

How do you choose between a 360 viewer and a configurator?

We will decide by looking at the client product and what features and what add-ons the product may or may not have. Whether they need a simple 360 viewer, or they need to be able to configure and show multiple different colors or configurations of the product. Like add-ons, for example a baby cart that might have different kinds of wheels, different kinds of arms, different kinds of fabrics, colors, etc.

What do you check before a configurator is approved for mobile?

So the checking on a mobile phone of the 360 viewer or configurator is done, depending on what the process, whether we're creating one or the other. A lot of the time it will be done at the end of the project so that we're checking it's all correct and everything looks and feels correct. However, knowing that we also need to make sure early on that the phone is going to require a certain amount of megabytes of data so that it's able to load quickly. So through experience we know that models need to be roughly 10 MB, and then they can load quite quickly on most devices.

What is a product configurator?
A product configurator lets buyers choose permitted product options and see the corresponding result. It can use prepared image layers or a real-time 3D model. The choices, views and destination website determine the appropriate approach.
What platforms does a configurator run on?
The supported desktop and mobile browsers are agreed in the brief and tested before release. A static fallback covers unsupported environments.
Can it integrate with my ecommerce platform?
Integration depends on the platform, available extension points and required data handoff. We review those requirements before confirming the implementation.
Is a colour selector the same as a product configurator?
A colour selector switches between finishes for a set product. A configurator can offer additional choices such as components or features. On the Rollink Flex 360 project, XO3D created the 3D modelling and imagery for four sizes and eight colourways. Rollink's team built its own website configurator using that imagery; the experience on XO3D's site is a colour selector.
Can our developers build the experience using XO3D's assets?
Yes. Rollink is an example of a client team implementing its own website experience from imagery created by XO3D. Agree who supplies the models or renders, who builds the interface and who owns integration before production. The asset commission and the website implementation need a clear handoff.
What could customers configure in the Acumen furniture project?
The Acumen furniture demonstration combines 114 rendered image layers. Its controls let visitors change timber grade, table edge, wood finish, leg shape and steel-frame finish. XO3D's web developer, Lemuel, handled integration into the client's website. The demonstration shows the image-layer approach; the options and permitted combinations for a new project are agreed against that product's range.
Are later configurator updates included automatically?
Later option updates need an agreed scope and owner. They were not included in XO3D's Acumen project. Agree responsibility for new product options, replacement assets and website integration before commissioning a configurator.

Start the conversation

Got a product with variants? Let's configure it.

We reply to every brief personally, usually within one working day.

About the studio

XO3D is a director-led product CGI studio. Founded by Thomas Howcroft in 2017 and incorporated as XO3D Ltd (UK Companies House 11876020) in 2019, when Alex Mann joined as co-founder. Based at the Business and Technology Centre in Stevenage, UK, with representation at 244 Fifth Avenue, New York. We work with tech, industrial and premium consumer brands on product films, launch stills and interactive experiences.

  • Studio Stevenage, UK · New York representation
  • Company XO3D Ltd · Companies House 11876020
  • Contact info@xo3d.co.uk · +44 20 3488 3437

Planning your project

Choices the buyer can see.

A product configurator lets a visitor change permitted options and inspect the result. It is useful when choosing a finish, component or arrangement is part of understanding the product.

XO3D develops interactive product experiences around the decisions your buyer needs to make. The visual model, option rules and destination website are scoped together.

Tell us about your brief
G-Lab mechanical keyboard shown in a directed product frame
G-Lab mechanical keyboard. Explore the project
A configurator validates permitted options before updating the view, explains unavailable choices and supplies a static fallback.
A configurator validates permitted options before updating the view, explains unavailable choices and supplies a static fallback.

Define the decision.

A finish selector, a rotating viewer and a configurable assembly solve different problems. Start with the product range and the choices that matter.

List the valid combinations, unavailable combinations and information the experience needs to return. A configuration should not show something the buyer cannot actually order or commission.

Protect the visual standard.

A browser asset has different requirements from a film render. Geometry, textures and lighting must preserve the important details within an agreed performance budget.

Plan the close-up views and material comparisons before optimising the model. Test on representative mobile devices as well as desktop screens.

Agree the integration.

An embed may suit one brief; a component connected to a product system may suit another. Confirm the platform, data ownership, accessibility, analytics and maintenance responsibilities before development.

A saved configuration, basket connection or quotation workflow is an integration requirement. It should be specified rather than assumed.

Judge it against the right outcome.

Measure whether buyers use the relevant controls, complete their intended next step and encounter errors. Compare against the existing page where an appropriate test is possible. Time spent interacting alone does not establish a commercial improvement.

Questions before development.

Will it work on our website?

We assess the actual platform, browser requirements and data connections before confirming the implementation.

Does a configurator always improve conversion?

No outcome is automatic. The experience needs to resolve a real decision and perform well on the devices your buyers use.

Start with the options.

Share the product, permitted variations and destination page.

Further reading: Model Viewer: browser integration reference · Khronos glTF: real-time asset format

Updated