Ein 2D Terrassen-Konfigurator integriert im Onlineshop

Ausgangslage

Ziel war es, eine erste desktop- und notebookoptimierte Versioneines Terrassenkonfigurators zu entwickeln, welche später problemlos erweiterbar (zum Beispiel mobil tauglich) ist, in verschiedenen Sprachen zur Verfügung steht und als Web Component in die bestehende Kuratle Webshop-Infrastruktur eingebettet werden kann. Damit die Artikel direkt aus dem PIM (Product Information Management) von Kuratle angezogen werden können, soll eine Schnittstelle entwickelt werden und die Artikel sollen wo notwendig mit Informationen angereichert werden. Ein Projekt mit viel Entwicklungspotential. Das gefällt uns!

Die Umsetzung

Technische Umsetzung

Der parametrische 2D Konfigurator wird als Web Component und über existierende APIs in die vorhandene Shop-Infrastruktur eingebettet. Eine Push API macht es möglich, dass die berechnete Stückliste direkt an den Warenkorb des Kuratle Webshops übergeben wird und die Terrasse somit per Knopfdruck mit allen Teilen bestellt werden kann. Der Konfigurator ist modular aufgebaut und kann jederzeit um neue Features erweitert werden. Die Visualisierung erfolgt in 2D (Dielen) und aus Vogelperspektive. Bei jeder Veränderung eines Parameters wird das Modell sowie die Stückliste neu berechnet und in der 2D Abbildung sofort angepasst.

User Interface (Benutzer Oberfläche)

Mit einer intuitiv bedienbaren Benutzeroberfläche wird der User Schritt-für-Schritt angeleitet und kommt so zu seiner individuellen Terrasse. Während der Konzeptionsphase wurden verschiedene Lösungswege besprochen. Mittels verschiedener User Flows haben wir uns gemeinsam mit dem Kunden im Rahmen eines Workshops für den optimalen Weg entschieden.

Konfigurationsprozess

1. Auswahl der Oberfläche (Holz, WPC, Bambus)
2. Auswahl des Materials
3. Auswahl der Unterkonstruktion
4. Eingabe der Aufbauhöhe
5. Anzeige der Stellfüsse
6. Auswahl der Terrassenform (Rechteck, L-Form, T-Form, U-Form)
7. Anzeige der 2D Visualisierung (Dielen) aus Vogelperspektive mit der Möglichkeit zur Anpassung der Masse der Terrasse, des Verlegemusters der Dielen, der Verlegerichtung und der Dielenbreite.
8. Anzeigen der berechneten Fläche sowie der benötigten Dielenlängen und Schnittangaben
9. Möglichkeit zur Anzeige der Stückliste
10. Möglichkeit zur Übergabe der Konfigurations-ID & der Stückliste in Warenkorb & Preisberechnung

Die grössten Challenges im Projekt

• Entwicklung der Berechnungsalgorithmen für Unterkonstruktionen und Zubehör
• Berücksichtigung Edge-Cases bei verschiedenen Materialien und Ausnahmen
• Visualisierung mit anschliessender Berechnung verschiedener Verlegemuster und deren Regeln

Technologie

• Web Components für eine «Framework agnostische» Einbindung des UIs
• React Konfigurator
• 2D Grundrissplaner ➔ D3.js (d3-zoom, d3-selection) mit SVG für 2D Planungen der Terrasse
• CLM Backend ➔ .NET Core, PostgreSQL hosted in der Azure Cloud

Features

• Individuell konfigurierte Terrassen (Holzart, Form, Verlegemuster, …)
• Parametrisches 2D Modell
• Export von Verlegeplan und Stücklisten
• Exakte Grösse durch direkte Eingabe oder Verschieben der Ränder
• Exakte Berechnung aller nötigen Bauteile inkl. Abmessung und Preisen
• Schnittstelle zu PIM System
• Integration in Shop-Infrastruktur
• Mehrsprachigkeit