Development of the Trailer Configurator
Cross-platform compatability was important. 95% of users were on mobile devices.
Overview
Team Lodge, a premium manufacturer of trailers for hauling, fishing, camping, and hunting, partnered with me and my good friend Hugo Jönsson to revolutionize how their customers shop online. We developed an interactive trailer configurator that transforms visitors into customers by allowing them to customize every detail of their trailer.
An overview of the project accomplishments.
“It has been a pleasure working with Adam and Hugo to develop the Team Lodge Configurator. We had dreams about this solution for years, and they made it happen in a few short months!”
Introduction
I had been working with Team Lodge since the summer 2023. Initially, I did custom designs of trailers, I would render a few images and we would then iterate back and forth on the design with the customer. When I started to use Verge3D to create interactive 3D webpages I felt I had found a superpower. The customer could view and interact with the design by simply clicking a link, even on their phones. This workflow enables quick iterations and there are minimal questions as the user sees it right in front of them. We could add descriptions tagged to different parts of the trailer and it was possible to show and hide the roof with the click of a button.
Over time, the idea of making a trailer configurator formed and that is what this blog post is about.
The Challenge
Before we started this project, Team Lodge used a Microsoft form as a way for interested customers to “build” a trailer. They were running ads on Facebook and were getting some leads, but the majority of these really just wanted to ask a few simple questions, for example about the price. The form also required you to submit your personal information before you’d even seen any trailer options, not to mention there were few to no visuals in the whole form. They needed a way to better inform and engage potential customers. They also needed a way to be able of changing the data in the configurator (price, descriptions, available upgrades etc.) and receive lead information into their CRM system.
The challenge was to produce higher quality leads and better questions for a complex product.
The original form for building a Team Lodge trailer. It was far from optimal and produced many questions and few buyers.
The Team Lodge trailers are complex products, they have packed a lot of features into one package, and one of the main challenges was to present this in a compelling and natural way.
This is where adding a third dimension to your product can make a huge difference. If you think about it, everything we see around us is in three dimensions, it is simply a more natural way to explore anything. When we can see it lifelike in front of us, many questions are already answered. It also enables multiple exciting possibilities, such as real time interactions with the trailer, like animations and sounds. Not to mention, the produced 3D models can also be used for marketing material, such as realistic renders and videos.
Our Approach
“What is so powerful with this approach is how close we can get to the final product, with minimal time investment.”
Requirement Specification
The first step in our approach is to understand what we are going to build. What does our client need, and what would our client’s customers enjoy? To arrive at this as quickly as possible we start with conversations with the client. In this case, we had several conversations back and forth and finally landed on a first requirement specification. This is a document that outlines the key features we are going to implement. Note that this is not set in stone but rather a guide for our process. We will always learn new things and get ideas for how to do things differently as we go, that is half the fun!
A snippet of an early version of the requirement specification for the Team Lodge Configurator. It is simply a list with what we are going to make. It becomes the foundation of the next steps.
Visual Prototype
With a requirement specification in place, a suitable next step is to produce a visual prototype. This is sort of a requirement specification but visual. Assuming all the logic and assets were available, what would the final result look like? Below you can see the first visual prototype that we did for this project. It is literally just a Powerpoint slide with different shapes to illustrate the final product. What is so powerful with this approach is how close we can get to the final product, with minimal time investment. With this approach we can get a good idea of the final result in a matter of hours, rather than weeks or even months.
An early visual prototype for the configurator. Visualizing the end result early helps identifying the critical touchpoints for the user.
MVP - Minimum Viable Product
With a requirement specification and a visual prototype in place, it is time to develop the MVP, the Minimum Viable Product. This is the next milestone in turning the concept into reality. This is where the most important features and challenges are solved. If we can make the MVP, we can make the whole application. By identifying the most important/challenging parts of a project, we can make sure to solve those first. This is key, as one otherwise might focus on the simple things and add time to parts that would have to be redone anyway when we realize that the most important part did not work as planned. Rank all features according to their importance and how challenging they are. The ones that are both important and challenging are your first targets.
This was the MVP for the Team Lodge Project. It focused on getting all the configurations and interactivity working. The goal is to answer questions as quickly as possible, not to be polished.
“Focus on the most crucial and challenging parts first. If you can solve those, you are golden! If you can’t then you have invested minimal time and can reassess your approach.”
Asset Creation and Development
With the MVP successfully developed, we can start the production phase. This is the longest part and includes several steps but it can be divided into two main steps, Asset creation and Development. Note that it is still wise to work in the order of what’s most important and most challenging, even though the top-ranking ones have been solved in the MVP.
Blender was our main 3D production tool. I am obsessed with it and could talk to you for hours about the latest trick I learned.
“The visuals they create perfectly depict our product offerings, bringing them to life with incredible accuracy. Their ‘3D wand’ is a powerful tool, helping us effectively educate customers about our products and the various options available.”
Asset Creation
The asset creation is where all 2D and 3D assets are created. For a project like this, the 3D assets can easily take up half of the development time. At Visby, we use whatever tools bring us the fastest and best results. Adam is our main 3D artist and his tool of choice is Blender, which he happily would share tips and tricks for whomever is willing to listen. Blender integrates seamlessly with Verge3D which is a toolkit for producing web experiences. This enables us to quickly prototype and develop high-quality 3D experiences with fast iterations and minimal development overhead.
A pleasant side effect of the Asset Creation is how useful 3D models are for producing other types of content. We suddenly have the 3D assets needed for beautiful renders and animations, or even to make Virtual Reality experiences. These are very powerful and are great extensions of the 3D configurator. An example of this can be seen below, as the Mountainlander model could be used for some stunning camping pictures.
The 3D models can be reused for many purposes - for example high fidelity renders.
Development
The development entails all the coding of the things happening in the background. Without the code, it would just be a still picture, it might be pretty but it helps no one. Following is an iterative workflow of producing assets, developing new features and integrating them. Bug testing, bug squashing, some back stretching, and grass touching. Rinse - repeat, until we have reached the product we envisioned in the requirement specification. We continually touched base with our Team Lodge and made sure we were going in the right direction.
Results & Impact
After several weeks of development we finally could launch the configurator under the sub-domain configurator.teamlodge.com. Please try it out and let us know what you think! There are many features in this configurator and an overview is given below.
Feature list
7 models
44 upgrades and extras
Trailer Specifications Overview
Mobile and desktop compatible
Go inside the trailer
Multiple Custom Designed Icons
Sub-domain to Teamlodge.com
Color selection
Interior Design selection
Camp mode & Haul Mode
Sound effects
Share configuration with a link
Database integration
Dynamics CRM integration
Customer Information Form
And more…
What Team Lodge thinks
Here are some quotes from people we worked with at Team Lodge.
“It has been a pleasure working with Adam and Hugo to develop the Team Lodge Configurator. We had dreams about this solution for years, and they made it happen in a few short months! Adam and Hugo demonstrate unique abilities to make creativity come alive! They understand how to put themselves in the user’s shoes to implement an amazing experience. Definitely looking forward to a continued partnership with them!”
“The Team has been a fantastic resource for our company. The 3D configurator they developed is truly a game changer—setting a new standard in our industry with its exceptional level of detail. On the backend, the integration with our Dynamics CRM has been seamless, and they have been instrumental in helping us maximize all the tools needed to convert leads into sales. We couldn’t be more pleased with their partnership and support.”
“These guys are awesome. The way they can bring an idea to life is impressive. If you are wondering if they can do it the answer is yes they can.”
Final Words
This project was very exciting as it let us explore a new use case for interactive 3D websites. It was a joy to work with Team Lodge on this project. Feel free to contact me if you have any projects or ideas you would like to explore. Thanks for reading!
