Ein Terrassenkonfigurator für Kuratle & Jaecker

In wenigen Schritten zur individuellen Terrasse. Spielend leicht im Onlineshop konfiguriert und bestellt inklusiv exakter Stückliste und Verlegplan.

Kontakt

Sitewerk AG
Werkhofstrasse 52
CH-4500 Solothurn

+41 32 501 19 22
info@sitewerk.ch

Social Media

Systematische Innovation und den Fokus konsequent auf den Kundennutzen zu richten, hat sich die Firma Kuratle & Jaecker (Kuratle Group) auf die Fahne geschrieben. Mit einem online Konfigurator für die variantenreiche Gestaltung von Terrassenböden inkl. 2D Visualisierung will das Familienunternehmen ihre hohen Qualitätsansprüche und Zuverlässigkeit auch im digitalen Bereich untermauern. Die Firma bedient das holzverarbeitende Gewerbe schweizweit mit einem ausgewogenen Sortiment an Produkten und Eigenmarken für den konstruktiven Holzbau und den dekorativen Innenausbau.

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

Schritt 1: Auswahl der Oberfläche (Holz, WPC, Bambus)

Schritt 2: Auswahl des Materials

Schritt 3: Auswahl der Unterkonstruktion

Schritt 4: Eingabe der Aufbauhöhe

Schritt 5: Anzeige der Stellfüsse

Schritt 6: Auswahl der Terrassenform (Rechteck, L-Form, T-Form, U-Form)

Schritt 7: Anzeige der 2D Visualisierung (Dielen) aus Vogelperspektive

a. Möglichkeit zur Anpassung der Masse der Terrasse

b. Möglichkeit zur Anpassung des Verlegemusters der Dielen

c. Möglichkeit zur Anpassung der Verlegerichtung

d. Möglichkeit zur Anpassung der Dielenbreite

Schritt 8: Anzeigen der berechneten Fläche sowie der benötigten Dielenlängen und Schnittangaben

Schritt 9: Möglichkeit zur Anzeige der Stückliste

Schritt 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
Glutz AG
IKEA
HELION
Metalix Metallhandel AG
sun2wheel AG
Einwohnergemeinde der Stadt Olten
Sitewerk