Zodiac Nautic asked me to build them a 3D configurator and website for 4 of their latest boats: the N-Z0 series.
The requirements were:
- pick color options
- pick equipment options
- orbit around the 3D model in realtime
- see the price of the chosen configuration (in three currencies)
- share a configuration on social media
- download a pdf with a summary of the configuration
- get in touch with a local Zodiac dealer
- use 5 languages (Zodiac Nautic is operates globally)
- work on desktop, tablet and mobile
There were 4 boats which needed to be included at first with the possibility of adding more boats and options later.
The configurator has increased sales of a particular model by 50% in 2 years (and that’s our most expensive boat). So yeah, we’re happy with it!
Benefits of a realtime configurator
The use of a realtime 3D model instead of a configurator based on rendered images has a few implications. At first, some clients tend to shy away from realtime 3D technology because it appears less realistic than high quality rendered images. And to a certain extent this is true. Not every product will shine yet as a realtime 3D model. But the advantages of realtime 3D technology over rendered images are very compelling.
Easy changes
A realtime model can be changed through an API. Changing a color is pretty easy. But adding new colors the next season is just as easy. This is very different with rendered images, where usually a lot of new images (hundreds or thousands) have to be created to add just a single color. Adding a new color to a realtime 3D configurator doesn’t really make a difference where adding a color to a rendered configurator increases its complexity exponentially. This makes a realtime 3D configurator a sustainable investment.
Freedom of movement
A realtime 3D model gives the viewer unlimited freedom to look at the product from all sides, zoom in and out. A rendered 3D model is limited to fixed camera angles. Adding a new camera angle means adding lots of extra renders.
VR and AR ready
Finally, although it might sound fancy and gimmicky, the 3D content of a realtime configurator can be used in VR headsets. A Zodiac is a $80.000 product. That’s not something you spend without getting a doog idea of what you’re getting. While you can’t touch the actual product through the website, using a VR headset is the next best thing. This hasn’t been implemented in this project (yet) though.
Sketchfab
In this project, the benefits of a realtime system outweighed those of a rendered system. I’ve chosen to use Sketchfab as the engine to display the 3D models. Sketchfab has just the right API to change colors and show and hide equipment options. It has a great support staff and it takes little effort to get the maximum visual quality.
3D models
Zodiac Nautic supplied the 3D models of four different boats. At first these models were too big to use but we’ve worked together to optimize them. They’re still quite heavy, but Sketchfab is able to handle them very well now. I’ve prepared the models for configuration and I’ve set up the materials, colors and options. Finally I’ve written the code for the Sketchfab configurator using their API.
Process
Just like with a regular website, building one with a configurator requires lots of communication. I was very glad to work with Antoine Heber-Suffrin from Zodiac as a single point of contact.
Design and website
The graphic and interaction design has been created by Frodo Schering based on an initial design done by the client. We’ve used Zeplin to communicate the designs. The website is completely custom made by Innouveau and features everything you’d expect of a normal website but with the added 3D configurator. It was a blast working together with Frodo and Innouveau!
Testimonial
At Zodiac, we had a general idea of what we wanted to offer our dealers and future customers in terms of immersive online configurator. But the path to execution was not very clear for us. Working with Klaas and his team was an invaluable experience, as we benefited from the consulting of experts in web development, design and 3D, which allowed us to push such a disruptive product in the boating industry, within time and budget. This tool became a game changer for us as far as marketing our products is concerned, and we’ll adapt it to our entire range in the near future.
Antoine Heber-Suffrin, head of digital innocation at Zodiac Nautic