RE: UX/UI · Redesign der Audible App

Dokumentation des Kurses »Redesign UX/UI« von Frank Rausch und Timm Kekeritz und der darin entstandenen Gruppenarbeit, ein Redesign der Audible App, von Thomas Petrach, Adina Radke und Rahel Flechtner.

Kursziel und Vorgehen

Das ursprüngliche Ziel des Kurses war das Redesign einer App nach den Methoden und dem Mindset des Google Design Sprints. Zu Beginn des Kurses fand eine Auseinandersetzung mit den Prinzipen des Sprints in Form von Videoreferaten statt. Auf Grund der Kursgröße konnten jedoch nicht alle Methoden und Prinzipen eingehalten werden, unser Prozess weicht daher an einigen Stellen von den Vorgehensweisen des Google Design Sprints ab.

Challenge

Wir entschieden uns innerhalb der Gruppe für ein Redesign der Audible App, da uns bei dieser einiges an Verbesserungspotential hinsichtlich der User Experience aufgefallen war. Besonders das Entdecken neuer Hörbücher und der Übergang von einem abgeschlossenen zu einem neuen Hörbuch durch Empfehlungen kommt unserer Meinung nach in der App zu kurz. Auf diese Funktionen richteten wir daher den Fokus unseres Redesigns.

Start at the end

Um das langfristige Ziel des Redesigns besser vor Augen zu haben, wird in dieser Phase in die Zukunft geschaut. Fragen wie »Wo wollen wir hin« oder »Wie sehen wir unser Produkt in X Jahren« können auf verschiedene Arten thematisiert werden. Wir haben im Kurs imaginäre Zeitungsartikel zum Produkt-Launch verfasst, die die Vorzüge des Redesigns wiedergeben sollen, ohne einer Marketing-Kampagne gleich zu kommen.

Pages from Audible-Adina-Rahel-Thomas-Challenge.png

Pages from Audible-Adina-Rahel-Thomas-Challenge-2.png

Der folgende Satz fasst den Fokus des Redesigns sowie die angesprochene Zielgruppe und den konkreten Verbesserungsansatz kompakt zusammen und dient als Wegweiser für den weiteren Prozess.

Audible ist eine Hörbuch- und Hörspiel-App mit der Hörbuch-Interessierte Hörbücher entdecken und finden können, indem personalisierte Empfehlungen gegeben und mehrere Explorationswege ermöglicht werden.

Map and diagram the problem

Diese Darstellung der User Journey zeigt den gesamten Prozess auf, den ein potentieller Nutzer vom Öffnen der App bis zu seinem Ziel, dem Anhören eines neuen Hörbuchs durchläuft. Anhand der Unterteilung in kleine Einzelschritte lassen sich hierbei mögliche Probleme im Prozess identifizieren und zuordnen.

Die Audible App für iOS birgt allgemein ein großes Problem: Es ist in der App nicht möglich, Hörbücher zu kaufen. Dies ist auf die Bestimmungen für in App-Käufe unter iOS zurück zu führen und lässt sich auch in einem Redesign der App nicht ändern. Der Nutzer ist daher gezwungen, für den Kaufvorgang in einen Internet-Browser (auf Mobile oder Desktop) zu wechseln.

Daher ist die Prozess-Darstellung unterteilt in zwei Farben. Die hellblauen Zettel stehen für Schritte, die in der App vorgenommen werden können, während die grünen Zettel für Schritte im Browser stehen.

Die orangen Zettel stellen die Probleme dar, die an den jeweiligen Stellen auftauchen können. Sie sind als sogenannte »How-might-we-Questions« verfasst. Probleme werden dabei als kontruktive Fragen formuliert, die zu neuen Lösungen anregen können. Anstatt Formulierungen zu wählen wie »Die Übersicht der eigenen Bibliothek ist schlecht« formuliert man Fragen wie z.B. »Wie können wir die Übersichtlichkeit der eigenen Bibliothek verbessern?«. Die einzelnen Fragen werden im nächsten Schritt näher erläutert.

»Ask the experts« Interview and »How might we« questions

Um die User Journey und die von uns identifizierten Probleme zu überprüfen und zu ergänzen, führten wir Interviews mit möglichen Nutzern durch. Ihnen wurde dabei die Prozess-Darstellung erläutert und sie wurden gebeten, ihre Meinung und ihr Wissen zu dem Thema beizutragen. Auf Basis der gewonnenen Erkenntnisse wurde der Prozess anschließend ergänzt und angepasst. Zudem entstanden weitere »How-might-we-Questions« basierend auf möglichen Problemstellungen im Prozess.

Die gesammelten Fragen wurden anschließend geclustert und in Themengebieten zusammengefasst. In unserem Fall ergaben sich dadurch die Bereiche »Sucherlebnis«, »visuelles Erscheinungsbild«, »Kaufvorgang«, »Übersicht« und »Personalisierung«. Innerhalb dieser Kategorien wurde nun im Team über die wichtigsten Fragen abgestimmt, da innerhalb des Projektumfangs nicht alle Probleme bearbeitet werden konnten. In Hinblick auf den zuvor gesetzten Fokus (Entdecken und Empfehlungen) einigten wir uns auf die folgenden Fragen:

Sucherlebnis: Wie kann das Erlebnis des Stöberns und Hörbuch-Suchens spannender gestaltet werden? Personalisierung: Wie können wir Empfehlungen besser auf den Nutzer zuschneiden? Übersicht: Wie können wir eine bessere Übersicht in der Hörbuchliste ermöglichen?

Ansätze zur Lösung dieser Fragen wurden im nächsten Schritt an Hand von Wireframes skizziert.

Wireframes & Flows für Kernfunktionen

Die Wireframes oben stellen einen möglichen Prozess des Entdeckens dar: Bücher werden mit großen Buch-Covern und den wichtigsten Text-Infomationen dargestellt. Unterschiedliche Präsentationsformen innerhalb der Liste lockern die Seite auf und ermöglichen mehr Inhalte (Screen 1). Durch einen Tab auf ein Cover werden nähere Informationen zum Buch angezeigt. Zustzlich wird durch die Kategorie »Das könnte Ihnen auch gefallen« auf ähnliche Bücher hingewiesen, was den Entdeckungsprozess anreichert (Screen 2). Nutzer haben auf diesem Screen die Möglichkeit, in das Hörbuch hinein zu hören. Es öffnet sich dann ein kleiner Player über der Navigation Bar (Screen 3). Somit kann weiter gestöbert werden, während in ein Buch hineingehört wird. Durch Maximieren des Players werden zusätzliche Funktionen wie vor- oder zurückspulen angezeigt (Screen 4).

Diese Wireframes zeigen eine verbesserte Übersicht über die Hörbücher in der eigenen Hörbuchliste. Kategorien wie »Zuletzt gehört« oder »Noch nicht abgeschlossen« helfen, Hörbücher schnell wieder zu finden.