App-Home und Webshop-Suche

Bessere Conversion im App-Home-Folgetest und Überarbeitung der gesamten Produktsuche in den Webshops von MediaMarkt und Saturn.

Meine Rolle
Senior UX Consultant · Freelance
Mein Beitrag
UX-Konzeption, Research & Prototyping
Zusammenarbeit
Media Markt Saturn · Produktteam in München
App-Home und Webshop-SucheOriginalarbeitsstände · 2018
01 / App HomeVarianten testen
Vier originale App-Home-Varianten: mit und ohne hervorgehobene Suche sowie mit entfernten oder nach unten verschobenen Kategorien
Vier Varianten aus der dokumentierten zweiten Home-Iteration.
02 / Webshop-SucheAuswahl eingrenzen
Originaler Desktop-Arbeitsentwurf mit Filterspalte, aktiven Filtern und Produkt-Ergebnisraster
Ein Arbeitsbeleg aus der Suchüberarbeitung: Desktop-Entwurf mit Filtern und Ergebnisliste. Enthält Platzhalter und Beispieldaten.

Eine schwächere Home gezielt weiterentwickeln

Situation

Die neue App-Home sollte den Zugang zum Sortiment verbessern. Im ersten A/B-Test stiegen die Produktdetailseiten-Aufrufe, während die Conversion gegenüber der ursprünglichen Home sank. Die neue Gestaltung erreichte damit noch nicht das gewünschte Ergebnis.

Tätigkeit und Verantwortung

Als Freelancer arbeitete ich im Produktteam von Media Markt Saturn. Der PO gab den Produktfokus vor. Ich entwickelte den Aufbau und die UX-Konzeption und stimmte die Lösung mit dem Team ab. Nach der Übergabe der App an eine feste Designerin verantwortete ich außerdem die UX-Konzeption der gesamten Webshop-Suche.

Ansatz

Wir analysierten gemeinsam die Zahlen und überlegten, welche Elemente Nutzer ablenken könnten. Ich arbeitete Varianten mit und ohne Kategorienmodul sowie mit stärker hervorgehobener Suche aus. An der Auswertung des Folgetests war ich ebenfalls beteiligt. Welche Variante wir übernehmen, entschieden wir gemeinsam im Team.

Resultat

Die gewählte Home-Variante erzielte im Folgetest eine höhere Conversion als die ursprüngliche Home. Anschließend überarbeitete ich die gesamte Webshop-Suche.

01 Verantwortung

UX-Konzeption
im App-Team.

Verantwortung für die gesamte App-Journey von MediaMarkt und Saturn.

Ich gehörte früh zum wachsenden Münchner Designteam und arbeitete direkt mit dem App-Entwicklungsteam zusammen. Die Designer hatten feste Produktzuständigkeiten: Ich betreute die App, andere Kollegen beispielsweise Suche oder Basket und Checkout.

Der Product Owner gab den Fokus vor. Meine Verantwortung lag in der UX-Konzeption: die Aufgabe aus Nutzer- und Geschäftsperspektive verstehen, eine tragfähige Lösung entwickeln und sie durch Prototypen und Nutzerfeedback konkretisieren.

Interviews und regelmäßige Usability-Tests waren Teil unserer Produktarbeit. Dabei brachte ich meine Erfahrung aus FriendScout und gutefrage ein.

So arbeiteten wir zusammen

Product Owner

Fokus und Richtung

Mein Beitrag

UX-Konzeption, Nutzerzentrierung und Produktlogik

Entwicklung & gemeinsame Tests

Technische Umsetzung und Prüfung der Lösung

02 App Home

Neue App-Home:
schlechtere Conversion im ersten Test.

Der erste A/B-Test zeigte mehr Produktaufrufe, aber eine niedrigere Conversion.

Die bestehende Home zeigte Angebote in einer Stapeldarstellung. Die neue Startseite sollte den Zugang zum Sortiment verbessern: eine sichtbarere Suche, Produktkarussells zum Entdecken und direkte Kategorieeinstiege. Der Product Owner gab den Produktfokus vor. Ich entwickelte den Aufbau und die UX-Konzeption und stimmte die Lösung mit dem Team ab.

