For KWC we developed a complex 3D product configurator as a PWA. The application is a B2B application for KWC's field service. In the course of the project, the workflow from washbasin configuration to quotation generation was almost completely digitized.

Process automation – from configuration to the SAP Cloud

The KWC 3D configurator helps customers find out about products, combine them into desired washbasins and get an instant guide price. The 3D visualization of the washbasin makes it easier for the user to imagine the final product. After completion of the washbasin, it is possible to download a 2D design drawing, which is used for the actual product development in the factory and later assembly.

For KWC's field service, the configurator serves not only as a communication aid, but also as an internal management tool. The sales force can plan individual washbasins together with the customer on site and has all relevant information such as prices, etc. immediately at hand. The washbasin configurator is thus an information catalog, decision-making aid, sales tool and also installation planner all in one.

The complexity of the 3D product configurator

Individual product configuration - Spatial perception - No impact on loading time.

Trough selection

The user has the possibility to choose from more than 30 troughs, additionally it is possible to search for different fits by means of a filter. Franke's washbasins have been designed for a wide range of applications and industries. There are troughs especially for hospitals, hotels and other industries.

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

  • Trough selection: Selection from over 30 troughs incl. filtering: by fit.
  • Dimension sheet: Detailed information per trough in PDF format
  • Number of troughs: Number of washbasin troughs
Franke 3D Konfigurator Muldenauswahl
Franke 3D Konfigurator - Einbauart, Plattenmaße & Co.

Installation type, plate dimensions & Co.

After the user has selected the appropriate trough, he can decide on the installation type and plate dimensions. In addition, there are further options for corner design and angles.

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

  • Installation type: Wall setting left, right, left + right or without wall.
  • Corner design: With radius or bevel
  • Plate dimensions: Plate width and depth
  • Trough positioning: Dimensions of trough spacing
  • Angle: With wall setting the niche angle can be determined

Apron and splashback

Franke offers an apron for its washbasins as a visual privacy screen. If this is selected, the drain and all other fixtures below the table, for example, are visually concealed.

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

  • Apron: Selection of apron and apron height (30 - 150 mm).
  • Surge edge: Selection of the rear surge edge
  • Splashback: Selection of the rear upstand as an additional splash guard (10 - 100 mm).
Franke 3D Konfigurator - Schürze und Spritzschutz
Franke 3D Konfigurator - Aussparungen und Einbauteile

Recesses and built-in parts

The configuration step that follows now is one of the most important. Several options are available to the user. He can set tap holes as well as soap dispenser holes, integrate towel rails and fit individual recesses for paper tissue dispenser.

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

  • Tap hole: With or without drilling.
  • Cutouts for paper tissue dispenser: With or without waste rail system + possibility to enter individual cutouts
  • Cosmetic tissue dispenser: When a front apron is active, the cosmetic tissue dispenser can be activated
  • Towel rail: With or without towel holder.

Interactive color design

Once the base of the washbasin is defined, the user can choose between 4 colors. Changing a light color to a dark one will switch the complete look of the 3D scene. The background becomes light when the color of the washbasin is set to dark. All this is done in real time and without loading time 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 colors and patterns.
  • Bottom side: with gelcoat or without
Franke 3D Konfigurator - Interaktive Farbgestaltung
Franke 3D Konfigurator - Konsolen und Ablaufzubehör

Consoles and drain accessories

In the penultimate step, the user can select whether he needs drain accessories to fix the table. When activated, the system detects whether there is enough space between the individual troughs and automatically positions the consoles in the right places. If the gaps are too large, several consoles are automatically integrated. As a final configuration step, the user is given the option to choose between different drains.

  • Assembly accessories: With or without consoles for wall assembly
  • Drain accessories: Choice between drains and siphons

From the 2D view directly into production

The user has the option to switch from the 3D view to the 2D view in the frontend and can also continue configuring in this view. The 2D view in the configuration process is based on an SVG and represents a scaled-down version of the washbasin. In the downloadable PDF, the washbasin is then output as a fully-fledged design drawing, with all dimensions for later production.

Are you curious?

E-commerce apps, customised software or product configurators. As an agency, we solve complex challenges with React, TypeScript, Node.js and the extended JavaScript ecosystem. Let's get started right away.