Highlights:
Neues Design mit Adobe XD
Die Emanuel Schreiber Schilderfabrik zählt zu den langjährigen Key Account Kunden von PERIMETRIK® und wird seit 2017 fortführend betreut. Nach einer Neuprogrammierung und stetigen Weiterentwicklung des WooCommerce Shops führte PERIMETRIK® 2020 einen umfangreichen Ausbau des Shops durch. Grundlage für die Weiterentwicklung war ein Redesign mit Adobe XD. PERIMETRIK® erstellte Design-Vorlagen für jeden Seitentyp sowie jede geplante neue Inhaltsart. Die Layouts dienten als Vorlage für den Ausbau in WordPress.
Das neue Design ist klar und modern. Es unterstützt die übersichtliche neue Struktur und ist selbstverständlich responsiv.
Im Menü kann der Interessent direkt den gewünschten Hersteller bzw die gewünschte Fahrzeugart auswählen und landet auf der entsprechenden post-archiv-Seite.
Neustrukturierung und Dynamisierung
Im Zuge des Ausbaus sollte die Struktur des bestehenden Shops bereinigt und der Anteil an dynamischen Inhalten vergrößert werden.
PERIMETRIK® ordnete bestehende Inhalte neu und erstellte dafür sinnvolle neue Inhaltsarten. Um die Produktauswahl zu vereinfachen legte PERIMETRIK® einen eigenen Custom Post Type für „Fahrzeuge“ und einen weiteren Custom Post Type für „Hersteller“ an.
Unter dem Hauptmenüpunkt „KFZ-Kennzeichen“ entstanden im Megamenü die entsprechende Unterpunkte „Hersteller“ und „Fahrzeugart“. Per Klick auf einen Hersteller bzw. eine Fahrzeugart wird der User direkt auf die entsprechende Detailseite geführt.
PERIMETRIK® erstellte zentrale Layouts für die beiden CPTs. So werden alle Detailseiten in einem einheitlichen Look präsentiert und der Arbeitsaufwand beim Anlegen neuer Inhalte ist möglichst gering. Bearbeitet werden müssen lediglich Titel, Beschreibung und Key Visual. Aufbau und Anordnung aller Inhalte sind innerhalb des Layouts fest definiert. Ebenso wurde im Template die dynamische Ausgabe passender Relations festgelegt.
Landing Pages dynamischer Produktanzeige
Das Layout für den CPT Hersteller ist folgendermaßen aufgebaut: Der Titel wird dynamisch generiert; die Bezeichnung des Herstellers muss in ein entsprechendes Feld im Backend eingetragen werden und wird dann in den Standardtitel integriert (z.B. „Kennzeichen für AudiFarzeuge“). Im Beschreibungsfeld ist Platz für Infos und Fakten. Über ein Upload-Feld kann ein passendes Key Visual ergänzt werden.
In der Sektion „Produkte“ werden dynamisch alle Produkte aufgeführt, die sich für den entsprechenden Hersteller (z.B. Audi) eignen. Für die dynamische Produktanzeige entwickelte PERIMETRIK® ein passendes Loop-Layout. Mit diesem wird jedes Produkt mit Thumbnail, Titel, Textauszug, Preisangabe und Button „Optionen auswählen“ angezeigt. Klickt der Interessent auf den Button, wird er auf die entsprechende Produkt-Detailseite weitergeleitet. Auf dieser kann das Wunschprodukt weiter konfiguriert und anschließend in den Warenkorb gepackt werden.
Die Produktdarstellung auf der Hersteller-Seite ist vierspaltig und zunächst zweizeilig, d.h. es werden acht Produkte dynamisch dargestellt. Wer in dieser Auswahl noch nicht das gewünschte Produkt findet, dem werden per Klick auf den Button „Mehr Produkte laden“ die nächsten acht Produkte angezeigt.
Unterhalb der Produkte folgt Beschreibung-Sektion mit weiteren infos und Hinweisen zur Kennzeichenbestellung für ein Fahrzeug dieses Herstellers.
Darunter integrierte PERIMETRIK® dynamische FAQs zum Thema. Abschließend folgt die Sektion „News“, in der die neuesten Beiträge von Schilder Schreiber angeteasert werden.
Das Layout für die Fahrzeugart (z.B. „Auto“) ist ähnlich aufgebaut. Auch hier werden dynamisch passende Produkte, FAQs und News dargestellt.
Hersteller-Archiv für das Beispiel Audi
Im Konfigurator kann der Käufer sein Wunschkennzeichen eintippen. Zusätzlich können Schriftfarbe, Länge und Optik angepasst werden.
Weitere Interessante Produkte regen zum Kauf an.
Produkt-Detailseite mit Cross-Selling-Produkten und dynamischen Inhalten
Auch für die Detailseiten der Produkte entwickelte PERIMETRIK® ein neues Layout. Die Titelsektion zeigt ein Produktbild und erläutert, welche Schritte bis zur Bestellung durchlaufen werden. Darunter integrierte PERIMETRIK® den Produktkonfigurator. In diesem kann der Benutzer sein Wunschkennzeichen in die dafür vorgesehen Felder eintippen.
Weiter können Schriftfarbe, Länge und Optik (z.B. Carbon) mit Hilfe eines Filters weiter eingegrenzt werden.
Anhand eines Buttons wird der Käufer weiter auf die Warenkorb-Seite geleitet. Alternativ kann die Zahlung auch direkt via PayPal geleistet werden.
Um weitere Käufe anzuregen, baute PERIMETRIK® im neuen Produktlayout die Cross-Selling-Produkte aus. So werden dynamisch ähnliche Produkte (z.B. der gleichen Produktkategorie) angezeigt. Darunter folgen ein Abschnitt mit kombinierbaren Produkten sowie eine Sektion mit weiteren interessanten Produktvorschlägen.
Dynamische Ausgabe von FAQs zu Produkt und Bestellablauf
PERIMETRIK® erstellte für die Produkt-Detailseiten gleich zwei verschiedene Sektionen mit dynamischen FAQs: Produktspezifische FAQs sowie häufig gestellte Fragen zu Bestellung und Versand. Zur Darstellung der FAQs wurde ebenfalls ein eigener gleichnamiger CPT erstellt. So generiert jede FAQ eine eigene Detailseite. Auf der Produkt-Detailseite werden die FAQs in Form von Toggles dargestellt. Hier sind zunächst nur die Fragen sichtbar. Wer sich für eine bestimmte Frage interessiert, klickt auf das kleine Plus-Zeichen und im Toggle wird die passende Antwort lesbar.
Auf der Produkt-Detailseite werden dynamisch FAQs ausgegeben, die thematisch zum Produkt passen.
Weiter unten auf der Produkt-Detailseite werden dem Käufer zudem allgemeine FAQs zu Versand und Bestellung geboten.
Fazit:
Die neue Shopversion von schilder-schreiber.de ist sauber strukturiert und besonders benutzerfreundlich. Anhand der ansprechenden, klaren Navigationen findet der Kaufinteressent schnell das passende Produkt für sein Fahrzeugmodell. Die dynamische Ausgabe sinnvoller FAQs, News und passender Produkte auf den Seiten der Hersteller, Fahrzeugarten sowie auf den Produktdetailseiten selbst, bieten dem Benutzer einen hohen Grad an Informationsdichte und Kundenberatung. Sie helfen bei der Kaufentscheidung und regen zum Kauf weiterer Produkte an. Zudem entstanden durch den Ausbau der dynamischen Struktur zahlreiche informative Landing Pages, die zu einer erheblichen Verbesserung der Auffindbarkeit des Shops bei Google führen.
