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
Entdecken wir den ersten Abschnitt unserer UX Analyse. Unser Fokus liegt auf dem fundamentalen Aufbau und der Bewegungslogik der Webseite. Denn um die Benutzererfahrung zu verbessern, tauchen wir tief ein in die Benutzerinteraktion. Wir stellen uns in die digitalen Fußspuren unserer Nutzer - auf welche Hindernisse stoßen sie? Welche Interaktion bevorzugen sie? Fragen, die uns leiten: Wie navigiert der Nutzer durch die Webseite? Wie viele Klicks muss der Nutzer tätigen um ein Produkt zu kaufen? Ist die Hierarchie der Webseite offensichtlich? Durch das Beantworten dieser Fragen schaffen wir Klarheit und stellen 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 wir unseren UX Benchmark abgeschlossen haben, beginnt die Zeit des Datendelvens. Im Zentrum steht eine umfangreiche Analyse aller möglichen Daten, die uns wertvolle Einblicke in das Nutzerverhalten liefern können. Wir tauchen sowohl in technische als auch soziale Daten in Google Analytics ein und schmökern in reichlichen Aufzeichnungen von Hotjar. Jede Zahl, jede Grafik, jede Aufnahme kann uns ein entscheidendes Stück des Puzzles liefern und uns helfen, das Nutzerverhalten besser zu verstehen und unsere Strategie entsprechend anzupassen.
Exkurs: Hotjar
Tauchen wir kurz ab in das faszinierende Werkzeug Hotjar. Dieses ermöglicht uns, Live-Wiedergaben von Nutzerinteraktionen auf der Webseite aufzuzeichnen. Für uns als UX Analysten sind dies intensive Einblicke in die vollständigen Nutzererfahrungen - wir sehen jede Mausbewegung, jeden Klick, jede Navigation. Mit dieser Art von Detailtiefe können wir Usability-Probleme auf einer mikroskopisch detaillierten Ebene identifizieren und angehen. Hotjar eröffnet uns eine völlig 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 frische Design rückt das Produktbild und seine alternativen Darstellungen perfekt in Szene. Direkt unterhalb des Produkttitels sind die Bewertungen sichtbar - ein Vertrauensanker für potenzielle Käufer. Jedes Produkt wird zudem knackig und informativ beschrieben, anhand der wichtigsten Kriterien, die den Mehrwert hervorheben. So sorgen wir dafür, dass der Nutzer im Handumdrehen erfasst, was dieses Produkt für ihn leisten kann.
vorher
nachher
Upselling
Status vorher
Die Produktkonfigurationen sind für den Nutzer die Pforte, um zusätzliche Services für sich entdecken zu können. Leider ist diese Tür im derzeitigen Zustand nicht sonderlich einladend. Die technische Gestaltung und die nutzerunfreundlichen Dropdown-Menüs erschweren die Bedienung. Insbesondere die Tatsache, dass Änderungen nicht sichtbar sind, wenn das Konfigurationsmenü mal geschlossen wurde, wirkt störend. Die Upselling-Funktion ist in Ihrem intransparenten und wenig alltagsnahen Gewand kaum nutzbar.
Status neu
Das frische Design richtet die Scheinwerfer auf die Konfigurationen. Änderungen werden nun konsequent, auch nach Schließen des Menüs, angezeigt. Zudem begleiten hilfreiche Tooltips den Nutzer durch die Feinheiten der Einstellungen. Doch nicht nur das - wir haben unser Auge auf den Menschen, nicht auf die Technik gerichtet. So kommt es, dass der Nutzer nun nicht mehr trockene technische Daten zugespielt bekommt, sondern emotional ansprechende Informationen. Anstatt etwa die technischen Spezifikationen einer größeren Batterie zu präsentieren, erzählen wir dem Nutzer etwas über die erhöhte Reichweite - praxistauglich und leicht verständlich.
vorher
nachher
Ergebnisse Produktarchiv
Die Wichtigkeit
Finde das richtige Produkt in einem Meer von Möglichkeiten - ohne das passende Werkzeug kann diese Suche zur Mammutaufgabe werden. Produktlisten und Filter- und Sortierfunktionen im E-Commerce sind der Schlüssel dafür, wie problemlos oder beschwerlich es für den Nutzer ist, den Produktkatalog einer Website zu durchforsten. Sie sind oft der entscheidende Faktor dafür, ob der Benutzer ein passendes Produkt findet oder das virtuelle Geschäft frustriert verlässt.
Status vorher
Das Produktarchiv ist eine Art Sparringszone, in der wir bisher aus besserer Nutzerfokussierung lernen können. Die Produktliste präsentiert sich eher sparlich, es fehlen wesentliche Informationen. Die Produkte liegen quasi nackt da, ein Vergleich ist schwer durchführbar, die Auswahl läuft ins Leere. Der Nutzer wird auf sich allein gestellt - ihm wird abverlangt, die Vor- und Nachteile der einzelnen Produkte zu kennen. Einstellungen lassen sich nur durch sperrige Slider tätigen und überflüssige Einleitungstexte geben der Seite einen Blogartikel-Look. Mit klaren Gestaltungsrichtlinien sieht es leider auch mager aus - Buttons und Überschriften verschmelzen in ihrer gleichen Formatierung.
Status nachher
Mit dem neuen Design begrüßen wir eine klare visuelle Hierarchie. Der Nutzer wird von einer nutzerfreundlichen Filterleiste in Empfang genommen und kann sich elegant durch seine Ergebnisse manövrieren. Aktive Filter werden deutlich hervorgehoben und die wesentlichen Sortierfunktionen sind nur einen Klick entfernt - oh, und das Ganze ohne nerviges Neuladen der Seite. Die Produkte präsentieren sich einheitlich und reich an Informationen, die einen Vergleich anstoßen und dabei helfen, eine Kaufentscheidung zu treffen.
vorher
nachher
Ausblick
Entwicklung
Das frischgebackene Design ist seit Ende März live und für jeden zugänglich. Momentan liegt unser Schwerpunkt auf umfangreichen technischen Verbesserungen, wir lassen die Daten sprechen und schrauben an den richtigen Stellen. Demnächst folgen noch weitere Schritte zur Designoptimierung, um alles perfekt auszurichten. Unser Endziel? Der Entwicklungsstand wird hervorragend mit dem UX Prototypen übereinstimmen und einen nahtlosen, ansprechenden und nutzerfreundlichen Online-Shop präsentieren.
vorher
nachher
vorher
nachher
Nutzerverhalten
Unsere Reise endet nicht hier. Denn die Zukunft verlangt nach kontinuierlichen Analysen und Optimierungen, um im ständigen Fluss des Nutzerverhaltens zu navigieren. Mit den unschätzbaren Erkenntnissen aus A/B-Tests werden wir feststellen, welche Filteroptionen und Texte den größten Mehrwert für unsere Nutzer schaffen. Überlegen wir dabei auch, eine Funktion einzuführen, die es ermöglicht, mehrere Produkte auszuwählen und zu vergleichen. Meine Zusammenarbeit mit Scooters ‘N Chairs ist auf Langfristigkeit ausgerichtet und ich kann es kaum erwarten, an den anstehenden KPI-Messungen zu arbeiten. Gemeinsam werden wir kontinuierlich daran arbeiten, um besser zu werden und unseren Nutzern das bestmögliche Erlebnis zu bieten.
Weitere UIs
vorher
nachher
vorher
nachher
Erste Design Skizze der neuen Produktseite