Optimierung der Navigation von DEINHANDY
Über das Projekt
Verbesserung der Benutzerführung und Usability der Hauptnavigation zur Steigerung der Conversion-Rate und Reduktion der Absprungrate.
Timeframe
1 Monate 2019
My Role
UI/UX Designerin
Tools
- Figma
- Adobe XD
- VS Code
- GitHub
Die Herausforderung
Die ursprüngliche Navigation von DEINHANDY war unübersichtlich und bot den Nutzern keine intuitive Möglichkeit, schnell das passende Produkt oder Angebot zu finden. Die Hauptprobleme waren:
- Komplexe Menüstruktur: Zu viele Kategorien und Untermenüs führten zu Verwirrung.
- Fehlende visuelle Hierarchie: Nutzer hatten Schwierigkeiten, relevante Inhalte auf einen Blick zu erfassen.
- Mangelnde mobile Optimierung: Die Navigation war nicht ausreichend an mobile Nutzung angepasst.
Designprozess & Lösungen
Basierend auf den Erkenntnissen entwickelte ich eine neue Navigationsstruktur mit folgenden Verbesserungen:
1. Vereinfachung der Menüstruktur
- Reduktion der Hauptkategorien von [Anzahl vorher] auf [Anzahl nachher].
- Gruppierung ähnlicher Produkte unter verständlichen Kategorien.
2. Verbesserte visuelle Hierarchie
- Einführung einer klaren Differenzierung zwischen Haupt- und Unterkategorien.
- Nutzung von Icons und Farbakzenten zur besseren Orientierung.
3. Mobile First-Ansatz
- Einführung einer Sticky-Navigation für besseren Zugriff auf wichtige Seiten.
- Optimierte Touch-Bedienung und größere Click Targets für eine verbesserte mobile Usability.
Recherche & Analyse
Um die Schwachstellen der bestehenden Navigation zu verstehen, führte ich eine umfassende Analyse durch:
- Heatmap-Analysen: Zeigten, welche Bereiche der Navigation am häufigsten geklickt wurden und wo Nutzer absprangen.
- User Interviews & Feedback: Nutzertests und Kundenfeedback halfen, zentrale Pain Points zu identifizieren.
- Best Practices & Wettbewerbsanalyse: Vergleich mit anderen erfolgreichen E-Commerce-Plattformen zur Inspiration.
Prototyping & Testing
- Erstellung von Low-Fidelity-Wireframes, um erste Konzepte zu testen.
- Umsetzung eines klickbaren High-Fidelity-Prototyps in Figma zur Simulation der neuen Navigation.
- Durchführung von A/B-Tests, um die Performance der neuen Navigation gegenüber der alten Version zu vergleichen.
Ergebnisse & Learnings
Nach der Implementierung des neuen Designs wurden folgende Verbesserungen festgestellt:
- 20% weniger Absprünge.
- 15% höhere Conversion-Rate.
- Optimierte mobile Nutzungserfahrung.
Learnings:
- Eine klare und intuitive Navigation reduziert kognitive Belastung und verbessert die Nutzerführung erheblich.
- Nutzer bevorzugen eine schrittweise Hierarchie anstelle von zu vielen direkten Auswahlmöglichkeiten.
- Mobile Nutzer profitieren stark von Sticky-Nav-Elementen und vereinfachten Menüs.
Fazit
Das Redesign der DEINHANDY-Navigation führte zu einer signifikanten Verbesserung der Nutzererfahrung und half, Geschäftsziele zu unterstützen. Durch eine nutzerzentrierte Herangehensweise konnten wir eine intuitive Navigation schaffen, die sowohl auf Desktop als auch mobil überzeugt.