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.

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.