Innovative 3D configurator as Franke´s tool for digitalisation

About Franke Water Systems

Franke Water Systems is one of the world's leading suppliers of innovative and intelligent washroom and sanitary solutions for the public, half-public and commercial sectors. Franke is particularly committed to the development of complete sanitary systems that are designed for durability, excellent quality, functionality and design.

The Challenge

The information and ordering process for complex products like washbasins from Franke Aquarotter has optimization potential. Currently, the processes are quite long for the customers, non-transparent and involve time-consuming steps for employees. These processes are supposed to be digitalised and optimised in order to achieve higher customer satisfaction on the one hand and cost savings on the other.

The goal

Our goal was to design a responsive product configurator that allows users to digitally configure and plan washstands (in the future also entire washrooms). The 3D configurator provides real-time feedback on the technical feasibility as well as a price estimate.

  • Industry

  • Client

    Franke Water Systems GmbH
  • Services

    Prototyping & UX Design / Development Web-App (Frontend & Backend) / 3D Modeling / Microsoft Azure Integration
  • Features

    2D & 3D Product configuration / Multilingual / Progressive Web App / SAP connection
  • Technologies

    React / TypeScript / CosmosDB / Node.js / WebGL / three.js / Loopback
  • Project period

    2018 - 2020

Digitalization from the configuration process to the SAP Cloud

The Franke Aquarotter 3D configurator helps both new and existing customers to find out about products, combine them to create their dream washbasins and get an instant guide price. The 3D visualization of the configured washbasin makes it easier for the customer to imagine the final product and make decisions. After completion of the desired washbasin, it is possible to download a 2D drawing for assembly.

The configurator is a communication aid for the Franke field service. He can configure the washbasin on site together with the customer and has all relevant information immediately at hand. The washbasin configurator is an information catalogue, decision aid, sales tool and an assembly planner in one.

configuration prozess SAP

The complexity of the 3D product configurator

Individual product configuration - Spatial perception - No impairment of the loading time.

Bowl selection

The user has the possibility to choose from more than 30 bowls, additionally it is possible to search for different fits by means of filters. The Franke washbasin bowls were designed for a wide range of applications and industries. There are bowls especially for hospitals, hotels and other industries.

The following options are available for the user in this step:

  • Bowl selection Selection from over 30 bowls including filtering by fit
  • Dimension sheet detailed information per bowl as PDF
  • Number of mouldes Number of washbasin bowls

Installation type, panel dimensions & Co.

After the user has selected the suitable bowl, he can decide the type of installation and the dimensions of the plates. In addition, there are further options for corner design and angles.

The following options are available for the user in this step:

  • Installation typeWall mounting left, right, left + right or without wall
  • Corner design With radius or chamfer
  • Plate dimensions Plate width and depth
  • Position Dimensions of the bowl spacing
  • Angle The niche angle can be determined for walls

Apron and splash guard

Franke offers an apron for their washbasins as visual privacy protection. Once this has been selected, the drain and all other fittings underneath the table, for example, are optically concealed.

The following options are available to the user in this step:

  • Apron Selection of the apron and the apron height (30 - 150 mm)
  • Surge edge Selecting the rear surge edge
  • Backsplash Selection of the back splash guard as an additional splash guard (10 - 100 mm)

Cut-outs and built-in parts

The following configuration step is one of the most important ones. Several options are available for the user. He can drill holes for faucets and soap dispensers, integrate towel holders and fit individual recesses for paper towel dispensers.

The following options are available to the user in this step:

  • Armature drilling With or without hole
  • Cutouts for paper towel dispensers With or without waste rail system + possibility of individual input of the recesses
  • cosmetic wipes dispenser When a front apron is active, the cosmetic wipes dispenser can be activated
  • Towel holder With or without towel holder

Interactive colour design

Once the base of the washbasin has been defined, the user can choose between 4 colours. Changing a light color to a dark color will switch the complete look of the 3D scene. The background becomes light when the colour of the washstand is set to dark. All this is done in real-time and without loading time by using the three.js framework in combination with the power of WebGL.

The following options are available to the user in this step:

  • Color Choice of 4 colours and patterns
  • Underside With gelcoat or without

Consoles and drain accessories

In the second last step, the user can choose if he needs mounting accessories for mounting the table. When it ́s activated, the system detects whether there is sufficient space between the individual bowls and automatically positions the brackets in the correct places. If the distances between the troughs are too large, several brackets are automatically integrated. As a final configuration step, the user is given the opportunity to choose between different procedures.

  • Assembly accessories With or without brackets for wall mounting
  • Drain accessories Choice between drains and siphons

Can also be configured in 2D

The 2D view is based on a SVG which shows all dimensions.