Der Wunsch nach individuellen Produkten steigt. Kunden möchten mehr als nur Farbe und Größe auswählen. Mithilfe von Produktkonfiguratoren kombinieren Interessenten die Komponenten des Artikels nach eigenen Wünschen und beschäftigen sich so intensiv mit dem Produkt. Sie nehmen Einfluss auf den Entstehungsprozess und prägen das Resultat. Auch als Teil einer E-Commerce-Anwendung bieten Konfiguratoren interessierten Einkäufern einen erheblichen Mehrwert. Europas größter Metall-Gartenhaus-Hersteller Biohort GmbH ermöglicht seinen Kunden diese Möglichkeiten mit dem CasaNova-Produktkonfigurator – und an Gartenhäusern lässt sich bedeutend mehr anpassen und auswählen, als man denkt.
1 Anforderungen
Der österreichische Produktionsbetrieb wollte seinen bestehenden auf flash-basierten Konfigurator modernisieren, um ihn für alle gängigen Browser und Betriebssysteme zur Verfügung zu stellen. Darüber hinaus galt es, den CasaNova-Produktkonfigurator zu mobilisieren – ihn also auch für Mobilgeräte zugänglich zu machen. Biohort exportiert seine Gartenhäuser europaweit. Aus diesem Grund war es außerdem wichtig, die Konfigurator-Anwendung für mehrere Sprachen und Währungen zu konstruieren. Da sich die Produktpalette hinsichtlich Größe oder auch Farbe verändern oder erweitern kann, sollte die Web-Anwendung darüber hinaus so entwickelt werden, dass diese Erweiterungen einfach integriert werden können. Eine letzte, jedoch sehr wichtige Anforderung bestand in der Verbesserung der Usability.
Abb. 1: Stück für Stück zum individuellen Gartenhaus mit dem CasaNova-Produktkonfigurator
2 Umsetzung
Mit der Entwicklung auf Basis von Webtechnologien (HTML5, Java Scrip, CSS3) gewährleisten wir die Funktionsfähigkeit auf allen gebräuchlichen Betriebssystemen und Browsern. Darüber hinaus lässt sich die Anwendung auch super mit einem Tablet bedienen. Rein theoretisch läuft sie auch auf einem Smartphone. Hier lässt sich der Konfigurator allerdings schlecht bedienen, da aufgrund der Funktionalitäten das Design und der Aufbau für Desktops und Tablets optimiert sind. Neben dem Framework AngularJS nutzten wir zusätzlich jQueryUI für die Drag & Drop-Funktionalität. Bei der Auswahl der Fenster oder Türen, wird der Bereich markiert, in dem der Einbau möglich ist. Zudem verbessert die automatische Türflügel-Ausrichtung die Usability zusätzlich. Da beim Aufbau eines Gartenhauses bestimmte bauliche Konventionen zu beachten sind, regelt die Kollisonsdetektion die korrekte Zusammensetzung durch den Nutzer.
Abb. 2: Steifes Kundengespräch vs. lockeres Zusammenstellen auf der eigenen Couch mit dem Tablet
3 Funktionen
Grundsätzlich besteht der CasaNova-Produktkonfigurator aus drei Bereichen: Im oberen Bereich befinden sich die Teile bzw. Adjektive, die vom Nutzer ausgesucht werden können. Im unteren Areal finden die Gartenhaus-Interessenten die Preisübersicht, den Grundriss – in den auch die Teile per Drag & Drop gezogen werden – und eine 3D-Live-Vorschaufunktion das zusammengestellten Nebengebäudes.
Im ersten Schritt wählen die Kunden Größe und Farbe des Hauses aus. Darauf folgen Fenster und Türen, die via Drag & Drop ausgesucht und eingefügt werden. Zum Schluss bestimmen die Kunden die Komponenten für den Innenausbau, wie Bodenbeläge, Regale oder Fahrradhalterungen, per Checkboxen und Select Dropdown. Mit dem Abschluss der Konfiguration wird in Biohorts Fall keine Bestellung ausgelöst. Jedoch generiert die Anwendung eine PDF-Datei mit allen wichtigen Informationen (Grundriss / Bestellliste), die die Anwender drucken oder versenden können. Darüber hinaus lässt sich der Konfigurator in verschiedenen Sprachen bzw. mit unterschiedlichen Währungen anzeigen.
Abb. 3: Checkboxen und Select Dropdown – die letzten Schritte zum persönlichen Nebengebäude
Über diesen Link gelangt ihr zum Konfigurator, um euch selbst ein Bild zu machen.
