Dainese Custom Works: Personalize Motorbike leathers in Interactive 3D

Cover
Personalized motorbike leathers made-to-order

Dainese was looking to offer customers an online configuration tool as part of their Custom Works bespoke service. The concept behind the Custom Works program was to provide more consumers with an experience usually reserved for professional racers: the ability to completely customize their motorbike suit online and then have it tailor-made to order.

  • Challenges:

    • Allow customers to switch instantly between 43 473 877 168 020 100 000 000 000 000 000 000 000 000 000 000 000 product options
      Provide high quality previews of the customizable suits online from every angle and in great detail
      Offer the possibility of uploading custom logos on the fly and applying custom text in real-time
      Integrate dynamic price calculation for the different options
  • Solution:

    Using the Emersya platform, Dainese was able to define the different customizable zones of the 3D models of their suits and create a full range of color options for each zone. They were also able to predefine zones of the products where custom images and text could be applied. At the end of the creation process, the platform generates a unique url to load the 3D model and all of the different colour options in Emersya’s Interactive 3D viewer, directly in the web browser (no app required, no plug-ins). Dainese’s web agency, Reload, developed a custom interface for the Custom Works online configurator and were able to seamlessly integrate the Emersya Interactive 3D viewer using javascript API. Simple API calls were used to link each button in the interface with the 3D viewer in order to update the customizable options in real time. The UX design allows customers to click on any part of the 3D model of the shorts to automatically open the corresponding part in the user interface with the available customization options they can apply directly to the model. When using the configurator interface directly to select a part to customize, the camera angle shown in the 3D view automatically moves to ensure the selected part is presented front and center. Customers can also select from a number of predefined areas on the product in order to apply a custom image or text. The custom images can be uploaded directly and will be automatically resized to fit the space selected. For custom text, the customer has a choice of colors and fonts and can adjust the size. Once set, the custom images and text can then be previewed on the 3D product model using the Interactive 3D viewer. The configurator has a dynamic price management system built in, in order for the total price to be updated based on the options selected by the customer. At the end of the customization experience, the user can click to save their configuration and screenshots of the configured product are automatically generated using API. The customer is taken to a summary page displaying the screenshots taken from 4 predefined angles and a list of the customization options selected. The screenshots and customization options are saved to Dainese’s back office with the customization code assigned as a reference.

    • Key feature illustration
      Interactive 3D product customization

      Click on product parts to customize the colours and materials and explore the real-time previews from every angle in 3D with deep zoom

    • Key feature illustration
      Apply custom graphics

      Upload images on the fly to predefined areas of the product preview the result in real time

    • Key feature illustration
      Apply custom text

      Type a personalized text, choose the font, size & color and preview the result in real time

    • Key feature illustration
      Add to cart

      Using Emersya's API, screenshots of the final configuration are generated from different predefined viewpoints. The full list of selected options is generated with the corresponding prices and the data is received by the ecommerce site