Mehr Infos
Wir nutzen Cookies auf unserer Website. Einige sind essenziell, während andere uns helfen, die Website und Ihre Nutzererfahrung zu verbessern.
Zur Datenschutzerklärung
image

Ein 2D Terrassen-Konfigurator integriert im Onlineshop

Kunde

Kuratle & Jaecker

www.kuratlejaecker.ch

Technologien

reactjs

.NET Core

Azure Cloud

Sitewerk CLM

Disziplinen

User Experience & Design

Konfigurator

Agile Project Management

Terrasse individuell im 2D Grundrissplaner konfigurieren und direkt bestellen

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. So kommt der Kunde in wenigen Schritten zur individuellen Terrasse: spielend leicht im Onlineshop konfiguriert und bestellt inklusiv exakter Stückliste und Verlegplan.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.

2D Terrassen-Konfigurator von Kuratle Jaecker

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
Mit Konfiguratoren einen 100% Digitalen Verkaufsprozess mit 35% weniger Umsatzkosten schaffen!

Mit Konfiguratoren einen 100% Digitalen Verkaufsprozess mit 35% weniger Umsatzkosten schaffen!

Haben Sie bereits über den Einsatz von Konfiguratoren nachgedacht? Wissen aber nicht wie anfangen… Dann laden Sie unseren gratis Guide herunter und erfahren wichtige Schlüsselfragen aus der Praxis.

Was sind Produktkonfiguratoren

Was sind Produktkonfiguratoren

Erfahren Sie mehr über Service- und Produkt-Konfiguratoren und wie diese als Werkzeug zur Verkaufsunterstützung & Angebotserstellung für die Vertriebsmitarbeiter, den Business-Partner oder den Endkunden selbst eingesetzt werden können.

Lassen Sie uns gemeinsam ein neues Projekt realisieren