Zodiac Nautic boat configurator

Zodiac Nautic asked me to build them a 3D configurator and website for 4 of their latest boats: the N-Z0 series. If you don’t feel like reading but you do want a configurator yourself: get in touch!

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.

A walkthrough of the configurator

Team

To take on this project I’ve teamed up with Frodo Schering for the design and Innouveau for the website development. Together we have the ideal combination of skills needed: 3D, design and development.

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.

Fast integration

Integrating a realtime 3D configurator based on Sketchfab into a website is a very clean process. In our case, we also built this website but adding such a configurator into existing websites is technically not a very big challenge. There is little code to deal with. A rendered configurator needs lots of code to manage all images. It’s very difficult to integrate a rendered configurator into an existing website.

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.

Sketchfab embed of the NZO 680

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. We’ve used slack with the entire team to communicate. It makes it easier to keep track of what’s going on and reduces the number of emails and CC’s to a bare minimum. On another level, using slack, or another instant messaging platform for that matter, makes communication less antagonistic. This tends to happen with emails where bulleted lists of important issues battle it out. IM lowers the threshold to deal with issues right away, resulting in less escalation. Of course, we’re all very nice people to work with. That helps too!

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. This integrates nicely with slack. 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

We’re all very proud of the final result and hope to be able to continue working with Zodiac Nautic, adding boats and options along the way.

Antoine Heber-Suffrin, head of digital innocation at Zodiac Nautic:

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.

If you’d like to hear more about this project or if you need a configurator yourself: get in touch!

Links

Visit the final configurator website here.

A blog article by Sketchfab covering the configurator.