Dann kamen die Ergebnisse des ersten A/B-Tests: mehr Aufrufe von Produktdetailseiten, gleichzeitig weniger Suchnutzung und eine schlechtere Conversion als bei der alten Home.

Wir schauten uns die Zahlen gemeinsam an und überlegten, welche Elemente Nutzer vom Weg zum passenden Produkt ablenken könnten. Das schlechtere Ergebnis war der Ausgangspunkt für die nächste Iteration.

Originalfolie mit dem alten und neuen App-Home-Konzept sowie den Zielen für Suche, Produktkarussells und Kategorien
Originalfolie aus „New Home – App“: Ziele und Gegenüberstellung des damaligen Home-Konzepts. Die dargestellten Angebote gehören zum historischen Arbeitsstand.
Was der Test zeigte

Mehr Produktdetailseiten-Aufrufe gingen nicht automatisch mit einer besseren Conversion einher. Wir mussten die Einstiege und die Gewichtung der Home-Elemente erneut prüfen.

03 Aus Daten lernen

Hypothesen zu Kategorien
und Sucheinstieg.

Aus den Testergebnissen entwickelten wir die nächste Home-Iteration.

Wir betrachteten die Ergebnisse im Team und entwickelten Hypothesen: Lenkte das Kategorienmodul vom passenden Produkt ab? Führten die zusätzlichen Einstiege zwar zu mehr Produktaufrufen, aber zu weniger relevanten? Welche Rolle spielte die Sichtbarkeit der freien Suche?

Ich entwickelte daraus konkrete Home-Varianten mit und ohne Kategorienmodul sowie mit stärker hervorgehobener Suche. Bei den Varianten mit Kategorien verschob ich das Modul unter die Produktempfehlungen. So übersetzte ich unsere gemeinsamen Hypothesen in Gestaltungsunterschiede, die wir im Folgetest vergleichen konnten.

Testdimension 01

Kategorien entfernen
oder verschieben.

Das Kategorienmodul weglassen oder unterhalb der Produktempfehlungen anordnen.

Testdimension 02

Die Suche
sichtbar hervorheben.

Den Sucheinstieg zusätzlich mit einem roten Rahmen betonen oder ohne diese Betonung zeigen.

Die Designentscheidung

Kategorien und Sucheinstieg
in unterschiedlichen Kombinationen testen.

Die Varianten übersetzten unsere Vermutungen in konkrete Unterschiede, die sich im nächsten Test vergleichen ließen.

04 Erneut testen

Vier Varianten getestet.
Variante 2 mit bester Conversion.

Im Folgetest lag die Conversion der Variante 2 über der alten Home.

Originales Testblatt der vier App-Home-Varianten mit Erläuterungen zu Kategorien, Empfehlungen und Suchfeld
Originales Testblatt aus der Präsentation zur zweiten Home-Iteration, 2018. Die vier Varianten verändern Kategorien und Sucheinstieg.
V1

Kategorien entfernen

V2

Kategorien entfernen & Suche hervorheben

V3

Kategorien unter Empfehlungen verschieben

V4

Kategorien verschieben & Suche hervorheben

Ergebnis der dokumentierten Auswertung

Hervorgehobene Suche.
Ohne Kategorienmodul.

Die Präsentation bezeichnet Variante 2 als Gewinner: Ihre Conversion lag im Folgetest über der alten Home. Die Suchnutzung lag weiterhin darunter. Ich war auch an der Auswertung dieses Tests beteiligt. Welche Variante wir übernehmen, entschieden wir gemeinsam im Team.

Die Auswertung beschreibt einen konkreten Test. Langfristige Wirkung und statistische Absicherung werden daraus nicht zusätzlich abgeleitet.

05 Webshop-Suche

Produktsuche für
MediaMarkt und Saturn.

Überarbeitung der gesamten Webshop-Suche, mit einem Schwerpunkt auf der Filterbedienung.

