SoundCloud Redesign.

Usability-Optimierung einer hybriden Musikplattform.

SoundCloud vereint Musikstreaming und soziale Interaktion in einer einzigen App und weist so eine hohe Funktionsdichte mit hohen Anforderungen an Navigation, Konsistenz und Interaktionseffizienz auf. Trotz dieser Komplexität wurde die mobile Usability der App bislang nur wenig systematisch untersucht. Um das Optimierungspotential der App zu untersuchen, habe ich eine vollständige heuristische Evaluation durchgeführt, ein umfassendes Redesign entwickelt und dessen Usability abschließend mittels System Usability Scale (SUS) mit der Original-App verglichen.

Projektübersicht

Mein Ansatz orientierte sich konsequent an den Prinzipien des Human-Centered Design und gliederte sich in drei aufeinander aufbauende Phasen. Ziel war es, die Usability der SoundCloud-App systematisch zu analysieren, daraus fundierte Designentscheidungen abzuleiten und den Einfluss auf das Nutzungserlebnis empirisch zu überprüfen.

01 Forschung

Der Ausgangspunkt war die heuristische Evaluation der bestehenden SoundCloud-App, bei der ich Informationsarchitektur, Navigation und Interaktionsdesign untersuchte. Die identifizierten Usability-Probleme bildeten die Grundlage für sämtliche Designentscheidungen in der nächsten Phase.

02 Redesign

Basierend auf den Befunden der heuristischen Evaluation und den daraus abgeleiteten Designanforderungen entwickelte ich die Benutzeroberfläche neu. Der Prozess umfasste die Restrukturierung der App und die Gestaltung eines interaktiven High-Fidelity-Prototyps.

03 Evaluation

Um die Auswirkungen des Redesigns auf die wahrgenommene Usability zu untersuchen, bewerteten die Studienteilnehmenden beide App-Versionen anhand videobasierter Walkthroughs, die die zentralen Nutzungspfade abbildeten, mithilfe der SUS.

UX-Forschung

Die Heuristische Analyse

Bevor ich mit dem Redesign beginnen konnte, musste ich zunächst verstehen, warum sich die bestehende Nutzererfahrung an vielen Stellen inkonsistent und unnötig komplex anfühlt. Dafür setzte ich die heuristische Evaluation mit den klassischen 10 Heuristiken nach Nielsen & Molich ein, die ich durch mobilspezifische Erweiterungen nach dem SMASH-Framework von Inostroza ergänzte. Vor der heuristischen Evaluation erfasste und modellierte ich aber zunächst die SoundCloud-App in einer strukturellen Übersicht, um ein umfassendes Verständnis der App zu bekommen. Dadurch konnte ich 24 eigenständige Analyseobjekte (Entitäten) für die heuristische Evaluation definieren, die systematisch nacheinander untersucht wurden. Insgesamt kamen dabei 131 Befunde zu Usability-Schwachstellen zum Vorschein.

Problemfelder als zentrale Erkenntnisse

Viele der 131 Usability-Probleme zeigten thematische Zusammenhänge und traten wiederkehrend über mehrere Screens hinweg auf. Mithilfe eines Affinity Mappings konnte ich die Ergebnisse zu sechs übergeordneten Problemfeldern zusammenfassen (PF1–PF6). Allein die drei größten Kategorien machten rund 70 % aller Probleme aus, was auf strukturelle Gestaltungsprobleme hinwies.

Damit war klar, dass das Redesign nicht nur die Befunde auf Detailebene isoliert überarbeiten darf, sondern die strukturellen Probleme als Ganzes und kohärent lösen muss.

Interne & externe Inkonsistenzen (PF 1)

Vergleichbare Elemente (Header, Icons, Sekundärnavigation) folgen keinem einheitlichen Schema und weichen von etablierten Konventionen ab. Eine Doppeltipp-Geste löst beispielsweise Wiedergabe statt Like aus.

Überladung & visuelle Hierarchiefehler (PF 2)

Das schnelle Erfassen einer Ansicht kostet mehr Aufwand, als es sollte, aufgrund geringer Abstände, schwacher Gruppierung und Hervorhebung. Ansichten werden häufig mit irrelevanten Elementen überladen oder diese priorisiert.

unklare Begriffe, Symbole & Bezüge (PF 3)

Elemente vermitteln Funktion und Bezug nicht immer eindeutig, sodass sie erschlossen werden müssen. Beispiele sind missverständliche Bezeichnungen und Labels wie "zur Vorschau tippen", das unerwartet die Wiedergabe startet, oder falsch platzierte Kategorien.

geringe Auffindbarkeit & Bedieneffizienz (PF 4)

Zentrale Funktionen sind oft nicht an erwarteten Stellen zu finden oder nur umständlich über Umwege erreichbar, beispielsweise die ins Overflow-Menü ausgelagerte Repost-Aktion, oder das Löschen von Tracks aus der Warteschlange, welches unnötig viele Schritte erfordert.

