Die Firma Summerwood designed und baut exklusiv gefertigte Garten- und Poolhäuser, Garagen und Pavillons, die ihren Kunden ein Leben lang Freude bereiten werden. Für das individuelle Wunschhaus gibt es verschiedenste Varianten in den Kategorien Style, Grösse, Materialien und Zubehör. Um die Möglichkeiten von individueller Massenproduktion (Engl.: mass customization) bestmöglich darzustellen und dem Trend nach modernsten Visual-Commerce Technologien gerecht zu werden, wollte Summerwood das bestehende 2D Modell durch ein neuen 3D Konfigurator ersetzen. Ein fotorealistische 3D Darstellung war unserem Kunden äusserst wichtig. Die, basierend auf der Technologie von Shapediver/Grasshopper, realisierte 3D Produkt-Visualisierung und die Möglichkeit der 360-Grad Ansicht wird die Benutzer des Summerwood Produktkonfigurators begeistern.
Der Kunde kann online im Custom Design Center auf der Seite von summerwood.com sein Produkt, ob Garten- oder Poolhaus, Garage oder Pavillon selber und rund um die Uhr nach seinen Wünschen und Anforderungen zusammenstellen.
Die Konfiguration erfolgt in 4 Schritten:
Daraus ergeben sich Millionen von Möglichkeiten, sein Gartenhaus zu individualisieren. Durch Plausibilitäts- und Vollständigkeitsprüfungen werden Fehlkonfigurationen verhindert. Im Hintergrund rechnet das System die verbindlichen Preise und stellt diese in einer Offerten Übersicht in einem Warenkorb dar. Jede Änderung wird innert weniger Sekunden visuell am 3D Modell angepasst und auch preislich neu kalkuliert. Das fertig gestaltete Produkt kann über eine Schnittstelle zum Onlineshop gleich definitiv gekauft werden. Ein Summerwood Spezialist kontaktiert den Kunden innert 24 h, um allfällige letzte Änderungswünsche zu besprechen und aufzunehmen.
Das technische Lösungsdesign wurde so gewählt, dass der 3D Konfigurator sowohl auf Webseite http://summerwood.com neben dem Onlineshop, als auch im Summerwood Kundenportal integriert werden konnte. Zudem können Konfigurationen jederzeit gespeichert und zu einem späteren Zeitpunkt wieder vom Kunden geladen werden. Ganz nach dem Ansatz “User generated content” können Kunden ihr gekauftes Gartenhaus auf der Summerwood Website präsentieren. So können andere potentielle Kunden aus mittlerweile über 1000 gekaufter Konfigurationen auswählen und von da aus weiter konfigurieren.
Vorgehen
Nach Aufnahme der Projektanforderungen und Definition des Umfangs für diesen generisch programmierten, individuell auf Kundenwunsch zugeschnittenen Konfigurator hat die Design Abteilung von Sitewerk ihre Arbeit gestartet. Das User Interface des Produktkonfigurators soll für die Benutzer ansprechend gestaltet werden, Emotionen wecken und intuitiv bedienbar sein. Der Betrieb des Konfigurators seitens Summerwood läuft über ein Content Management System. Ein Administrator kann neue Produkte, Preise und Regeln eigenständig ändern und hinzufügen. Im Hintergrund erzeugt die Konfigurator-Lösung detaillierte Stücklisten, welches so den Bestellprozess von der Kundeneingabe bis zum Kauf digitalisiert, beschleunigt und effizienter gestaltet.
Zukunftspläne
Unsere digitalen Lösungen sind modular und erweiterbar. Summerwood hat viel Pläne für die Weiterentwicklung ihres neuen 3D Produktkonfigurators. So soll in naher Zukunft das automatisierte Erzeugen von Produktionsdaten wie CAD Pläne und Cutlists für die CNC Maschine umgesetzt werden. Dadurch würde der Bestell- und Produktionsprozess nahtlos end-to-end digitalisiert. Auch Augmented Reality Visualisierung des konfigurierten Häuser steht auf der Wunschliste. So können die Benutzer ihr Haus in der tatsächlichen Umgebung betrachten. Weiter soll kontinuierlich an der Performance und den Ladezeiten des Konfigurators gearbeitet werden.
Technologien
Das Herzstück des Konfigurators bilden unabhängige parametrische 3D Modelle (basierend auf Rhino CAD, Grasshopper Plugin) für den Gebäude Typ, die Fenster und die Türen. Mit Hilfe des 3D Lösung von ShapeDiver wird innerhalb einer React Applikation eine 3D Visualisierung erstellt. Dabei wurde darauf geachtet, dass der Konfigurator generisch implementiert ist, damit ein Administrator eigenständig neue Modelle einpflegen kann.
Der Konfigurator ist nahtlos in den bereits existierenden Onlineshop integriert und kommuniziert via REST Schnittstelle mit einem cloud-fähigen Backend.
Tech-Stack
- React, TypeScript
- ShapeDiver.com mit Grasshopper Script (Rhino CAD)
- WebGL, Threejs
Features
- 3D Produktkonfigurator
- Parametrisches und erweiterbares 3D Model
- Drag and Drop, Snapping und Collision Detection
- Individueller Gestaltung des Traum-Gartenhäuschens
- Preisberechnung
- Onlineshop und MIS Integration