Nach der Übergabe der App übernahm ich die Überarbeitung der Suche für die Webshops von MediaMarkt und Saturn. Die bestehende Lösung war in die Jahre gekommen. Ich verantwortete die UX-Konzeption der gesamten Suche. Ein Schwerpunkt war, wie Nutzer die Produktfilter bedienen und ihre Auswahl eingrenzen konnten.

Ich untersuchte den Ist-Zustand und die Nutzungsdaten gemeinsam mit den zuständigen Kollegen. Aus diesen Erkenntnissen, Baymard-Studien und unserer Research-Erfahrung entwickelten wir Hypothesen, Prototypen und Tests.

Vollständiger Desktop-Entwurf der Webshop-Suche mit gruppierten Filtern, Suchfeld innerhalb einer Filtergruppe, aktiven Filtern und Regler für Wertebereiche
Originaler Desktop-Entwurf aus „Search and Browse“. Komponentenbezeichnungen und gemischte Produktdaten sind Platzhalter. Die Ansicht dokumentiert die Gestaltung, keinen heutigen Live-Stand.

Beispiel aus der Suchüberarbeitung: Filter

01 / Struktur

Filterwerte finden.

Gruppierte Filter, unterschiedliche Auswahlarten und ein Suchfeld innerhalb einer Filtergruppe.

02 / Übersicht

Die Auswahl im Blick.

Aktive Filter stehen oberhalb der Ergebnisliste. Sie lassen sich einzeln entfernen; ein separates Element löscht die gesamte Auswahl.

03 / Bedienung

Wertebereiche eingrenzen.

Ein Regler mit zwei Griffen ergänzt numerische Eingabefelder und eine Schaltfläche zum Übernehmen.

06 Weiterführung

App-Übergabe an
eine feste Designerin.

Beteiligung an der Auswahl, Einarbeitung und Übergabe an Lora Valcheva.

Ich war an der Auswahl der festen Designerin für das App-Team beteiligt. Anschließend arbeitete ich Lora Valcheva ein und übergab ihr die App-Verantwortung, bevor ich mich der Webshop-Suche widmete.

Im wachsenden Designteam lernte ich außerdem von David King, insbesondere über Teamstruktur, Design Operations und Design Leadership. Diese Zusammenarbeit prägte meine weitere Entwicklung.

“Great designer, very good team player with deep user understanding and strong visual skills”
Lora Valcheva
Senior UX Designer · MediaMarkt Saturn

Das Ergebnis meiner Arbeit

Höhere Conversion im App-Home-Folgetest.

Die gemeinsam ausgewählte App-Home erzielte im Folgetest eine höhere Conversion als die ursprüngliche Home. Für die gesamte Webshop-Suche entstanden überarbeitete Abläufe und Prototypen; die App-Verantwortung übergab ich an eine eingearbeitete feste Designerin.

01

Home-Variante mit höherer Conversion

Ich übersetzte die gemeinsame Analyse des zunächst schlechteren Ergebnisses in testbare UX-Varianten und wirkte an der Auswertung mit. Gemeinsam wählten wir die Variante, deren Conversion im Folgetest über der ursprünglichen Home lag.

02

Webshop-Suche überarbeitet

UX-Konzeption, Research und Prototypen für die gesamte Suche in beiden Webshops. Die Filterbedienung war ein Schwerpunkt.

03

App-Verantwortung übergeben

Beteiligung an der Designerinnen-Auswahl, Einarbeitung und Übergabe der App-Verantwortung.

Die Home-Ergebnisse sind gemeinsame Testergebnisse. Für die Webshop-Suche liegt noch kein belegter Kennzahlenvergleich vor; ihr Ergebnis wird hier über die konkrete Gestaltungsarbeit beschrieben.

Was ich daraus mitnehme

Die Testergebnisse änderten
unsere Prioritäten für die Home.

Die erste Version meiner Konzeption erzielte eine schlechtere Conversion. Gemeinsam mit dem Team hinterfragte ich deshalb die Wirkung der einzelnen Elemente und arbeitete gezielte Varianten aus. Diese Erfahrung zeigt, wie ich meine eigene Lösung anhand der tatsächlichen Nutzung überprüfe und Erkenntnisse in konkrete Verbesserungen übersetze.