Dbilas dynamic ist Spezialist wenn es um schnelle Autos und Performance geht. Um deren Kompetenz auch im Web angemessen darzustellen, trat das Unternehmen mit der Aufgabe an uns heran, ein übersichtliches aber dennoch spezielles Webdesign zu konzipieren und den bereits vorhandenen Onlineshop sowie die Unternehmenswebsite zu verbinden, sodass Kunden sowohl Infos als auch Produkte schnell erfassen können. Für den Shop wurde eine Migration von Shopware 5 auf Shopware 6 durchgeführt.
Industrie & Maschinenbau, Automotive & Motorsport, Onlinehandel
Webdesign, Entwicklung, Konzeption, Corporate Design, eCommerce Audit, ecommerce
Im Design bildet ein schlichter übersichtlicher Aufbau die Basis für eine den User leitende Website. Gepaart mit dynamischen Elementen wirkt die Webseite spannend und lädt den User dazu ein, spielerisch auf der Seite zu verweilen, da es viel durch Klicken zu erkunden gibt.
Da einige Produkte kombiniert werden können, kann es die Darstellung des Hauptproduktes im Rahmen geben, um dieses in den Vordergrund zu stellen und daneben sieht man die dazugehörigen anderen Produkte. Hier sieht man z. B. im Rahmen die Hauptkategorie Ansaugtrakte, welche aber immer in Kombination mit Doppelvergasern beziehungsweise Einzeldrosselklappenteilen zu gebrauchen sind. So sieht der Kunde optisch verdeutlicht – was schneller vom Gehirn aufzunehmen ist als Texte – welche Kategorien und Produkte miteinander kombinierbar sind. Bei Mouse Over auf die Punkte der Nebenkategorien gelangt der Kunde zur Produktübersicht dieser Artikel. Bei Mouseover auf den Tool-Tipp bzw. Punkt im Rahmen öffnet sich ein Overlay über den Freisteller und der Kunde erhält einige Infos über Besonderheiten des Produktes.
Die Kategorieseite beginnt untypischerweise mit Contentelementen, die die Produkte der Kategorie vorstellen und erklären, da es sich um erklärungsbedürftige Produkte handelt. Dennoch wird es innerhalb der Kategorieseite eine Darstellung einer Produktübersicht geben, inkl. Filterleiste zum Sortieren von Eigenschaften sowie einer Seitennavigation aller Kategorien für einen besseren Überblick. Diese Darstellung kann je nach Produkttyp variieren und entweder als Kachelansicht mit Produktboxen oder als Listenansicht ausgegeben werden.
Da Produktbilder meist als Fotografie anstelle von Freistellern dargestellt werden, werden diese mit den rechts daneben stehenden Infos in einem Farbbalken zu einem Element zusammengefasst. So hat der Kunde nicht den Eindruck einer optischen Trennung. Ähnlich wie bei dem Konfigurator hat der User hier die Möglichkeit, seine Marke und Modell einzugeben, um das passende Produkt zu erhalten und weitere Einstellungen vorzunehmen. Außerdem gibt es einen Verweis direkt über dem Warenkorb-Button auf passendes Zubehör, um dieses gleich mit in den Warenkorb zu legen und sich somit lästiges Hin- und Herklicken und Zusammensuchen zu ersparen.
Die Startseite beginnt mit einem Video, welches sich in Zwei-Dritteln der Startseite abspielt. Ein konstruiertes Auto, was eine Assoziation mit dem Leistungsspektrum – nämlich das Aufbereiten von Fahrzeugen – von dbilas dynamics hervorruft, fährt ins Bild, stoppt einen Moment und fährt sehr schnell aus dem Bild heraus. Hier wird verdeutlicht, dass Kunden, nachdem sie die Leistungen von dbilas in Anspruch genommen haben, eine wesentliche Leistungssteigerung erfahren. Dies wird verdeutlicht, indem das Auto zuerst langsam ins Bild hinein und deutlich schneller heraus fährt. Daher wird das Video mit dem Konfigurator verknüpft, durch welchen der Kunde zu passenden Produkten für sein Fahrzeug gelangt.
Folgend hat der Besucher auch die Möglichkeit Produkte nach Baugruppe bzw. Kategorie zu wählen. Eine eigens entwickelte CMS-Erweiterung sorgt hier für automatische Darstellung der gewünschten Unterkategorien. Diese Erweiterung ist auf allen Folgeseiten einsetzbar und erzielt ohne große aufwendige Konfigurationsmöglichkeiten den gewünschten Effekt.
Mithilfe von Tooltips können Bilder oder Elemente mit Infos versehen werden. Angewandt kann dies so aussehen, dass z. B. sich im Fahrzeug an bestimmten Stellen befindende Elemente, die es im Shop zu kaufen gibt oder zu denen dbilas Leistungen anbietet, mit Punkten getaggt werden, die bei Mouse-Over eine Infobox öffnen. In dieser lassen sich Infos oder auch das passende Produkt integrieren. So bietet die Website zum einen den Lerneffekt für Kunden und gibt dem User gleichzeitig die benötigten Infos an die Hand.
Neben der Angabe von Detailinformationen können hier auch Produkte, Videos, Contentelemente oder einfache Links hinterlegt werden. Die Positionierung erfolgt in Prozent auf der X- und Y-Achse auf Basis der Bildbreite. So steht einer responsiven Darstellung nichts im Weg.
Das in den Unternehmensfarben gehaltene Fahrzeug deutet dem Besucher an, dass hier die wichtigsten Keyfacts zum Produkt oder der vorhergehenden Information optisch aufbereitet dargestellt werden. Die Rahmen der Keyfacts finden sich in nahezu jeder Seite wieder. Seien es Auswahlcontainer, Buttons, Headlines oder eben einfach immer wiederkehrende Keyfacts.