Konfigurator mit maximaler Usability

ROTEX Heizungs-Konfigurator programmiert mit AngularJS, Symfony2 und MongoDB

Für die ROTEX Heating Systems GmbH entwickelte die Stuttgarter Internetagentur FUF // Frank und Freunde einen Heizungs-Konfigurator als Single-Page-Application zur Anbindung an deren Internetpräsenz. Die Herausforderung: Hinter der Eingabemaske musste sich eine hochkomplexe Berechnungslogik verstecken, die anhand weniger Eckdaten das passende Heizungssystem für den User zusammenstellt. Für den Anwender sollte dabei maximale Usability und höchste Funktionalität garantiert werden. FUF setzte dafür moderne Technologien ein, um für ROTEX eine vertriebsstarke Lösung zu entwickeln, die ebenso innovativ ist wie der Kunde selbst.

Das Ziel // Neuer Konfigurator untermauert System-Kompetenz

Hersteller von Heizungen verstehen sich zunehmend als Anbieter ganzheitlicher Heiz- und Klimasysteme. Vor diesem Hintergrund wünschte sich ROTEX, die eigene Internet-Präsenz mit einem Heizungs-Konfigurator aufzuwerten, der das Unternehmen bei privaten Verbrauchern zur Nummer Eins für Komplett-Heizungssysteme positioniert. Mit dem Konfigurator sollen sich potenzielle Kunden anhand individueller Eckdaten ihr optimales Heizsystem aus mehr als 10.000 Kombinationsmöglichkeiten problemlos zusammenstellen können. Im Anschluss an die Konfiguration wird der Kunde an den nächstgelegenen Fachhandwerker weitergeleitet. So will ROTEX zum einen den Nutzwert der Website erhöhen, zum anderen den Vertrieb mit qualifizierter Vorabinformation stützen.
Anvisiert war von vornherein auch eine spätere Bereitstellung als eigenständige App für Tablets.

Die Lösung // FUF setzt alles auf eine Seite

ROTEX Heizungs-KonfiguratorBei der Realisierung des Heizungs-Konfigurators entschied sich die Stuttgarter Internetagentur für eine Single-Page-Web-Application. Der vollständige Ablauf der Konfiguration spielt sich hierbei komplett ohne Reloads innerhalb einer Seite ab. Im Rahmen der Client/Server-Architektur wird das gesamte benötigte Datenvolumen gleich zu Anfang der Konfiguration auf den Client übertragen – danach laufen alle Konfigurations-Prozesse im Browser ab. Der Vorteil daran: die Berechnungen gehen schneller. Trotz einer immensen Berechnungslogik, die im Hintergrund abläuft, besitzt der Heizungs-Konfigurator somit eine hohe Performance.

Frank und Freunde konzipierte die Anwendungslogik, welche die Berechnungen umsetzt und sämtliche Parameter verarbeitet: Anhand der einzugebenden Ge-bäudedaten werden verschiedene Systemvorschläge zusammengestellt. Korrekturen der Angaben lassen sich jederzeit vornehmen und werden von der Anwendung sofort verarbeitet – der Kunde muss die Berechnung nicht mehr neu starten. Im Anschluss an die System-Empfehlung kann sich der Kunde detaillierte Informationen zum gewählten Heizungssystem aufrufen und das entsprechende System-Datenblatt als PDF erzeugen. Als Abrundung integrierte die Stuttgarter Internetagentur über eine Schnittstelle eine Liste der nächstgelegenen ROTEX-Systempartner in der vertrauten Google-Maps-Darstellung.

Die Technik // Zukunftsweisende Lösung als Single-Page-Anwendung

Die Datenpflege des KonfiguratorsDie Datenpflege des Konfigurators erfolgt über die schemafreie, dokumentenorientierte Open-Source-Datenbank MongoDB; diese Software ist nicht-relational und nutzt ein vereinfachtes Datenmodell, das Flexibilität im Einsatz und eine Kosteneinsparung in der Entwicklung mit sich bringt. Im Gegensatz zu relationalen Datenbanken, liefert MongoDB komplette Datensätze zurück.

Als REST-Schnittstelle zwischen den Anwendungen hat FUF das kompakte Datenformat JSON eingesetzt. Bei der Schnittstelle für die Produktdaten (Middleware) und dem Admin-Interface vertraute die Internetagentur auf das bewährte Framework Symfony 2. Die browserbasierte Single-Page-Anwendung wurde mit dem Open-Source-Framework AngularJS erstellt – hier liegen Geschäftslogik und User-Interface. Die JacaScript-basierte Browserapplikation ermöglicht es, die Anwendung komplett im Client/Browser ablaufen zu lassen.

Logik im Client // Schnell und effektiv arbeiten mit einmaliger Serverabfrage

Anwendungslogik ROTEX Heizungs-KonfiguratorDie Innovation des ROTEX Heizungs-Konfigurators stellt die Anwendungslogik dar, die Frank und Freunde komplett auf den Client verlagerte. Da beim ersten Request mit dem Button „Systeme finden“ alle relevanten Produktdaten vom Server auf den Client übertragen werden, muss die Anwendung bei einer nachfolgenden Änderung der Filtereinstellung keine Serverabfrage mehr tätigen. Die Konfiguration läuft ohne lästige Reloads ab, da durch den Einsatz von JavaScript das HTML anhand der vorhandenen Datensätze neu zusammengebaut werden kann. Nützlicher Nebeneffekt: Durch local storage lässt sich der Heizungs-Konfigurator zukünftig auch offline-fähig machen.

Der Erfolg // Im Fokus des Konfigurators: Die Heizung als Komplettsystem

Mit dem neuen Heizungs-Konfigurator hat ROTEX ein ebenso überzeugendes Beratungs- wie vielversprechendes Marketingtool gewonnen. ROTEX hat mit diesem Angebot für seine Website-Besucher auch auf eine Neuausrichtung der Branche reagiert, die das Heizungssystem in seiner Gesamtheit betrachtet und weniger die einzelnen Komponenten. Trotz seiner komplexen Berechnungslogik ist der Heizungs-Konfigurator für die Anwender komfortabel bedienbar, die mit nur wenigen Klicks und Eingaben zum gewünschten Ziel gelangen. ROTEX hat mit dem Konfigurator ein zukunftsfähiges und ausbaubares System gewonnen, das in Zukunft auch als eigenständige App für Tablets bereitgestellt werden kann.

FUFazit

Die Internetagentur FUF // Frank und Freunde hat sich in kurzer Zeit in die Thematik Heizungsbranche und die komplexen Berechnungen, die dafür im Hintergrund ablaufen, eingearbeitet und sich ein profundes Spezialwissen zugelegt. Die Stuttgarter haben dabei zukunftsfähige Technologien so eingesetzt, dass diese für die jeweilige Aufgabe optimal geeignet sind und dem Kunden nutzen. So dokumentiert der Heizungs-Konfigurator für den Kunden ROTEX einmal mehr, dass für FUF neben der Funktionalität der Anwendungen stets auch eine maximale User-Experience im Zentrum steht.