Ziel
Unser Ziel ist es, die Schlüsselkennzahlen des Online-Shops – die Konversionsrate, die Sitzungsdauer sowie die Absprung- und Ausstiegsrate – durch intelligentes Design zu erhöhen. Hierbei ist es uns besonders wichtig, das hohe Alter unserer Zielgruppe optimal zu berücksichtigen.
Vorgehensweise
Bevor wir an die kreative Neugestaltung gehen, gilt es, ein klares Bild der gegenwärtigen Herausforderungen zu bekommen. Hierfür setze ich auf eine Kombination aus UX Benchmark und umfassender Datenanalyse.
UX Benchmark Teil 1
Tauchen wir in den ersten Abschnitt unserer UX-Analyse ein. Wir prüfen, wie die Webseite aufgebaut ist und wie sich die Bewegung auf ihr anfühlt. Denn um das Nutzererlebnis zu optimieren, gehen wir tief in die Benutzerinteraktion rein. Wie navigiert der Nutzer durch die Webseite? Wie viele Klicks sind nötig, um ein Produkt zu kaufen? Ist die Hierarchie klar? Durch das Beantworten solcher Fragen stellen wir sicher, dass wir unseren Nutzern ein wirklich intuitives Erlebnis bieten.
UX Benchmark Teil 2
Herzstück des Benchmarks ist mein exklusiver Katalog, ein wahrer Schatz an Wissen und Erfahrungen, den ich über Jahre durch UX Studien, Datenanalysen, E-Commerce-Erfahrungen und bewährte Praktiken akkumuliert habe. Insgesamt bietet dieser Katalog über 750 Einheiten, die uns eine detaillierte und transparente Darstellung ermöglichen – eine exakte Karte des Shops, auf der wir die Bereiche markieren können, in denen die Benutzerfreundlichkeit schwächelt. Jeder Aspekt, jedes Element und jede Kategorie des Shops fließt hier ein – ein umfassender Überblick, der uns genau zeigt, wo Optimierungsbedarf besteht.
UX Benchmark Teil 3
Unsere Reise durch den UX Benchmark erreicht ihren Gipfelpunkt in Teil drei, der die visuelle Identität des Shops ins Rampenlicht stellt. Wir betrachten, inwiefern das Design die Nutzbarkeit unterstützt oder hindert. Dazu zählt eine breite Palette von Aspekten: Wie intelligent werden Farben genutzt? Ist die Darstellung konsequent barrierefrei? Gibt es eine etablierte Schriftenhierarchie und konsistente Layoutvorgaben? All dies sind entscheidende Faktoren, die das Nutzerlebnis beeinflussen. In diesem Teil stellen wir sicher, dass das visuelle Auftreten des Shops ein harmonisches Zusammenspiel mit seiner Funktionalität bildet.
Datenanalyse
Nachdem unser UX-Benchmark abgeschlossen ist, tauchen wir in die Daten ein. Fokus? Eine umfangreiche Analyse aller möglichen Infos, die uns spannende Einblicke in das Nutzerverhalten verschaffen können. Wir checken sowohl technische als auch soziale Daten in Google Analytics und stöbern in den umfassenden Aufzeichnungen von Hotjar. Jede Zahl, Grafik oder Aufnahme kann uns ein entscheidendes Stück des Puzzles liefern und uns helfen, das Nutzerverhalten besser zu verstehen und unsere Strategie anzupassen.
Exkurs: Hotjar
Hotjar ermöglicht es uns, Nutzerinteraktionen auf der Webseite live aufzuzeichnen. Jeder Klick, jede Mausbewegung, jede Navigation wird erfasst. Mit dieser Detailtiefe können wir Usability-Probleme ganz exakt identifizieren und verbessern. Hotjar eröffnet echt eine neue Dimension der Analyse.
Ergebnisse Produktseiten
Above Fold Content auf Produktseiten
Status vorher
Gibt man der aktuellen Produktseite einen kurzen Blick, präsentiert sie sich recht technisch und stark verkaufsorientiert. Ein Produktbild, der Preis und Zahlungsinformationen scheinen im Vordergrund zu stehen. Doch wo ist die wertige Produktbeschreibung, die Vertrauen schafft und das Produkt in seiner Funktion und seinem Nutzen erklärt? Fehlanzeige.
Status neu
Das neue Design zeigt das Produktbild und alternative Ansichten optimal. Unter dem Produkttitel findest du die Bewertungen – wichtiges Vertrauen für potenzielle Käufer. Jedes Produkt ist prägnant beschrieben. Wir heben die wichtigsten Kriterien hervor, damit du sofort verstehst, warum dieses Produkt perfekt für dich ist.
vorher
nachher
Upselling
Status vorher
Die Produktkonfiguration öffnet die Tür zu zusätzlichen Services, ist aber aktuell wenig einladend. Die technische Gestaltung und die unpraktischen Dropdown-Menüs machen die Bedienung schwierig. Dass Änderungen nicht sichtbar sind, wenn das Menü geschlossen wird, nervt. Die Upselling-Funktion ist in ihrem intransparenten Look kaum nutzbar.
Status neu
Das frische Design setzt die Konfigurationen in den Fokus. Änderungen bleiben sichtbar, auch wenn das Menü geschlossen ist. Hilfreiche Tooltips begleiten den Nutzer durch die Einstellungen. Der Fokus liegt auf den Menschen, nicht der Technik. Statt technischer Daten gibt’s verständliche Informationen, wie etwa die erhöhte Reichweite einer größeren Batterie – eingängig und praxistauglich.
vorher
nachher
Ergebnisse Produktarchiv
Die Wichtigkeit
Die Produkte zu finden, die man sucht – easy right? In diesem Shop kann es zur Mammutaufgabe werden. Produktlisten und Filter- & Sortierfunktionen im E-Commerce sind der Schlüssel dazu, wie problemlos oder beschwerlich es für den Nutzer ist, den Produktkatalog einer Website zu durchforsten. Sie entscheiden, ob der Nutzer findet, wonach er sucht, oder frustriert das virtuelle Geschäft verlässt.
Status vorher
Das Produktarchiv ist eher eine Sparringszone, wenn es um Benutzerfreundlichkeit geht. Die Produktliste ist wenig informativ. Die Produkte wirken karg, das Vergleichen ist schwierig und die Auswahl bleibt unklar. Der Nutzer ist auf sich allein gestellt und muss die Vor- & Nachteile der einzelnen Produkte selbst kennen. Einstellungen sind nur durch klobige Schieberegler möglich und überflüssige Einleitungstexte lassen die Seite wie einen Blogartikel wirken. Die klaren Gestaltungsrichtlinien fehlen – Buttons und Überschriften verschmelzen förmlich in ihrer gleichen Formatierung.
Status neu
Mit dem neuen Design tritt eine klare visuelle Hierarchie ein. Der Nutzer wird von einer benutzerfreundlichen Filterleiste empfangen und kann sich elegant durch seine Ergebnisse bewegen. Aktive Filter werden hervorgehoben und die wesentlichen Sortierfunktionen sind nur einen Klick entfernt – ohne lästiges Neuladen der Seite. Die Produkte präsentieren sich nicht nur in einem einheitlichen Look, sie sind auch reich an Informationen, die das Vergleichen erleichtern und somit die Kaufentscheidung unterstützen.
vorher
nachher
Ausblick
Entwicklung
Das neue Design ist seit Ende März live und für jeden zugänglich. Der aktuelle Schwerpunkt liegt auf technischen Verbesserungen basierend auf den Daten. Bald kommen weitere Schritte zur Optimierung des Designs. Unser Endziel? Ein Entwicklungsstand, der perfekt mit dem UX-Prototyp übereinstimmt und einen nahtlosen, ansprechenden Online-Shop präsentiert.
vorher
nachher
vorher
nachher
Nutzerverhalten
Unsere Reise endet nicht hier. Die Zukunft fordert kontinuierliche Analysen und Optimierungen, um sich im ständigen Wandel des Nutzerverhaltens zurechtzufinden. Mit den Erkenntnissen aus A/B-Tests werden wir herausfinden, welche Filteroptionen und Texte den größten Mehrwert bieten. Wir überlegen auch, eine Funktion einzuführen, die es ermöglicht, mehrere Produkte auszuwählen und zu vergleichen. Meine Zusammenarbeit mit Scooters ‘N Chairs ist langfristig angelegt, und ich freue mich darauf, an den bevorstehenden KPI-Messungen zu arbeiten. Gemeinsam werden wir kontinuierlich daran arbeiten, uns zu verbessern und unseren Nutzern das bestmögliche Erlebnis zu bieten.
Weitere UIs
vorher
nachher
vorher
nachher
Erste Design Skizze der neuen Produktseite