Black loading icon spinning in a loop.
Thömus
·
2023

Award-winning 3D bike configurator

White loading icon spinning in a loop.

Summary

Problem statement

Thömus leads globally in customizable high-tech bikes, but customers struggle to visualize and configure their custom bikes independently, causing uncertainty and hesitation. On the other hand, the sales team lacks tools for remote, user-centered consultations, limiting customer experience and slowing international growth.

Solution

The solution is an award-winning e-commerce 3D bike configurator.

Role

When I took over, a mid-fidelity 2D configurator prototype was already in place. I took on the role of lead product designer.

Mindnow is a Swiss startup offering digital product development with nearshoring solutions.

Thömus is a Swiss high-tech bike manufacturer specializing in innovation and professional sports.

Award-winning result

The launch marked the beginning of a long-term partnership between Thömus and Mindnow. Together, we won the Best of Swiss Web Award Bronze in the category “Technology” – the first award in Mindnow’s six-year history. Through my proactive and strategic consulting, I played a significant role as part of a dedicated team in achieving an upselling of ≈ 20 % of the initial budget.

“The 3D bike configurator is a unique experience for our customers. Our expectations were not only met, but exceeded. The collaboration with Mindnow was always pragmatic and solution-oriented.”
— Daniel Uebersax, COO & CMO at Thömus

Challenge

The deadline was 45 days to transform a mid-fidelity prototype into a comprehensive product concept and ensure the timely start of the multi-month development phase.

The sales team urgently needed a solution to manage growing stocks and maintain sales momentum. An early launch was crucial.

Product vision

Thömus aims to expand the brand internationally. This led to the long-term vision of largely digitizing the Thömus experience: From the first touchpoint with the brand to the delivery of the bike and participation in events.

With an online 3D configurator, the sales process is no longer tied to a specific location and the customized bikes are given a realistic appearance within seconds. Two birds with one stone.

The first step in a grand vision.

Project strategy

The majority of the design budget had been used up. To achieve the project goals, I needed a powerful team while finding a way to conserve resources. Oleh, our most efficient UI designer, and Roman, our most versatile junior UX designer, formed the cost-effective backbone.

The mid-fidelity prototype had not yet been subjected to a user test before I took over the project. Due to the limited resources, in consultation with the development team I formed a project strategy in which design and development were closely interlinked so that a user test could be carried out.

Project timeline outlining key phases and tasks: project takeover, start of development, soft launch and official launch.
Overview of the project’s key phases and tasks.
Graphic: Lyle Peterer

Co-CEO Jakob saw this as an opportunity and additionally entrusted me with the overall project management and the management of the development team as Product Owner.

User groups and requirements

The focus lay on two primary user groups.

Comparison examines two user groups: Thömus customers and sellers with varying tech familiarity and age ranges.
Graphic: Lyle Peterer

With conflicting requirements and limited resources, we had to carefully balance the needs of both user groups. We knew the product could fail if either group was dissatisfied.

Graphic comparing user requirements of Thömus customers and sellers.
User requirements compared
Graphic: Lyle Peterer

The current mid-fidelity prototype risked overwhelming 60-year-old customers with little technological comfort, according to the principle of “cognitive load”. There were many possibilities to satisfy both user groups equally, but the budget set clear limits.

Example of such a possibility

A central idea that exceeded the available resources was the expert mode. Non-experts would have a simple experience, while advanced users (e.g. salespeople) could use the full complexity.

User flows and layout

We were tasked with building a stand-alone configurator, including e-commerce. To achieve this, we worked backwards from the mid-fidelity prototype, leveraging as many existing elements as possible to ensure a high level of consistency.

Three example user flows demonstrate the purchase of a Thömus bike: fully online, online with salesperson assistance and in-store.
Three possible user flows when using the configurator, which must work seamlessly.
Graphic: Lyle Peterer
Desktop screen showcasing a minimal bike category selection interface.
The first screen was deliberately kept simple to keep the design and development effort to a minimum and allow the team to focus on more complex features. Enhancing with images can be done later if time allows or offered as an upsell.
Desktop interface facilitating step two, allowing users to select a bike model.
In the second step, users select a model.
Desktop interface showcasing the bike’s configuration mode.
In configuration mode, the bike can be customized down to the smallest detail. Using the Z-shaped pattern, we ensured a consistent page structure throughout the entire user experience.
Desktop interface showcasing the checkout process.
Following Jakob’s Law, we analyzed proven checkout solutions and incorporated their flows and patterns into our design to achieve high usability as quickly as possible.

Responsive design

To ensure a seamless user experience, I collaborated with developers to define a clear overview of breakpoints. This allowed us, as designers, to make more informed decisions about the logic and maintain a consistent responsive design. At the same time, this approach helped to minimize the effort required in frontend development.