unklarer Systemstatus & Nutzungskontext (PF 5)

Der aktive Zustand der App oder einer Ansicht wird nicht immer klar und korrekt kommuniziert. Der aktuell laufende Track ist z.B. in mehreren wichtigen Kontexten nicht sichtbar, die Anzahl neuer Nachrichten wird nirgends kommuniziert und leere Tabs zeigen teils inkorrekte Fehlermeldungen.

erschwerte mobile Bedienbarkeit (PF 6)

Touchziele, wie Icons und Buttons, sind häufig zu klein oder zu dicht platziert, besonders im Musikplayer und in der Sekundärnavigation. Manche Interaktionselemente sind bei Einhandbedienung nicht komfortabel zu erreichen und Gesten lösen unbeabsichtigte Aktionen aus.

Gestaltungsanforderungen

Damit alle Redesign-Entscheidungen nachvollziehbar auf der Evaluation basieren, habe ich die Designanforderungen auf zwei sich ergänzenden Ebenen formuliert:

Detailebene: Lokale Anforderungen, die direkt aus einem spezifischen Befund abgeleitet und punktuell im Redesign umgesetzt wurden.
Ebene der Problemfelder: Eine übergreifende Gestaltungsrichtlinie pro Problemfeld (GA1–GA6). Zusammen bildeten sie das Fundament für jede Designentscheidung im gesamten Prozess.

Das Redesign

Systematische Problemlösung

Die Überarbeitung des App-Designs basiert direkt auf den Gestaltungsanforderungen und daraus formulierten konkreten Handlungsempfehlungen. Jedes Detail des finalen Prototyps ist damit datenbasiert und auf einen Befund zurückzuführen. Die Optimierung konzentriert sich dabei auf die Usability, während das vertraute Look-and-Feel der Marke gewahrt bleibt, um die visuelle Identität der App beizubehalten.

Vorhersehbar: Einheitliche & etablierte Muster

Alle vergleichbaren Ansichten wurden so überarbeitet, dass sie nun dasselbe Layout und dieselbe Struktur teilen. Beispielsweise nutzen alle Hauptansichten eine identische Headerstruktur, sodass Mitteilungen und Profil durchgängig in der Top-Navigation platziert sind. Auch Buttons und Icons folgen einem konsistenten visuellen Schema. Zudem orientiert sich das Design an gängigen App-Konventionen, sodass Nutzer:innen die von anderen Apps gelernten Interaktionsmuster wiedererkennen. Ein Beispiel dafür ist die Verknüpfung der klassischen Feed-Ansicht mit einem Vollbild-Modus via "Vergrößern"-Funktion, angelehnt an das gelernte Muster von Instagram.

Übersichtlich: Wesentliches ist sofort erkennbar

Um das schnelle Erfassen von Inhalten zu erleichtern, setzt das Redesign auf einheitlichen und ausreichenden Whitespace, klare Gruppierungen und visuelle Priorisierung von zentralen Inhalten. Sekundäre Inhalte wurden nachrangig gestaltet und unwichtige oder störende Elemente entfernt, um kognitive Last zu reduzieren. In der Such-Ansicht vereinfachen zum Beispiel optimierte Kontraste und einheitliche Größen die visuelle Abgrenzung der Genre-Cards. Auch der Musikplayer und der Feed wurden auf das Wesentliche reduziert, indem das Cover das visuelle Zentrum bildet und Trackinformationen, Wiedergabesteuerung und Aktionsleiste eine klare, geordnete Rahmenstruktur bilden.

Intuitiv: Alle Elemente sind klar verständlich

Durch die Optimierung von Texten, Symbolen und Platzierungen wurden Mehrdeutigkeiten im gesamten Interface behoben. UI-Elemente kommunizieren nun jederzeit unmissverständlich ihre Funktion und ihren Bezug. Ein Beispiel ist die optimierte Informationsarchitektur der Bibliothek. Zuvor enthielt diese die Ordner „Folge ich“ und „Einblicke“, die keine gängigen Inhalte einer Bibliothek abbildeten und dort fehlplatziert waren. Zudem wurden irreführende oder wenig aussagekräftige Überschriften, Fehlermeldungen und Empty-State-Texte semantisch präzisiert. Zweck und Funktion aller Bereiche sind dadurch sofort intuitiv begreifbar.

Effizient: Zentrales ist unkompliziert erreichbar

Unnötige Zwischenschritte wurden eliminiert, Umwege reduziert und wichtige Funktionen an gut erreichbaren, erwartbaren Stellen platziert. So wurde die Interaktionszeit im gesamten Interface minimiert. Beispiele sind die nun gut sichtbar platzierte Repost-Funktion im Musikplayer, der neu eingeführte Plus-Button in der Primärnavigation, der durchgängig erreichbar ist und zum effizienten Erstellen und Hinzufügen von Inhalten dient sowie das Bearbeiten der Warteschlange. Dort können Tracks nun mit minimalem Tippaufwand in nur einem Schritt entfernt werden.

