UI/UX Redesign

Optimierung der Navigation von DEINHANDY

Beschreibung des Bildes

Ü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.
Beschreibung des Bildes

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.
Neue Navigation

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.
Neue Navigation

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.