snc/snc-hero.webp

Scooters 'N Chairs

Diese Fallstudie beschreibt den Neuaufbau des E-Commerce Scooters ‘N Chairs mit dem Ziel, Konversionsraten nachhaltig zu optimieren. Scooters ‘N Chairs bietet Mobilitätslösungen an. Der Online-Shop besitzt eine große Auswahl an Elektrorollern, Elektrorollstühlen und Hubstühlen. Bewegungseingeschränkte Menschen können durch den Kundenservice beraten werden, um somit das optimale Produkt für eine höhere Lebensqualität zu erhalten.

Scooters ‘N Chairs startete im August 2018 und bekam seitdem zahlreiche Überarbeitungen. Trotz der neusten Updates verzeichnet der Shop eine sehr geringe Konversionsrate von 0,14%. Der Gründer kontaktiere mich, um KPIs zu erhöhen, Fehlerraten bei der Nutzung zu verringern und Umsatzmöglichkeiten zu maximieren. Die Neugestaltung des Online-Shops Scooter ‘N Chairs basiert auf einer umfassenden Analyse von über 750 datenbasierten Designprinzipien. Die Nutzererfahrung auf der Website ist ungenügend und vor allem durch Usability-Probleme im Zusammenhang mit nicht interaktionsfähigen Produkt-Listen und intransparenten Produkt-Seiten geprägt.

Ergebnisse

v1

online, weitere Versionen noch ausstehend

+1200%

Conversion Rate

+260%

Session Time

-210%

Bounce Rate

Metadaten

Industry
eCommerce
Size
10-20 Mitarbeiter
Value
30.000€+
Tasks
    User Research
    User Experience
    Design System
    User Interface
Tools
    Adobe XD
Date
2021 - 2022
Website Link
  1. 1
    Vorgehensweise
  2. 2
    Ergebnisse Produktseiten
  3. 3
    Ergebnisse Produktarchiv
  4. 4
    Ausblick
  5. 5
    Entwicklung
  6. 6
    Weitere UIs

Ziel

Wir erhöhen durch intelligentes Design die KPIs des Online-Shops, insbesondere die Konversionsrate (Conversion Rate), Sitzungsdauer (Session Time) sowie die Absprung- und Ausstiegsrate (Bounce & Exit Rate). Die größte Herausforderung dabei ist das Berücksichtigen des hohen Alters der Zielgruppe.

Vorgehensweise

Vorangehend an eine Neugestaltung sollen die aktuellen Probleme der Website ausgewertet werden. Dafür erstelle ich einen UX Benchmark und eine umfassende Datenanalyse.

UX Benchmark Teil 1

Die UX Analyse ist dreiteilig aufgebaut. Sie basiert im ersten Schritt auf dem grundlegenden Flow und dem strukturellen Aufbau der Website. Um die User Experience zu verbessern, ist es wichtig zu verstehen, wie der Nutzer mit der Seite interagiert, auf welche Schwierigkeiten er stößt und welche Interaktionen er bevorzugt. Leitfragen sind dabei: Wie navigiert der Nutzer durch die Webseite? Wie viele Klicks sind für den Kauf eines Produktes notwendig? Ist die Hierarchie der Webseite klar erkennbar?

UX Benchmark Teil 2

Der Hauptteil des Benchmarks basiert auf einem exklusiven über Jahre aufgebauten Katalog, basierend auf UX Studien, Datenlagen, Erfahrungen aus dem E-Commerce und Best Practise Ansätzen. Mit insgesamt über 750 Items kann ich über diesen Katalog klar nachvollziehbar wiedergeben, welche Bereiche, Elemente und Kategorien des Shops am stärksten von schwacher Usability betroffen sind.

UX Benchmark Teil 3

Der abschließende dritte Teil beurteilt die visuelle Identität des Shops in Bezug auf die Nutzbarkeit. Das beinhaltet unter anderem ein intelligentes Nutzen von Farben, konsistent barrierefreie Darstellungen, eine etablierte typografische Hierarchie und stringente Abstandsregeln.

Datenanalyse

Im Anschluss an das Benchmarking folgte eine umfassende Analyse aller Daten, die potenzielle etwas über das Nutzerverhalten aussagen können. Dazu zählt eine Analyse von technischen und sozialen Daten in Google Analytics sowie eine Vielzahl an Aufzeichnungen von Hotjar.

Exkurs: Hotjar

Hotjar ermöglicht es, Live-Wiedergaben von Benutzern auf der Webseite aufzuzeichnen. UX Analysten sehen vollständige Nutzererfahrungen, einschließlich der Mausbewegungen, Klicks und Navigationen. Dadurch lassen sich Probleme in der Nutzbarkeit der Webseite auf einem höheren Level ausfindig machen.

Ergebnisse Produktseiten

Above Fold Content auf Produktseiten

Status vorher

Die direkt beim Aufrufen der Seite sichtbaren Inhalten auf einer Produktseite sind derzeit sehr technisch und auf den reinen Verkauf ausgerichtet. Ein Bild des Produktes und der Preis sind sichtbar, sowie Informationen zur Bezahlung. Jedoch fehlt es gänzlich an einer Produktbeschreibung oder an Informationen, die Vertrauen schaffen.

Status neu

