HanseYachts AG – Hanse 510
How do you design an intuitive 3D configurator for the yacht market?
As a German sports boat manufacturer, HanseYachts produces motor and sailing yachts. As the supporting agency, we were able to optimize the existing web application for yacht configuration both technically and visually for the launch of the new “Hanse 510”.
Our solution: A web-based 3D configurator with responsive design as well as integration into the customer’s existing marketing information system (MIS).
Intuitive & interactive
From design data to the personalized experience
We developed a clear and guided operating concept that allows potential customers to explore the various exterior and interior configuration options.
20,000 Pixel sroll depth
Initial situation –
2D web form
The previous web form for selecting all variants and options for the Hanse 510 had a scroll depth of over 20,000 pixels.
We developed a clear and guided operating concept that allows potential customers to explore the various exterior and interior configuration options. The key to user-friendliness here is the automatic and individual focus on the particular yacht element being configured.
Challenges 3D design data
Over 1,000,000 polygons comprised the 3D model, which we received from the construction.
The performance of a 3D configurator is largely dependent on the number of polygons on the model. We are working here with a target size of 20,000 – 30,000 polygons. To achieve this number, we use our 3D data pipeline, which reduces oversized 3D objects with almost no loss of quality. Subsequently, we enrich the reduced 3D objects with the appropriate textures and shades, so that a realistic overall impression is created.
Over 30 screen resolutions
Over 30 different screen resolutions across various end devices had to be displayed.
Adaptive and responsive layout elements have been used to ensure a user experience across all devices. The 3D configurator can be operated by mouse on the desktop as well as by touch on the cell phone.
Seamless data flow
Challenges CRM connection
The configurator should not be just a gimmick. The desired configuration should be transferred directly into the individually developed CRM system.
For the transfer into the CRM system we use an API interface. The configurator generated a machine-readable JSON file, which can subsequently be read and assigned directly by the CRM system. This creates a seamless distribution and sales process.
At a glance
3D configurator for luxury yachts
We developed a clear and guided operating concept that allows potential customers to experience the yacht configurator in an explorative way. We have developed an individual configurator that shines through strong integration into the system landscape and a connection to the customer’s content management, which is easy to use and can be used across multiple brands – in other words, the best yacht configurator on the market.
- 3D data management and data conversion
- 3D modeling, texturing and shader programming
- Development of a customer-specific configurator framework without view-based follow-up costs based on Three.js
- Central color and decor management for multiple configurator instances
- Individual interface connection to the customer’s Management Information System (MIS)
- Development of a responsive operating concept for all common end devices including small smartphones
- Integration of further attractive features, such as multi-language capability, light/dark mode, autozoom feature , manual 360° view and virtual staging with wave animation
- Interior and exterior views of the yacht
- visual animations that create dynamics
- Multi-language capability
- Light/Dark Mode with automatic detection
- Individual interface connection to the customer’s internal marketing system
- guided configuration
- automatic and individual focus point per configuration step
- manual 4 axis rotation of the 3D model incl. Zoom
- Automatic centering if required
Secure and Expand.
We could convince you? Or do you still have questions?
Our experts will be happy to provide you with information or talk to you about your individual use case.