Die VONJAN Technology GmbH ist ein führender Anbieter hochwertiger Lasersystem-Komponenten. Das Unternehmen bietet individuelle Beratung sowie maßgeschneiderte Produktkombinationen an und unterstützt Kunden hierdurch bei der Entwicklung neuer Lasersysteme und Laseranwendungen.
“VOLL LASER” - war nur einer von vielen Ansprüchen für die neue Website. Neben einem strahlenden UI stand vor allem die Darstellung von Produkten und umfangreichen Serviceleistungen für Kunden und Partner im Vordergrund.
- Digital Rebranding
- User Experience Konzept
- User Interface Design
- Technisches Konzept & Development
- Produktdatenbank & Schnittstelle
- Digitale Anfragestrecke
- Data Collection & Analytics
- Animation Design
Das Herzstück ist eine online Produktdatenbank mit Anfragestrecke, deren Daten direkt via Schnittstellen übergeben werden. Die Zielgruppen von VONJAN weisen sehr unterschiedliche Bedürfnisse auf – die einen wissen genau, nach welchen Produkten sie suchen und können es über technische Parameter konkret spezifizieren, andere sind auf der Suche nach einer Lösung für einen neuen Laserprozess und benötigen Beratung zur Bestimmung der geeigneten Systemkomponenten.
So haben wir uns bei der Konzeption der Website auf die Informationsflows der Nutzenden konzentriert, damit wir den unterschiedlichen Bedürfnissen gerecht werden. So können Produkte auf unterschiedliche Weise gefunden und angefragt werden, z.B. klassisch über die Navigation, über eine Produktsuche und -filterung, oder etwa über Content-Seiten mit Anwendungsfällen.
Die Werte des Unternehmens sollten sich im UI widerspiegeln. Ein wesentliches Merkmal im Interface sind die hohen Hell-Dunkel-Kontraste. Sie werden gezielt eingesetzt, um komplexe Informationen gebündelt hervorzuheben. Die grün-gelbe Primärfarbe findet ihren Einsatz bei Interaktionselementen und leitet somit durch das Interface. Die Typografie unterstreicht ihren technischen Kern, die ebenso technische Kompetenz. Lichtreflexe im UI sowie eine ansprechende Startseiten-Animation visualisieren die Welt der Laserkomponenten auf eine spielerische Art.
Die anspruchsvollen Produkte stellen uns vor eine Herausforderung – wie präsentieren wir Produktdaten, ohne Nutzende selbst auf mobilen Endgeräten zu überfordern? Zusammen mit dem Kunden erarbeiteten wir zunächst eine neue Produktkategorisierung, die eine logische Filterung erlaubt. Die überarbeitete Struktur half uns dabei, die Produktgruppen, -serien und -modelle sinnvoll sowohl in dem von uns zur Verfügung gestellten Produkt Information Management (PIM) System Akeneo anzulegen, als auch über eine Schnittstelle visuell verständlich im UI darzustellen.
Die Technik dahinter
Das Content Management System Neos verleiht der Seite sowohl Flexibilität in Hinsicht auf den Content als auch Geschwindigkeit bei der Verarbeitung und Darstellung von unzähligen Produkten. Die Verwaltung der Produkte haben wir dabei getrennt mit dem Produkt Information Management (PIM) System Akeneo realisiert. Die Produktdaten werden in Akeneo angelegt und anschließend inklusive sämtlicher Informationen, Medien und Datenblätter in Neos importiert und auf der Seite dargestellt. Dank der Skalierbarkeit von Neos sind dabei kaum Grenzen gesetzt.
Um die Produkte den Nutzenden einfach zugänglich zu machen, wurde eine komplexe Filterung mit Elasticsearch und PHP aufgebaut, welche im Frontend durch ein umfangreiches Vue.js Plugin ausgespielt wird. Zahlreiche nutzerzentrierte Filtereinstellungen helfen jedem Nutzenden, die passenden Produkte zu finden, ohne den Überblick zu verlieren. Durch Vue.js werden die angezeigten Produkte in Echtzeit aktualisiert und Wartezeiten durch Seitenladen vermieden. Die nahtlose Integration von Vue.js und Neos ermöglicht es den Nutzern, eine Anfrageliste zu erstellen und mit einem Klick Interesse an vielen Produkten zu äußern.
