SHOES.PLEASE
https://shoesplease.de/
SHOES.PLEASE ist ein bekanntes Geschäft für hochwertige Schuhe und Taschen. In den modernen Räumlichkeiten in Zwickau, Warnemünde und Rostock findet man von Stiefeln bis Sandaletten alles, was das Herz begehrt. Unsere Aufgabe war es, dem alten Onlineshop ein neues, zeitgemäßes Design zu verleihen und leistungssteigernde Features, wie dynamische Filter, einzubauen.
Wir haben den bestehenden Onlineshop von SHOES.PLEASE von Grund auf erneuert und wichtige Optimierungen vorgenommen. Nach einem lebendigen Kick-Off-Meeting haben wir eine Bestandsaufnahme durchgeführt, um einen Überblick über Produktanzahl, Produktbilder, Produktbeschreibungen und weiterem Content zu erhalten. Die bisher ungenauen Kategorien, Such- und Filterfunktionen machten es den Nutzern schwer, das gewünschte Produkt zu finden.
Das Suchmaschinen-Ranking zu verbessern stand neben dem Redesign im besonderen Fokus. Daher haben wir zu Beginn eine intensive SEO-Analyse durchgeführt. Diese begann mit der Untersuchung des Shop-Rankings, inklusive aller relevanten indexierten URLs, Keywords, On-Page Fehler und Warnungen mithilfe eines technischen Crawlers sowie der Aufstellung aller aktuell verweisenden Backlinks auf den Shop, um diesen im neuen Shop eine Zielseite zu geben.
Anschließend wurden alle SEO-Inhalte gesammelt und gesichert. Besonders wichtig war die Analyse der Metabeschreibungen und Metatitel aller Produkte und Kategorien sowie eine Aufstellung aller noch zu pflegenden Datensätze. Auf deren Grundlage werden später dynamische Meta- und Titelbeschreibungen aller Filter innerhalb der Kategorie, sowie aller Varianten eines individuellen Produktes entwickelt. Dazu gehört auch die Sammlung der Alt-Tags aller Bilder, die Sicherung und Auflistung aller SEO-Texte und aller Inhalte auf dem ursprünglichen Shopify-Template.
Anhand dieser Wissensgrundlage konnten wir benötigte Texte, Inhalte, Kategorien und Medien noch vor der Entwurfsplanung auflisten.
Auf Grundlage des ursprünglichen Designs und der aus Absprachen hervorgehenden Wünsche zu Schriften und Signalfarben, wurde das bestehende Corporate Design angepasst und mit Onlineshop-exklusiven Designelementen erweitert. So wurden Offline-Konzept und das digitale Design in Einklang gebracht.
In unserer Ist-Analyse wurde klar, dass viele Kund*innen ihr Smartphone für eine Bestellung nutzen. Diesen Fakt haben wir in die Customer Journey aufgenommen und uns besonders auf die mobile Darstellung des Shops in der Entwurfsphase konzentriert. Dabei spielten Ansätze zur optimalen Darstellung des Menüs, zur Minimierung der Textpassagen oder zur Maximierung der Performance bei großen Bild- und Videomaterialien eine Rolle.
Auf Basis von bestehenden Onlineshops und relevanten Konkurrenten der Branche wurden sogenannte Moodboards erstellt. Diese beinhalten Designelemente, Ideen und Inspiration und bieten einen ersten Anhaltspunkt, um sich dem finalen Design im ersten Schritt zu nähern.
In diesem Schritt haben wir uns überlegt, welche Navigationselemente den Nutzer*innen zur Verfügung stehen sollen und wie diese untereinander verlinkt sind, um eine Grundlage für einen späteren Conversionfunnel aufzubauen. Die Entscheidung fiel dabei auf eine erste Unterscheidung in Damen und Herren, welche in einem späteren Schritt anhand von Cookies umgesetzt werden soll. Im zweiten Schritt stehen den Nutzer*innen unterschiedliche Kategorien zur Auswahl.
Anhand von User Testing haben wir auch unterschiedliche Layouts für die Kategorieseiten getestet. Dabei haben wir beispielsweise herausgefunden, dass die Nutzer*innen ein ausklappbares Filterelement bevorzugen. Dieses haben wir dann mit Icons und Hover-Effekten ausgestattet, um ein intuitives Filtern des Produktsortiments zu ermöglichen. Je nach Filter verändert sich auch der SEO-Content auf der Seite dynamisch, was einen Vorteil in der Auffindbarkeit bietet.
Vor der Umsetzung haben wir unsere Entwürfe mit einem klickbaren Figma-Prototyp kommuniziert und erste Konzepte getestet. Die Screens wurden anhand ausgewählter Use Cases für Desktop- und mobile Darstellung realitätsnah dargestellt, um ein intuitives Interaktionsgefühl zu vermitteln. Dabei wurden auch Hover-Effekte und Animationen deutlich.
Anhand des Feedbacks aus Design Review und User Tests haben wir unsere Entwürfe verbessert und an die Anforderungen der Customer Journey angepasst. Dabei haben wir Designlemente überprüft sowie Interaktionsmuster kennengelernt und überarbeitet.
Der Onlineshop entsteht auf Basis eines schnellen und auf die speziellen Ansprüche des Corporate Designs der Marke und des Entwurfs angepassten Templates. Dabei wird auf ein Portfolio von eigens entwickelten Elementen und Funktionen zurückgegriffen, um Unabhängigkeit von Drittanbieter Templates und Apps zu gewährleisten.
Die Content-Seiten beinhalten neben der individuellen Seitenstruktur ein anpassbares Section-Design nach Shopify 2.0, um Inhalte mit geringstmöglichem Aufwand zu ändern.
Jede Top-Level Produktkategorie erhält ein eigenes Kategorietemplate mit der Möglichkeit zur individuellen Filterung von dynamischen Inhalten. Das bedeutet, dass die Filteroptionen anhand des Produktsortiments innerhalb der jeweiligen Kategorie logisch verknüpft werden, um Filterungen zu vermeiden, die keine Ergebnisse erzielen.
Die Kategorieebenen werden anhand von Tags (z.B. Farbe, Material, Passform, etc.), Anbietern und Varianten gefiltert. Eine Filterliste dient als Grundlage für die korrekte Indexierung von gefilterten Kategorieseiten.
Alle Produkte erhalten ein universelles Produkttemplate, welches jedoch individuelle Inhalte darstellen kann. Die Inhalte (z.B. Produkttabs) orientieren sich am Produkt und sind dynamisch in das Template implementiert. Für bestimmte Produktreihen (Signature-Brands) wurden individuelle Produkttemplates geschaffen, um spezielle Designelemente und Inhalte darzustellen.
Dies ist eine erweiterte Funktion für den Shop, um den Nutzer*innen den Einkauf eines gesamten Looks aus beispielsweise Schuh und Tasche zu ermöglichen und dabei von einem Vorteilspreis zu profitieren. Die Looks können darüber hinaus auf einer separaten Landingpage beworben werden und sind als High-Fashion-Foto mit Kauf-CTA dargestellt.
Bei dieser Funktion haben wir uns an Best-Practices von anderen Fashion-Onlineshops orientiert. Für erstmalige Besucher*innen der Website erscheint eine universelle Landingpage, über die man sich dann entweder zur speziellen Herren- oder Damen-Landingpage durchklicken kann.
Als datenschutzfreundliche Alternative zur Cookie-Speicherung entschieden wir uns dafür, die Geschlechtspräferenz im LocalStorage zu speichern. Dadurch können personalisierte Produkte, Marken, Looks und SEO-Texte angezeigt werden. Diese Einstellung kann man entweder beliebig oft über Buttons in der Navigation vornehmen oder einmalig über den Hero-Banner auf der universellen Landingpage.
Beginnen wir bei der Google Indexierung. Hierfür wurde eine Liste von relevanten Kategoriefilterungen für die Google Suche erstellt, wobei wir uns einerseits am Suchvolumen bei Google und andererseits an der Erfahrung unseres Kunden im Handel orientiert haben. Alle relevanten URLs wurden indexiert und bei allen URLs, die keine individuellen Inhalte zeigen, wurde die Indexierung verhindert. Dieser Schritt ist wichtig, um duplicated content zu vermeiden. Der Fokus lag hier auf folgenden Filtern: Marke/Anbieter, Farbe, Geschlecht.
Als nächstes haben wir uns um die dynamischen Inhalte auf der Kategorieseite gekümmert. Auf der Basis der gerade genannten Filtermöglichkeiten werden neben den gefilterten Produkten auch alle für Google relevanten Inhalte dynamisch angepasst. Diesen beschreiben wir im nächsten Abschnitt näher.Die einheitliche Überschriftenstruktur für Landingpage, Produktseiten und Kategorieseiten sowie den damit einhergehenden Inhalten sorgt dafür, dass Suchanfragen mit entsprechenden Keywords innerhalb der Überschriften bedient und gleichzeitig technische Crawling-Fehler auf der Seite vermieden werden.
Weitere Onpage-Optimierungen sind die Pflege von Alt-Tags für neues Bildmaterial und Produktfotos, die einheitliche Erstellung von strukturierten Meta-Beschreibungen und Meta-Titeln sowie die Web-Optimierung von grafischen Elementen (Bilder, Videos, Icons, etc.).
Kommen wir nur zum Herzstück unserer Zusammenarbeit mit SHOES.PLEASE: der Implementierung von dynamischen Filtern auf der Kategorieseite.
Die Grundlagen dieser Funktion ist, dass das große Produktsortiment von SHOES.PLEASE in verschiedene Produktkategorien unterteilt ist, wobei jede Produktkategorie für Damen und Herren separat auf Kategorieebene angelegt wurden. Dazu kann jede Produktkategorie auf Filterebene beispielsweise nach Marke, Farbe, Größe und Material gefiltert werden.
Die Ziele von dynamischen Filtern auf der Kategorieseite sind, den Nutzer*innen und Google einzigartigen Content zu präsentieren und duplicated content zu vermeiden.
Durch das Filtern der Produktkategorie werden neue URLs erzeugt. Um das Crawling-Budget effizient zu nutzen, sollten diese URLs entweder einzigartigen Content haben oder nicht indexiert werden.
Folgende Inhalte werden durch den dynamischen Filter angepasst: URL (automatisch durch den Storefront Shopify Filter), H1 (Marke und Farbe wird hinzugefügt), Produktauflistung, SEO Texte bzw. Kategoriebeschreibung (angepasst an jeweilige Marke und Kategorie), Metatitel, Metabeschreibung.
Der Filter zeigt nur Filtermöglichkeiten für Produkte an, die im Warenbestand des Onlineshops vorhanden sind. Zudem sind die Filtermöglichkeiten für Taschen und Schuhe angepasst.
Es werden nur relevante Filter-URLs durch robots.txt oder canonical-tags indexiert, um zu vermeiden, dass bestimmte Filter URLs nicht gelistet werden. Ein passendes Beispiel dafür wären Filter URLs, die durch eine Sortierung oder Preiseingrenzung entstehen.
Der Filter ist individuell erweiterbar, um neue Kategorien und Marken in das Sortiment aufzunehmen.
Auf Wunsch unseres Kunden SHOES.PLEASE und zur Verbesserung der Performance haben wir weitere individuelle Funktionen umgesetzt. Dazu zählen eine Wunschliste, das Lookbook, Bundles, Unterstützung bei der Produktpflege, Google Ads Performance Marketing, eine Newsletter Anbindung sowie die Integration von Trustbadge und Rezensionen.
