More Infos
We use cookies on our website. Some are essential, while others help us improve the site and your experience.
To the Privacy Policy

A 2D Terrace Configurator Integrated into the Online Shop


Kuratle & Jaecker



.Net Core

Azure Cloud


User Experience and Design


Agile Project Management

Configure the Terrace Individually in the 2D Floor Plan and Order Directly

The company Kuratle & Jaecker (Kuratle Group) is committed to systematic innovation and a consistent focus on customer benefit. With an online configurator for the varied design of patio floors including 2D visualization, the family business wants to underpin its high quality standards and reliability in the digital area as well. In just a few steps, the customer can create an individual terrace: easily configured in the online shop and ordered, including an exact parts list and installation plan. The company serves the woodworking industry throughout Switzerland with a balanced range of products and private labels for structural timber construction and decorative interior design.


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.

2D Terrace Configurator by Kuratle Jaecker

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


  • 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


  • 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
Create a 100% Digital Sales Process with 35% Less Cost of Sales with Configurators!

Create a 100% Digital Sales Process with 35% Less Cost of Sales with Configurators!

Have you already thought about using configurators? But don't know how to start... Then download our free guide and learn important key questions from practice.

What are Product Configurators?

What are Product Configurators?

Find out more about service and product configurators and how they can be used as a tool for sales support and offer creation for sales staff, business partners or the end customer themself.

Let's Realize a New Project Together