A 2D Terrace Configurator Integrated into the Online Shop

Initial Position

The aim was to develop a first desktop and notebook-optimized version of a terrace configurator, which can later be easily expanded (e.g. suitable for mobile use), is available in different languages and can be embedded in the existing Kuratle web shop infrastructure as a web component. An interface is to be developed so that the articles can be drawn directly from Kuratle's PIM (Product Information Management) and the articles are to be enriched with information where necessary. A project with a lot of development potential. We like that!

The Implementation

Technical Implementation

The parametric 2D configurator is embedded in the existing shop infrastructure as a web component and via existing API's. A push API makes it possible for the calculated parts list to be transferred directly to the shopping cart of the Kuratle web shop, so that the terrace can be ordered with all parts at the push of a button. The configurator has a modular structure and new features can be added at any time. The visualization is in 2D (boards) and from a bird's eye view. Every time a parameter changes, the model and the parts list are recalculated and immediately adjusted in the 2D image.

User Interface

With an intuitive user interface, the user is guided step-by-step and thus arrives at their individual terrace. Various solutions were discussed during the conception phase. Using various user flows, we decided on the best way together with the customer in a workshop.

Configuration Process

1. Choice of Surface (wood, WPC, bamboo)
2. Material Selection
3. Selection of the Substructure
4. Enter the Construction Height
5. Display of the Adjustable Feet
6. Selection of the terrace shape (rectangle, L-shape, T-shape, U-shape)
7. Display of the 2D visualization (boards) from a bird's eye view with the possibility of adjusting the dimensions of the terrace, the laying pattern of the planks, the laying direction and the plank width.
8. Display of the calculated area as well as the required plank lengths and cutting information
9. Ability to View the BOM
10. Possibility to transfer the configuration ID and the parts list in the shopping cart and price calculation

The Biggest Challenges of the Project

• Development of calculation algorithms for substructures and accessories
• Consideration of edge cases with different materials and exceptions
• Visualization with subsequent calculation of different laying patterns and their rules

Technology

• Web components for a "framework agnostic" integration of the UI
• React Configurator
• 2D floor plan planner ➔ D3.js (d3-zoom, d3-selection) with SVG for 2D planning of the terrace
• CLM Backend ➔ .NET Core, PostgreSQL hosted in the Azure Cloud

Features

• Individually configured terraces (type of wood, shape, laying pattern, ...)
• Parametric 2D Model
• Export of layout plan and parts lists
• Exact size by direct entry or moving the borders
• Exact calculation of all necessary components including dimensions and prices
• Interface for PIM System
• Integration into shop infrastructure
• Multilingualism