E-Commerce Design
Migration & Weiterentwicklung des Onlineshops Brille24
Meine Rolle:
UX Design, UI Design, Prototyping
Tools:
Adobe XD
Ziel:
Migration der bestehenden Shop- und CMS-Systeme auf eine neue Plattform sowie die kontinuierliche Weiterentwicklung des Online-Shops.
Lösung:
Iteratives Prototyping und Testing, begleitet durch ein modulares Design System.
Überblick
Die Migration bestehender Systeme stellte eine der größten Herausforderungen dar. Mein Fokus lag auf Usability, Conversion-Optimierung und einem modernen UI-Design, das den Markenwert von Brille24 unterstreicht.
Im Laufe des Projekts entstanden zahlreiche interaktive Prototypen in Adobe XD, die als Grundlage für Abstimmungen mit Stakeholdern, Entwickler:innen und Management dienten.
Das neu geschaffene Design System sorgte für Skalierbarkeit und Konsistenz im gesamten Shop. Für Redakteur:innen entwickelte ich zudem neue CMS-Module, die die Content-Erstellung einfacher und effizienter machten.
Customer Journey
Der Kaufprozess wurde als ganzheitliche Customer Journey betrachtet, von der ersten Produktsuche bis zum Abschluss des Kaufs. Jeder Schritt wurde so gestaltet, dass Informationen klar vermittelt und Entscheidungen erleichtert werden. Im Mittelpunkt standen kurze Wege, transparente Preisstrukturen und eine durchgängige Nutzererfahrung über alle Endgeräte hinweg. Der Journey-Ausschnitt zeigt exemplarisch, wie Nutzer:innen Produkte entdecken, Details vergleichen, Konfigurationen anpassen und den Kauf abschließen können. Ergänzt wird dies durch optimierte Bestätigungs- und Folgeprozesse, die Vertrauen schaffen und zur Wiederkehr motivieren.
Ziel
- Schaffung eines durchgängigen Einkaufserlebnisses
- Reduktion von Reibungspunkten im Kaufprozess
- Förderung von Zufriedenheit und Wiederkäufen
Prozess
- Analyse bestehender Customer-Flows und Pain Points
- Erstellung von Journey-Maps und Szenarien
- Ableitung von Optimierungen für Struktur, Inhalt und Interaktion
Lösung
Commerce-Journey, die Nutzer:innen sicher vom Einstieg bis zum Checkout führt und durch klare Strukturen sowie eine moderne Bildsprache unterstützt wird.
Produkt-Katalog
Der Produktkatalog wurde komplett neu gedacht, um Orientierung und Inspiration zu vereinen. Großflächige Produktdarstellungen, integrierte Tragebilder und klare Hintergrundflächen sorgten für eine bessere Differenzierung der Produkte. Gleichzeitig wurde der Raum für Texte und Informationen erweitert, damit Nutzer:innen schneller verstehen, welche Eigenschaften ein Modell besonders machen. Diese Kombination aus Klarheit und Emotionalität erhöhte die Wiedererkennbarkeit und führte zu einer spürbar verbesserten Nutzererfahrung.
Ziel
- Klare visuelle Differenzierung der Produkte
- Emotionalere Produktdarstellung für ein inspirierendes Einkaufserlebnis
- Verbesserung der Nutzerorientierung im Katalog
Prozess
- Skizzen und Wireframes zur Strukturierung der Produktdarstellung
- Wettbewerbsanalyse und Nutzerfeedback-Auswertung
- Entwicklung und Testing mehrerer Prototypen in Adobe XD
Lösung
Ein überarbeiteter Produktkatalog mit neutralen Hintergrundflächen, optimierter Informationshierarchie und integrierten Tragebildern, die das Produkterlebnis emotional erweitern.
Produkt-Detailseite
Die Produktdetailseite wurde gezielt auf Übersichtlichkeit und Interaktion hin optimiert. Neue Tragebilder zeigen das Produkt aus Nutzersicht und schaffen Vertrauen. Ergänzend wurde die Auswahl der Glastönung in ein Overlay verlagert, um den Fokus auf das Produkt zu lenken und gleichzeitig die Usability zu verbessern. Das Layout erhielt ein modernes, aufgeräumtes Design, das die wichtigsten Informationen betont und visuell ansprechender gestaltet ist.
Ziel
- Stärkere Fokussierung auf das Produkt selbst
- Intuitivere Nutzerführung bei der Konfiguration
- Modernisierung des Seitenlayouts für ein zeitgemäßes Erscheinungsbild
Prozess
- Recherche und Vergleich bestehender UX-Konzepte
- Erstellung von Low- und High-Fidelity-Prototypen in Adobe XD
- Feedback-Schleifen mit Stakeholdern und Usability-Tests
Lösung
Eine neu strukturierte Produktdetailseite mit integrierten Tragebildern und einer separaten Tönungsauswahl über Overlay, die den gesamten Kaufprozess klarer und nutzerfreundlicher macht.
Produkt-Konfiguration
Die Konfiguration wurde als schrittweiser Prozess konzipiert, um den Nutzer gezielt und intuitiv durch alle Entscheidungen zu führen. Jede Stufe, von der Sehwerteingabe bis zur Glasveredelung, ist klar voneinander getrennt und visuell durch Icons unterstützt. Dieses sequenzielle Vorgehen sorgt für mehr Übersichtlichkeit, vor allem auf mobilen Geräten, und reduziert Abbrüche im Bestellprozess. Gleichzeitig bleibt der Fokus stets auf der Produktauswahl und dem Ergebnis.
Ziel
- Intuitive und geführte Produktkonfiguration
- Erhöhte Übersichtlichkeit auf mobilen Geräten
- Reduzierung der Abbruchrate im Kaufprozess
Prozess
- Erstellung erster Flow-Skizzen auf Papier
- Analyse vergleichbarer E-Commerce-Journeys
- Prototyping und Testing unterschiedlicher Varianten in Adobe XD
Lösung
Eine sequenzielle, schrittweise Konfiguration mit visueller Unterstützung und klaren Auswahl-Overlays, die den Prozess vereinfacht und gleichzeitig das Vertrauen der Nutzer:innen stärkt.
Design System
Zur Sicherung der Konsistenz über alle Bereiche des Shops hinweg wurde ein modulares Design System entwickelt. Es basiert auf den Prinzipien des Atomic Design und bildet die Grundlage für alle UI-Komponenten. Farben, Typografie, Buttons und Module sind zentral dokumentiert und miteinander verknüpft. Dadurch können neue Seiten oder Features schnell umgesetzt werden. Das Design System erleichtert nicht nur die Zusammenarbeit zwischen Design und Entwicklung, sondern stellt auch sicher, dass der Markenauftritt langfristig konsistent bleibt.
Ziel
- Aufbau einer skalierbaren Designbasis für den gesamten Shop
- Sicherstellung visueller und funktionaler Konsistenz
- Vereinfachung von Prozessen zwischen Design und Entwicklung
Prozess
- Strukturierung der UI-Elemente nach Atomic-Design-Prinzipien
- Erstellung eines Design Systems in Adobe XD als zentrale Arbeitsgrundlage
- Abstimmung und Übergabe an das Entwicklerteam
Lösung
Ein flexibles, modulares Design System, das eine effiziente Weiterentwicklung des Onlineshops ermöglicht und alle Komponenten visuell wie technisch miteinander verbindet.
Das habe ich aus den Projekten mitgenommen:
- Die Projekte haben gezeigt, wie entscheidend ein gutes Gleichgewicht zwischen Designambition und technischer Machbarkeit ist.
- Durch frühe Abstimmung mit Development- und Content-Teams konnten Prozesse deutlich verschlankt werden.
- Besonders wertvoll war, zu erleben, wie Designsystem-Denken hilft, große E-Commerce-Umgebungen langfristig konsistent zu halten.
- Kleine, saubere Komponenten sind letztlich die Basis für große Flexibilität im laufenden Betrieb.