Ein geöffneter Macbook mit der Web-App 'RECAP_MY_MUSIC' auf dem Bildschirm.

RECAP_MY_MUSIC

  • Data Viz
  • Music
  • Spotify API

Welchen Musikgeschmack hast du? RECAP_MY_MUSIC ist ein Versuch, die musikalischen Vorlieben auf Basis von Daten des eigenen Spotifyprofils greifbarer zu machen. Das Tool sucht nach jeder Spotify Wrapped Playlist , die mit dem jeweiligen Konto verknüpft ist und analysiert für jedes Jahr deren Inhalt nach bestimmten Mustern (z.B. Musikgenres, Popularitätsindex, Beliebtheitsindex, Eigenschaften der Titel usw.). Danach erstellt es die Grafiken anhand dieser untersuchten und sortierten Daten und berechnet die farbliche Aura deines Hörverhaltens.

Meine Aufgabe war es, zwischen Gestaltung und Technik zu koordinieren und dabei zu helfen, das Design- und Interaktionskonzept in Code umzusetzen.

Das Projekt befindet sich noch im Entwicklungsstadium. Eine Demoversion kann jedoch bereits hier getestet werden.

Kontext

+Colabor Modul im Digital Ideation BA Studium

Meine Rolle

Frontend Developer, UI/UX Designer

Tools

Spotify API, NextJS, TailwindCSS und D3.js

Team

Lea Münger und Niklas Buchfink

Verschiedene frühe Skizzen auf Papier. Es sind verschiedene Kombinationen, meist bestehend aus einer Zeitachse und ein oder mehreren Kreiselementen, zu sehen, die zum Teil an einer Schallplatte erinnern.
Diverse frühe Ideen zur Darstellung der Daten

Das Hauptziel war, dass man sich mit Hilfe von RECAP_MY_MUSIC einen Überblick über den eigenen Musikgeschmack verschaffen kann und wie sich dieser über die Jahre verändert hat.

Die Infoansicht der Web-App zeigt verschiedene Statistiken wie die durchschnittliche Geschwindigkeit, Energie, Positivität und Tanzbarkeit der meistgehörten Songs. Ausserdem wird erklärt, wie die farbliche Aura zu interpretieren ist.
Ein Auschnitt der von Spotify abgefragten Daten von einer persönlichen Spotify Wrapped Playlist.
Hauptansicht der Web-App während der Entwicklung. Es sind nach wie vor die im Kreis angeordneten Balken zu sehen, aber diesmal sind an dessen Ende Informationen zu jedem Song, Künstler(in) und Rankingposition angezeigt.
Die abgefragten Daten müssen zuerst aufbereitet werden. Dies führte gelegentlich zu recht interessanten Zwischenergebnissen

Export

Die Webapp erlaubt es, die persönliche Aura als Bild oder PDF zu speichern, um sie z.B. untereinander zu teilen oder als Poster auszudrucken.

Der Musikgeschmack unseres Teams mit der Web-App auf drei Plakaten veranschaulicht.
Der Musikgeschmack unseres Teams