Über mehrere Jahre hinweg habe ich zentrale Bereiche des skatedeluxe Shops kontinuierlich weiterentwickelt. Von Navigation und Produktsuche über den Kaufprozess bis hin zu Kundenbindung und Loyalty. Die folgenden Projekte zeigen eine Auswahl kleiner und größerer UX-Optimierungen entlang der gesamten Customer Journey.
Orientierung & Produktsuche
Menü Redesign
Das alte Hauptmenü war stark verschachtelt und visuell überladen. Im Redesign wurde die Navigation grundlegend vereinfacht und in eine klarere, horizontale Ebenenstruktur überführt, sowie ergänzt durch ein neues Icon-Set und eine feste Utility-Bar. Zentrale Funktionen wie Suche, Login und Merkliste sind schneller erreichbar. Nach dem Launch zeigte sich kurzfristig ein kleiner Performance-Dip, der auf technische Probleme zurückgeführt wurde, ein wichtiges Learning rund um Testing vor Releases.
Language Switch
Der Language & Country Switch wurde neu strukturiert, um die klare Trennung zwischen Länder-Shops und Sprachen verständlich zu machen. Statt eines einfachen Dropdowns gibt es zwei Bereiche: „Länder-Shops“ und „Alle Länder & Sprachen“. Die verfügbaren Sprachen passen sich dynamisch je nach Land an (z. B. mehrere Sprachen für Belgien, nur Englisch für UK). So wird klarer, ob gerade ein Land oder eine Sprache gewechselt wird. Pro Tipp: Flaggen gehören zu Ländern, nicht zu Sprachen.
Sticky Filter & Pagination
In den Produktlistings wurden Filter, Sortierung und Pagination als sticky UI-Elemente neu gedacht. Statt nur oben bzw. unten im Listing verfügbar zu sein, bleiben sie beim Scrollen jederzeit als kompakte Pill-Buttons sichtbar.
So können User Filter und Sortierung anpassen oder zwischen Seiten navigieren, ohne zurück zum Anfang oder Ende der Liste zu scrollen. Zusätzlich zeigt die Pagination direkt den aktuellen Stand (z. B. „Seite 2 von 20“) und verbessert so das Gefühl für Orientierung im Listing.
Sackgassen vermeiden
Am Ende von Produktlisten und Produktseiten wurden „Sackgassen“ vermieden, indem ein dynamisches Banner mit klaren nächsten Schritten eingeblendet wird. Je nach Kontext werden passende Optionen wie „zurück zum Anfang“ oder „ähnliche Produkte entdecken“ angeboten, ergänzt durch einen hervorgehobenen Primary-Button. So bleibt die Navigation auch am Seitenende klar geführt, statt User im „toten Ende“ zu verlieren.
Kaufprozess & Conversion
Sticky Checkout CTA
Im Checkout wurde ein Sticky „Weiter“-Button eingeführt, um lange Scrollwege zwischen den einzelnen Schritten zu reduzieren. Besonders mobil blieb der eigentliche CTA zuvor oft erst nach viel Scrollen erreichbar. Der Sticky Button ist ein Anker und bringt Nutzer direkt zum finalen Weiter-CTA am Ende der Seite. So wird der Checkout-Flow spürbar schneller und reibungsloser.
Warenkorb-Anker auf Produktseiten
Auf der Produktseite wurde ein Warenkorb-Anker eingeführt, um den Einstieg in den Kaufprozess zu beschleunigen. Da der eigentliche „In den Warenkorb“-Button oft erst nach mehreren Scrolls sichtbar ist, befindet sich im ersten Viewport ein kleiner Icon-Button im Bildbereich. Dieser springt direkt zum eigentlichen CTA inklusive Größenwahl und reduziert so unnötiges Scrollen, ohne die notwendige Produktinformation im oberen Bereich zu beeinträchtigen.
Rabattdarstellung
Die Rabattdarstellung wurde basierend auf UX-Prinzipien zur Wahrnehmung von Zahlen optimiert. Statt immer Prozent oder Betrag zu zeigen, wird dynamisch der jeweils größer wirkende Wert dargestellt, entweder der Euro-Betrag oder die Prozentersparnis. So wirkt der Rabatt konsistenter überzeugend, unabhängig vom Produktpreis. Beispiel: Bei 200 € mit 10 % Rabatt werden 20 € Rabatt angezeigt, bei 20 € mit 10 % eher die 10 %, da diese stärker wirken als 2 €.
Gratisprodukte mit Progress Bar
Die bestehende Gratisprodukt-Funktion im Warenkorb wurde visuell überarbeitet, um sie motivierender und verständlicher zu gestalten. Statt ausgegrauter, schwer einzuordnender Optionen wird der Fortschritt nun klar über eine Progress Bar dargestellt. Zusätzlich zeigt eine konkrete Restwert-Angabe (z. B. „nur noch 10 € fehlen“), wie nah der User an der nächsten Belohnung ist. So wird der Weg zum Gratisprodukt greifbarer und deutlich stärker als Anreiz wahrgenommen.
Kundenbindung
Premium Club Redesign
Der Premium Club wurde neu gestaltet, um das Loyalty-System stärker in die Shop-Experience zu integrieren. Das bestehende dunkle Premium-Design wurde dabei modernisiert und näher an die Skatedeluxe-Designsprache herangeführt, ohne den eigenständigen Charakter zu verlieren. UI-Elemente wie Listings, Buttons und Tabs wurden vereinheitlicht und ins bestehende Designsystem überführt. Gleichzeitig wurde die Kommunikation des Programms vereinfacht und die Mechaniken rund um Punktegewinn und Nutzung klarer strukturiert.