Transparent: Status & Kontext sind immer sichtbar

Um den Nutzungskontext zu jedem Zeitpunkt transparent und korrekt zu vermitteln, wurde das visuelle Feedback der App grundlegend optimiert. Bestes Beispiel ist die neu entwickelte Wiedergabe-Card, die als Komponente konsistent wiederverwendet wird. Sie zeigt Infos und Wiedergabesteuerung des laufenden Track kompakt und kontextadaptiv in Overlays an, in denen der Wiedergabekontext vorher verloren ging, beispielsweise der Kommentarbereich oder die Warteschlange. Der aktuelle App-Zustand ist dadurch allgegenwärtig und intuitiv erfassbar.

Ergonomisch: Sicher einhändig bedienbar

Zu kleine oder zu dicht platzierte Elemente beeinträchtigten zuvor die mobile Usability. Im Redesign wird diese Schwachstellen durch eine ergonomische Neuanordnung aller Touchziele überarbeitet. Buttons und Icons bieten nun größere Trefferflächen und optimierte Abstände. Um die Einhandbedienung zu erleichtern, wurden zusätzlich wichtige Controls für die Wiedergabe an den komfortabel erreichbaren unteren Bildschirmrand verlagert. Zudem ersetzt ein vertikales Layout in der Upgrade-Ansicht nun das alte horizontale Scrollen, das zuvor beim Wischen regelmäßig unbeabsichtigt Kaufprozesse ausgelöst hatte.

Die SUS-Evaluation

Nutzerforschung: Original-App vs Redesign

Um zu prüfen, ob die Änderungen aus Nutzersicht auch als Optimierung wahrgenommen werden, bewerteten 13 Teilnehmende beide App-Versionen anhand videobasierter Walkthroughs mit der System Usability Scale (SUS). Im Within-Subject-Forschungsdesign beurteilte jede Person beide Systeme, wobei die Reihenfolge randomisiert und ausbalanciert war.

Gibt es eine messbare Verbesserung?

Die Original-App erreichte einen Mittelwert von M = 49,0 (Median 47,5) und damit nach der Adjektivskala von Bangor et al. eine niedrige bis kritische Gebrauchstauglichkeit. Der Redesign-Prototyp lag mit M = 84,6 (Median 87,5) im Bereich einer guten bis exzellenten Bewertung. Aussagekräftiger als der Mittelwert allein ist, dass alle 13 Personen den Prototyp individuell höher bewerteten und die geringere Streuung sowie der getrennte Reihenfolgevergleich (+35,0 vs. +36,3 Punkte) gegen Ausreißer- und Reihenfolgeeffekte sprechen.

Die Auswertung erfolgte bewusst rein deskriptiv mit einer kleinen Convenience-Stichprobe. Sie liefert deshalb auch keinen generalisierbaren Wirkungsnachweis, sondern lediglich eine methodisch plausibilisierte Tendenz innerhalb des untersuchten Settings.

💭

Fazit

Reflektion:

Der Wert des Projekts zeigt sich zwar durch das finale positive SUS-Ergebnis, liegt aber besonders in der systematischen Methodik und Ableitungskette der Designänderungen. Jede Designentscheidung ist auf einen dokumentierten Befund zurückführbar - von der heuristischen Evaluation über die abgeleiteten Gestaltungsanforderungen bis zum finalen Prototyp.

Dass die Befunde der heuristischen Analyse, die SUS-Itemwerte und qualitatives Feedback konsistent auf dieselben Optimierungspotentiale zeigten, macht das Ergebnis inhaltlich belastbar. Das Redesign erreicht eine messbar höhere wahrgenommene Usability und dient damit als fundierte Basis für die produktive Weiterentwicklung.

Was ich mitnehme:

Der größte Lerneffekt lag darin, Designentscheidungen konsequent argumentierbar zu machen, und dabei die eigenen Grenzen sauber zu benennen. Ich habe gelernt, den Zielkonflikt zwischen Nutzungs- und Plattforminteressen bewusst zu gestalten und Ergebnisse ehrlich einzuordnen, statt sie zu überinterpretieren.

Ausblick und nächste Schritte:

Als nächstes bietet sich eine heuristische Evaluation mit mehreren unabhängigen UX-Expert:innen an, um den Evaluator-Effekt zu minimieren und weitere Defizite aufzudecken. In fortgeschrittenen Phasen sollte der Prototyp weiter validiert werden – durch Usability-Tests am funktionalen MVP, A/B-Testing einzelner Features und SUS-Befragungen mit größeren, repräsentativeren Stichproben.