Award-winning 3D configurator
Thömus is a renowned Swiss high-tech bicycle brand committed to excellence. In the area of digitalization, this is reflected in an excellent e-commerce solution with a 3D configurator. For this showcase project, Mindnow won bronze at the Best of Swiss Web Awards in the category “Technology” in 2023.
The time for digital transformation had come
Thömus’ mountain, road, and city bikes are developed, designed, and individually produced in Switzerland. Under the motto “Swiss made to fascinate”, the company has stood for high-tech for over 30 years. Another reason for Thömus' good image was due to the personal customer service in the stores.
The expansion of a digital business was supposed to continue the success story. The reason there hadn’t been a Thömus webshop before was the complexity of the product: The customization options of a Thömus bike are so extensive that in principle each one is unique.
Thömus’ founder Thomas Binggeli was ready to take some bold steps and tackle the digital transformation. By the time the project started, there hadn’t yet been a mature 3D configurator on the internet in the way we wanted to build it. Our team was super motivated for the new challenge.
Section by Vadim Kravcenko
CTOTop-notch headless e-commerce technology
Before Thömus’ digital transformation, most of the sales happened offline. The main pain point of the former online solution was that customers couldn’t configure bikes with personalized components. Thömus doesn’t sell standard bikes, most of them are tailored to the habits, expectations, and needs of an individual. Each bike is the best bike for a particular person and that’s the reason why a standard webshop isn’t enough for Thömus.
API development
The biggest issue we came across was the large amount of unstructured product data that came with the bikes. We first needed to develop an API integration that synchronizes all data with both the Enterprise Resource Planning (ERP) and an interface of the Thömus website. So we created a separate AirTable environment to store all 3D models, position data, and visual links. The suitable environment allowed us to speed up the 3D designer's development process.
An Application Programming Interface (API) is a way for 2 or more programs or components to communicate with each other. It’s a type of software interface that offers a service to other pieces of software.
Architecture with Saleor
We changed from WordPress to the Saleor platform to increase the amount of leads and sales for our partner Thömus. Besides a sophisticated webshop, the sales team should be able to showcase bike configurations when consulting customers in the store.
Saleor is an e-commerce solution where the frontend (presentation layer) of an e-commerce system is decoupled or “headless” from the backend (business logic layer). Its centerpiece is Saleor GraphQL API that processes complex online store logic. More information on saleor.io.
We suggested Saleor, due to its API-first modular and headless approach. Thanks to that, we can model whichever behavior we want and set up complex data structures to fit Thömus’ needs. We built integrations with a proprietary ERP system, with a marketing automation platform, and with e-mail providers.
This headless e-commerce framework now serves as the heart of Thömus’ digital experience. It allows users to configure their dream bike according to their individual needs and is used by the sales team to increase company revenue, online and offline.
Section by Vadim Kravcenko
CTOSection by Bogdan Djukic
Senior Frontend DeveloperFrontend with automated processes
We developed the frontend of the Thömus configurator using the React framework, a library for web and native user interfaces. This retrieves all the necessary data, prices, links, and configuration options from the API.
Using the API and existing data allowed us to automate many processes in content management. For example, the 3D image of the configured bike is created automatically. It’s then displayed in the subsequent order process. This means that customers not only see the product name of what they ordered in the confirmation e-mail but also a detailed image of their personalized bike.
To make this possible, we added a function in the frontend that renders a static 3D image with the individually selected parts. Then we configured the CMS so that it automatically creates a high-quality PNG image and saves it in the database. In the images, the dark colors of the bikes are set to be lightened and stand out visually against the partly dark background.
Section by Bogdan Djukic
Senior Frontend DeveloperOur triumph at the Best of Swiss Web Awards
With the Thömus 3D configurator, we at Mindnow have once again proven: “We don't just talk the talk, but walk the walk!” At the Best of Swiss Web Awards 2023, we won the bronze award in the category “Technology”.
If you're unfamiliar with the Best of Swiss Web Awards: It's the crème de la crème of international recognition for ingenious web and tech creativity. Founded in 2001, the award sets the bar for quality, promotes transparency in the ever-evolving tech industry, and celebrates the superstars of the web and ICT industries.
We combined our love of technology, a knack for problem-solving, and a drive for innovation to develop this breakthrough solution. Our ambition and courage to take risks and break new ground have earned us this award.
Section by Patrycja Habarta
Senior UX DesignerUpdate 2024: Conversion and lead generation
Our collaboration with Thömus began with an innovative and award-winning configurator and continues to evolve, with a focus on conversions and lead generation. Even subtle changes can have a big impact on user experience, ultimately resulting in more successful purchases.
Deeper engagement throughout the purchasing journey
We've reimagined loading screens, turning them from mere technical elements into moments of anticipation, fostering curiosity and deeper engagement. Throughout the entire purchasing journey, we consistently implemented the endowment effect. By strategically employing language choices like “your bike” and showcasing captivating imagery of the dream bike, we guide the user's attention toward their desired product, fostering a deeper sense of ownership and attachment.
The endowment effect is the finding that people are more likely to give positive feedback to a specific item if they own it. Humans tend to prefer objects they already possess over those they do not and they place them at a higher value, too.
Improving affordability with installment payments
When considering making a purchase, price is often a significant factor for customers. Thömus bicycles, known for their exceptional quality, often come with higher price tags, which can make potential buyers hesitate. To address this challenge, we suggested implementing installment payment options. As a result, Thömus collaborated with bob Finance to provide customers with the flexibility to pay for their purchases in installments.
By highlighting the monthly price, perceived as more affordable, while simultaneously ensuring transparency regarding the total cost, we have significantly boosted conversion rates. Additionally, right under the total price, a spot where users pay the most attention according to eye-tracking tests, we provide another option for those not ready to buy yet. By guiding them toward requesting a quote, we capture their contact information, enabling Thömus to provide personalized assistance later on.
Our approach in this case, as in other projects, is rooted in a continual journey of enhancement and innovation, aligning with our partners‘ growth and technological advancements. By catering to diverse user needs and preferences, we aim to ensure that every interaction with the brand leaves a lasting and positive impression, ultimately resulting in effective conversions.
Section by Patrycja Habarta
Senior UX DesignerSection by Vadim Kravcenko
CTOFully-native AR experience
The latest feature we added to Thömus’ configurator in 2024 is Augmented Reality (AR). Users can fully customize their dream bike and view it in full, realistic size in their chosen environment. All details are high definition and can be evaluated as in real life.
The AR functionality is made possible because of the systems’ flexibility in terms of the granularity of 3D models attached to the scene. Each part can be separately exchanged and rendered as part of the bike in a fully-native AR experience.
The AR preview of the configured bike can also be shared in case customers want to ask others for their opinion about their bike.
A fully customized configuration of a Thömus bike in full, realistic size previewed on our office’s balcony
Section by Vadim Kravcenko
CTOA game-changer for bike enthusiasts inside and outside Switzerland
The Thömus 3D configurator is no ordinary e-commerce solution – it’s an absolute game-changer for all bicycle enthusiasts. It gives users the unique opportunity to design their bike down to the smallest detail, from the frame to the tires to the seat. And it all happens in real-time, with precise 3D visualizations directly in the browser. A stroke of genius, if we may say so.
The technology behind the interface is also a huge advantage for Thömus as a company. The Swiss family business continues to expand its network of points of sale and the comprehensive 3D configurator with its interfaces to internal systems is a decisive advantage in this venture. The e-commerce stack enables a migration to any server and therefore easy horizontal scaling. As a result, the configurator can be easily adapted to new requirements of franchise partners and target markets at any time.
The personal service of Thömus for each market
The bike configurator makes it much easier to win partners abroad who want to offer their customers the individual buying experience of Thömus. The detailed 360° product view also opens up the possibility of selling Swiss high-tech bikes in countries where physical stores would not be profitable.
Franchise partners abroad can thus offer the same personal service that customers receive in Switzerland. It's always a seamless experience – no matter which market.
