PROJEKT:
E-Commerce Navigation
JAHR:
2024
SERVICE:
UX/UI · Navigation · Komponenten
TOOLS:
Figma · UX Audit · Prototyping
Shop Navigation Redesign
worum geht es?
Shop Navigation Redesign ist ein anonymisiertes E-Commerce-Projekt, das im Rahmen meiner Werkstudententätigkeit bei Y1 entstanden ist. Im Fokus stand die Optimierung zentraler Navigationselemente eines Premium-Onlineshops, darunter Header, Footer, Produktweiche, Flyout-Menü und Kontaktfunktion.
Ziel war es, Produktbereiche klarer zu strukturieren, Orientierung zu verbessern und Nutzer schneller zu relevanten Inhalten oder Kontaktmöglichkeiten zu führen.
challenge.
Die Herausforderung bestand darin, eine umfangreiche Shop-Navigation so zu strukturieren, dass Nutzer trotz vieler Produktbereiche schnell Orientierung finden. Dafür mussten Kategorien, Interaktionszustände und mobile Navigation klar und nachvollziehbar gestaltet werden.
Zusätzlich sollte die Kontaktfunktion sichtbar und niedrigschwellig eingebunden werden, ohne den Einkaufsprozess zu unterbrechen.
prozess.
Im Prozess arbeitete ich in Figma an der Struktur und Gestaltung zentraler Shop-Komponenten. Ich entwickelte die Produktweiche, strukturierte das Flyout-Menü in nachvollziehbare Kategorien und definierte aktive Zustände sowie Hover States für eine klarere Orientierung.
Anschließend übertrug ich die Navigationslogik auf mobile Ansichten und konzipierte eine Kontaktfunktion, die unterschiedliche Kontaktwege sichtbar und schnell erreichbar macht. Begleitend unterstützte ich beim UX Health Check, um bestehende Schwachstellen in Nutzerführung, Orientierung und Interaktion zu identifizieren und daraus konkrete Optimierungsansätze abzuleiten.
ergebnis.
Das Ergebnis ist ein überarbeitetes Navigationskonzept für einen Premium-Onlineshop. Header, Footer, Produktweiche und Flyout-Menü wurden so gestaltet, dass Nutzer schneller zwischen Produktbereichen wechseln und relevante Kategorien leichter erfassen können.
Die mobile Navigation überträgt diese Struktur auf kleinere Screens, während die Kontaktfunktion Beratung und Hilfe niedrigschwellig zugänglich macht. So entstand eine klarere, konsistentere und serviceorientierte Shopping Experience, die Orientierung verbessert und den Zugang zu relevanten Inhalten vereinfacht.
learnings.
Das Projekt hat mir gezeigt, wie stark Navigation, visuelle Hierarchie und Servicezugang die Orientierung in einem E-Commerce-Shop beeinflussen. Besonders bei Flyout-Menüs, Produktweichen und mobilen Varianten wurde deutlich, dass klare Zustände, nachvollziehbare Kategorien und konsistente Interaktionsmuster entscheidend sind.
Ich habe gelernt, wie wichtig es ist, Navigation nicht nur als Menüstruktur zu betrachten, sondern als zentralen Bestandteil der gesamten User Journey. Eine gute Navigation unterstützt Nutzer dabei, schneller relevante Bereiche zu finden, Vertrauen aufzubauen und sich sicher durch den Kaufprozess zu bewegen.
