Billabong Custom Boardshorts Interactive 3D configurator

Choose your style, Customize it, Buy & Share, all online in Interactive 3D

Billabong were looking for a game changing concept to introduce as leader of the board shorts industry. They decided to offer online consumers the possibility of fully customizing their own version of Billabong's iconic board shorts designs. The brand aimed to make the online product customization experience as interactive as possible while providing realistic 360° previews of the custom designs.

  • Challenges:

    • Provide 360° visuals of the product to allow customers to select the different customizable panels and preview the complete range of color and graphic print options online
      Offer a choice of different Billabong logos to be applied on the fly
      Add the possibility to apply custom text on the fly
      Enable customers to save the customized product designs to their favourites, share them on social media and reload them into the billabong configurator to edit their design
  • Solution:

    Using the Emersya platform, Billabong were able to define the different customizable zones of the 3D models of their shorts and create options for their full range of color and graphic printss for each zone. They were also able to apply a number of different logos as options for the consumer to choose from. 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 an Emersya Interactive 3D viewer, directly in the web browser (no app required, no plug-ins). Billabong developed a custom interface for their Custom Boardshort 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. Billabong included the possibility to add custom embroidery to the the back pocket of the different short designs. Thanks to the custom UI and Emersya’s API, it is possible to type custom text, choose its color and preview it in real-time on the 3D short model. At the end of the customization experience, the user can click to save their configuration and a screenshot of the configured product is automatically generated using API. A unique url is created and the customer has the option either to copy the link or to share it directly on social media. The link opens up the Interactive 3D configurator with the customer’s configuration preloaded as a starting point. This not only allows them to share their design, but also to come back to it at a later date to make modifications. Billabong has also added the possibility to add a configuration to a customer’s “favourites” by clicking on the heart icon in the top-right-hand corner of the 3D view. A screenshot of the configuration is generated and saved to the “Favourites” area of the website for the IP address of the customer. The customer will be able to reload their configuration from their favourites area upon their return to the website, by clicking on “edit item”. If the customer wishes to buy their custom design they can choose a size and click “add to cart”. Thanks to two simple API calls, Billabongs’ ecommerce site receives a screenshots generated of the configuration and a list of the customization options selected. This data is then managed in the Billabong sales order process.

    • Key feature illustration
      Interactive 3D product customization

      Click on different parts of the 3D product model to customize the colors and materials. See the 3D product design update in real-time and explore from every angle with deep zoom

    • Key feature illustration
      Apply Custom Text

      Add custom text to a predefined area of the product. Choose the text color and see it applied to the 3D product model in real time

    • Key feature illustration
      Save, Share & Replay

      Save customized product designs and receive a unique url to reload them back into the configurator. Share the link of social media, replay the custom product configuration and save it to favourites on the brand site.