Design screens simulating edge cases of responsive design.
Screen behavior: Using various edge cases, we simulated the responsive design and thus conveyed a logic to the developers.
Photo: Lyle Peterer
Color-coded breakpoints highlight logic changes.
Breakpoints: Color coding enabled us to quickly identify logic changes in breakpoints.
Photo: Lyle Peterer
Three mobile screens showcasing the responsive design.
The result: A mobile view with intuitive thumb navigation from start to finish.

Key features

Each key feature was carefully revised and integrated in close collaboration between designers, developers and stakeholders.

Using my custom-developed method, the “Focus Shift Challenge”, we were able to improve solutions within minutes, ensuring higher quality despite time pressure.

Customer features

Desktop interface featuring a size calculator to determine the ideal bike frame size.
Size calculator: Calculates the ideal frame size based on the user’s height.
Desktop interface showing custom color feature to let users personalize bike colors.
Custom color: Lets users personalize their bike’s colors, subtly deepening their emotional connection to the product.

Salesperson features

A desktop interface displaying a product carousel to select and customize bike components.
Products carousel: Enables sellers to make various adjustments at speed – made for power users. A simplified solution, such as a step-by-step guide, would have undermined the priority of personal consultation.
Mobile interface showing encrypted product stock information.
Encrypted stock: To prevent sellers from exposing the ERP system (enterprise resource planning) to customers during consultations, we discreetly and securely integrated stock data into the user interface.
Graphic: Lyle Peterer

Design system

To ensure a highly consistent user experience, we created a comprehensive design system and a digital brand style guide for all future digital projects from Thömus.

The brand style guide provided by a branding agency served as the basis. However, it required adjustments to suit the needs of a complex web app, which I spearheaded. Two main changes:

New font family: The primary brand font, “Gentona”, with its high x-height and open counters, is well-suited for the web. However, its wide letterforms and unsuitable weights make complex screens challenging. To address this, I defined a font mix.
Animation: Lyle Peterer
Adjusted color concept: The distinctive Thömus red is key to brand recognition, but excessive use in interactive applications can cause confusion. To solve this, we reserved red exclusively for interactive elements. New black and white tones with a magenta tint were introduced to enhance the product’s premium feel, based on color psychology.
Animation: Lyle Peterer

As Design Manager at Mindnow – a role I held alongside the Thömus project – it was important to me to document the design system in detail. The aim was to strengthen the autonomy of the frontend team in design-specific questions and provide them with a solid foundation.

“We’ve never experienced a superior design handover in any of our past projects. The depth and precision set a new benchmark for Mindnow, making the work notably smoother for us frontend developers.”
— Filip Stoisavljevic, Frontend Developer at Mindnow

Live testing and optimizations

Lacking resources for a clickable prototype, I developed the solution to conduct a usability test directly on the live configurator through a soft launch. This enabled us to gather valuable, user-centric feedback at an early stage of development and implement crucial optimizations in a timely manner.

Next to my responsibilities as Mindnow’s design manager and project manager, I simultaneously led development and ongoing design optimizations as lead product designer and product owner. In a young company like Mindnow, without established processes or a superior design expert, I was in this hybrid role largely self-responsible.

Usability test

We invited three groups to take part in the usability test: Thömus employees, former customers and potential new customers. Each group went through a series of tasks and answered questions about their experience. Testing with the early development stage of the live configurator was a challenge and had a negative impact on the test results. Nevertheless, we were able to gain crucial insights.

Laura (UX researcher) and I supervised the test while James (UX intern) handled the execution.

The two biggest optimizations

Configurator instructions

Pain points: Onboarding confused users about where to start with the configuration. Many also did not realize that the 3D model is interactive.

Approach: Together with UX writer Marina and intern James, we used a user journey map to spot the causes.

User interface showing updated UX microcopy to clarify terminology.
Adjusting the UX copy helps clarify the “game rules” right from the start.
Graphic: Lyle Peterer
To counter the UX principles “People Don’t Read” and “Paradox of the Active User”, we relied on visual language. Therefore, I proposed a GIF that briefly demonstrates the configurator’s interactivity while bridging the loading time.
Animations: Lyle Peterer

Support feature

Pain points: Most customers do not buy a bike in this price range without personal advice. Users were therefore unsure how to send their configuration to Thömus.

Approach: In close coordination with Thömus, the development team and the design team, I gathered requirements and defined one leading question: How can we make it as easy and pleasant as possible for users to get in touch?

Desktop user interface with a pop-up window in which three specific needs can be selected.
The popup lets users choose from three specific needs. This segmentation helps Thömus match them with the right consultants. Our goal was to keep the barrier for users as low as possible in order to boost lead generation.

Learning

Excellent user experience is not created beforehand but throughout the entire product development process. It emerges through iterations across all phases, interdisciplinary collaboration, continuous exchange with users and a shared understanding of quality.


For data protection reasons fictitious personal names have been used.