Das digitale Vertriebstool für Bausch+Lomb Storz®
Als einer der weltweit führenden Hersteller von chirurgischen Präzisionsinstrumenten, hat Bausch+Lomb Storz® eine innovative Produktentwicklung vorgestellt. Die sog. „Per-Procedure-Trays“ sind sterile Sets mit Instrumenten, die jeweils für eine einzige Operation genutzt und im Anschluss entsorgt werden. Dies ermöglicht einen sicheren und verlässlichen Einsatz der Instrumente – sowohl für den operierenden Chirurgen, als auch für den Patienten.
Die Geburtsstunde des Online-Konfigurators
Es entwickelte sich die Idee, eine ebenso innovative Form für den Vertrieb des neuen Produkts zu wählen. Die Informationen zu den Produkten sowie die direkte Anfrage nach einem Angebot sollte über einen digitalen Kanal erfolgen. Die vielzähligen Kombinationsmöglichkeiten und die teils nuancierten Unterschiede zwischen den Instrumenten sollen den eigenen Vertriebsmitarbeitern und den potentiellen Kunden einfach erklärt werden.
An dieser Stelle erarbeitete digifant gemeinsam mit Bausch+Lomb Storz® das Konzept eines Online-Konfigurators, der Information und Funktion unter einer modernen und intuitiven Oberfläche zusammenfasst.
Das Konzept und die Features
Der Online-Konfigurator wurde als Single Page Web-Applikation konzipiert und umgesetzt. Der Nutzer bewegt sich durch die einzelnen Stationen (Views), ohne das der Browser neu geladen wird. Als progressive Web-Applikation kann der Online-Konfigurator auf mobilen Endgeräten „installiert“ werden und fühlt sich auch wie eine App an.
Der Einstieg in den Online-Konfigurator erfolgt für den Nutzer über die Auswahl einer bestimmten Operationsart, die über den Umfang und die Ausprägung eines Sets bestimmen. Im nächsten Schritt erfolgt die Zusammenstellung eines Sets durch den Nutzer. Dazu kann er die kategorisierten Instrumente direkt per Drag&Drop (Desktop) in die entsprechende Verpackung legen. In diesem Schritt befinden sich auch alle Angaben zu den Produkten, sowie zusätzliche „Warenkorb“-Funktionen. Der Online-Konfigurator endet mit dem „Checkout“, bei dem die Nutzerdaten abgefragt werden und die Anfrage komplettiert werden kann.
Design und weitere Features
Die Vorgaben aus dem Corporate Design von Bausch+Lomb Storz® haben sich beim Online-Konfigurator mit den Anforderungen an moderne Web-Applikationen verbunden. Auch auf Smartphones und Tablets sollen die Nutzer den gleichen Funktionsumfang vorfinden. Weitere Anforderungen, die berücksichtigt wurden, sind:
- Datenabgleich per Remote-Zugriff auf den Online-Produktkatalog
- Nutzung im Fullscreen-Modus
- Einbindbarkeit in die Webseite von Bausch+Lomb Storz®
- Kontextsensitive Hilfe, die in jedem Schritt zur passenden Hilfestellung führt
Die technische Umsetzung der Web-Applikation
Der Technologie Stack
Die technische Basis des Online-Konfigurators bildet der „Shootingstar“ unter den JavaScript Frameworks: Vue. Das Framework Vue überzeugt dadurch, dass es das Beste aus den etablierten Frameworks Angular und React verbindet und gleichzeitig den oft zitierten „Nachteilen“ der beiden, einen eigenen Lösungsansatz entgegen stellt.
Die Berücksichtigung weiterer technischer Faktoren fielen durch die Verwendung von Vue ebenfalls leicht. Die Implementierung einer Flux-Architektur, die Verwendung von Drag&Drop oder der Einsatz eines Service Workers sind nur einige Beispiele. Zudem erlauben der modulare Aufbau der Anwendung in Komponenten und die Möglichkeit mit den neuesten ES6 Sprachfunktionen von JavaScript zu arbeiten einen effizienten Entwicklungsprozess.
Server Komponente
Eine automatische Synchronisierung mit der Produktdatenbank erfolgt über eine Schnittstelle, die von den Produktmanagern bequem bei der Aktualisierung eines Produkts angestoßen wird. Diese Schnittstelle wurde ebenfalls von digifant mit dem server-seitigen JavaScript-Framework node.js umgesetzt.
Ausblick und Fazit
Die Architektur des Online-Konfigurators erlaubt einen flexiblen Ausbau der Funktionalitäten und des Produktumfangs. So ist zukünftig die Umsetzung der Mehrsprachigkeit, sowie die Integration weiterer Produktgruppen geplant.
Sie sind nun neugierig geworden?
Probieren Sie den Online-Konfigurator gerne selbst einmal aus. Sie können sich auch gerne zuerst den Tutorial-Film ansehen, den wir ebenfalls für Bausch+Lomb Storz erstellt haben.