Das neue Design stellt das Produktbild und die alternativen Bilder in einen besseren Fokus. Direkt unterhalb des Produkttitels sind die Bewertungen einsehbar. Das Produkt wird stichpunktartig nach den wichtigsten Kriterien für eine Auswahl beschrieben, sodass der Mehrwert für den Nutzer sofort erkenntlich gemacht wird.

afterbefore

ALT

NEU

Die neue Produktseite erlaubt eine höhere Informationsdichte

Upselling

Status vorher

Damit der Nutzer die Möglichkeit hat, von zusätzlichen Services zu profitieren, ist eine einfach einstellbare Produktkonfiguration essenziell. Derzeit ist die Produktkonfiguration sehr technisch umgesetzt und nur per Dropdown einsehbar. Schließt der Nutzer nach Änderungen an der Konfiguration das Menü wieder, sind ausgewählte Änderungen nicht sichtbar. Die Upselling Funktionalität ist intransparent und alltagsfremd.

Status neu

Änderungen der Konfigurationen werden auch bei Schließen des Menüs angezeigt. Die Konfigurationsmöglichkeiten sind mit Tooltips versehen, die die Einstellungen im Detail erklären. Dabei wird nicht der technische Aspekt in den Vordergrund gesetzt, sondern der emotionale. Anstatt die Leistungsfähigkeit der größeren Batterie auf technischer Ebene zu beschreiben, erfährt der Nutzer den Unterschied der Reichweite und hat somit einen direkten Alltagsbezug.

afterbefore

ALT

NEU

Die neue Konfiguration ist deutlich transparenter und visuell einfacher gestaltet

Ergebnisse Produktarchiv

Die Wichtigkeit

Ohne die richtigen Werkzeuge kann die Suche nach dem richtigen Produkt zu einer fast unlösbaren Aufgabe für den Nutzer werden. E-Commerce-Produktlisten und ihre Filter- und Sortierwerkzeuge bestimmen, wie einfach oder schwierig es für den Benutzer ist, den Produktkatalog der Website zu durchsuchen. Sie entscheiden in vielen Situationen, ob der Nutzer ein für sich passendes Produkt findet und es zum Kauf kommt.

Status vorher

Das Produktarchiv ist ein Beispiel für fehlenden Nutzerfokus. Die in der Liste angezeigten Produkte haben so gut wie keine Informationen. Kunden können Produkte nicht miteinander vergleichen und keine Auswahl treffen. Es wird vorausgesetzt, dass der Kunde die Vor- und Nachteile der einzelnen Produkte kennt. Zudem sind die Einstellungsmöglichkeiten meist über sehr benutzerunfreundliche Slider geregelt. Des Weiteren sind Archivseiten häufig mit einem Einleitungstext versehen, der die Seite wie einen Blogartikel wirken lässt. Auch gibt es keine klaren Gestaltungsrichtlinien. Buttons und Headlines sind gleich formatiert.

Status nachher

Es existiert eine klare visuelle Hierarchie. Der Kunde sieht eine einfach zu bedienende Filterleiste, durch die er seine Ergebnisse filtern kann. Aktive Filter werden oberhalb der Ergebnisse betont, die wichtigsten Sortierfunktionen sind per Klick und ohne Neuladen der Seite erreichbar. Die Produkte sind einheitlich gestaltet und stellen bedeutend mehr Informationen dar, die Produkte miteinander vergleichen lassen und eine Kaufentscheidung hervorrufen können.

afterbefore

ALT

NEU

Das neue Produktarchiv erlaubt ein schnelles Scannen, Filtern und Vergleichen

Ausblick

snc snc conversion
snc snc conversion

Entwicklung

Das neue Design ist seit Ende März online. Der Fokus liegt derzeit auf zahlreichen technischen Verbesserungen. Anschließend werden weitere Designoptimierungen vorgenommen und der Entwicklungsstand mit dem UX Prototypen abgeglichen.

afterbefore

ALT

NEU

Die neue Homepage spiegelt die Qualität des Redesigns wider
afterbefore

ALT

NEU

Der neue Footer catcht Nutzer im letzten Moment, denn er ist textlich optimiert, logisch strukturiert und informationsreicher

Nutzerverhalten

In Zukunft müssen weitere Analysen des Nutzerverhaltens die fortwährende Optimierung sichern. A/B-Tests werden Aufschluss darüber geben, welche Filteroptionen und Texte den größten Mehrwert für Nutzer liefern. Auch die Integrierung einer Funktion zum Auswählen und Vergleichen mehrerer Produkte ist eine mögliche Information. Ich werde Scooters ‘N Chairs langfristig begleiten und freue mich auf die anstehenden KPI Messungen.

Weitere UIs

Produktvergleich

Produktvergleich

Produktvergleich
Populäre Produkte

Populäre Produkte

Populäre Produkte
Produktarchiv mit Grid View

Produktarchiv mit Grid View

Produktarchiv mit Grid View
afterbefore

ALT

NEU

Bewertungen sind transparent und filterbar
afterbefore

ALT

NEU

Banner werden in der Darstellung optimiert
Erste Design Skizze der neuen Produktseite

Erste Design Skizze der neuen Produktseite

Erste Design Skizze der neuen Produktseite
Justin Schmitz
Wie eine Zeitung, die dir jeden Monat an die Haustür geliefert wird - Erfahre das Neueste über Digital Health User Experience.
Wenn du dich für den Newsletter anmeldest, stimmst du zu, elektronische Nachrichten von mir zu erhalten.