Herangehensweise
Analyse des Webshops
Zu Beginn habe ich die bestehende Website gründlich analysiert. Ich habe die Navigation, den Footer, den Aufbau des Shops, die Home-Seite, die Kategorieseite und
die Detailseite betrachtet und mir Notizen zu den Stärken und Schwächen gemacht.
Folgende Punkte sind mir besonders aufgefallen:
- Fehlendes User-Feedback
- Zu viel Text, oft redundant
- Nutzer müssen viel lesen, bevor sie eine Interaktion durchführen können (keine klaren CTAs)
- Kein klares Designkonzept
- Gute Struktur und einfache Bedienbarkeit durch die Navigation
- Kategorien sind sinnvoll angelegt
Recherche und Best Practices
Ich habe drei bekannte Online-Shops untersucht: Westwing, Depot und IKEA. Dabei habe ich die Home-Seite,
die Detailseite und eine Kategorieseite unter die Lupe genommen. Dabei habe ich insbesondere auf die Struktur der Seiten und das Benutzererlebnis geachtet.
Aus der Analyse habe ich folgende Erkenntnisse gezogen:
- Produkte sollten in mehreren Kategorien aufgeteilt werden (z. B. nach Inspiration, Ideen, Anlässen) und nicht nur nach Produktnamen.
- Die Navigation sollte so klar wie möglich sein, um herauszufinden, wonach die Kunden suchen.
- Es sollten viele Bilder genutzt werden, um zu zeigen, wie Produkte in der Praxis verwendet werden können.
- Kategorien sollten im Vordergrund stehen, nicht einzelne Produkte, um das Finden von passenden Artikeln zu erleichtern.
- Produktseiten sollten thematisch nach Saison, Feiertagen oder aktuellen Trends strukturiert werden.
- Weniger Farbe im Design verwenden; Produktbilder sollten im Fokus stehen.
Ziele für den Webshop
Ich habe mich in einen potenziellen Kunden hineinversetzt und zwei Szenarien überlegt, wie man durch den Shop navigieren könnte. Daraus habe ich Ziele für die Home-Seite, die Kategorieseite, die Navigation und die Produkt-Detailseite abgeleitet. Dabei habe ich mögliche Frustrationen des Kunden und passende Lösungen formuliert. Auf Basis dieser Erkenntnisse konnte ich die wichtigsten Funktionen herausfiltern, die im Redesign berücksichtigt werden sollten.
→ Komplette Analyse und Recherche ansehenDesign-Konzept
Ich begann mit der Erstellung eines Moodboards, auf dem ich Farb- und Schriftideen sammelte. Da der Shop hochqualitative Produkte verkauft, entschied ich mich für eine edle Farbpalette aus Silber, Gold und Schwarz. Die Schriftarten sollten ebenfalls Eleganz ausstrahlen und zur Premium-Marke passen.
Wireframe und Ideensammlung
Nachdem ich die Grundlagen des Designs festgelegt hatte, erstellte ich in Figma Wireframes für die drei Seiten. Dabei achtete ich darauf, dass die Ergebnisse meiner Analyse und Recherche einflossen. Anschliessend begann ich, die einzelnen Komponenten wie Produktkarten, Navigation und Buttons in Figma zu gestalten. Ich experimentierte mit verschiedenen Farbkombinationen und Schriftarten, um zu testen, wie sie miteinander harmonieren.
→ Wireframe & Ideensammlung ansehenScreendesign und Prototyp
Mit den fertiggestellten Komponenten konnte ich das endgültige Screendesign umsetzen und verschiedene Variationen ausprobieren. Nachdem das Design feststand, begann ich, den interaktiven Prototypen mit Animationen zu erstellen.
→ Screendesign & Komponenten ansehen
