Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Mixtape – Interactive Music Session with your Friends

Mixtape – Interactive Music Session with your Friends

Wir beschäftigten uns mit einem Punkt, der gerade durch Corona stärker sichtbar wurde: Wie kann ich mit meinen Freunden, egal wo sie gerade sind, gemeinsam Musik erleben und mich unterhaltsam darüber austauschen?

Kursdokumentation von „Remocial™ Life – Werkzeuge für ein fernes Miteinander“ im SoSe 2020.

Preview

dawdaw.pngdawdaw.png

Case Study

Kontext

In dem Szenario eines Lockdowns ist direkter Austausch über Musik so gut wie gar nicht gegeben. Geliebte Veranstaltungen wie Open Airs, Festivals, Clubs, … sind abgesagt, nicht aber der Wille mit Freunden dieses Medium zu konsumieren. Soziale Netzwerke wie WhatsApp oder Instagram sind zwar ein Weg diese Lust ein wenig abzudecken aber nur im begrenzten Rahmen und mit wenig Möglichkeiten. Deshalb haben wir es für wichtig empfunden eine klare Alternative zu schaffen, die von Anfang an für diesen Austausch gemacht ist und ein breites Spektrum für Gruppen bietet.

Konzept und Ideenfindung

Die Idee kam aus der Gruppe heraus, weil wir gemerkt haben wie unterschiedlich wir alle unsere Musik konsumieren aber auch wie anders wir sie mit anderen zusammen hören. Aus diesem Grund wurde der Gedanke immer interessanter eine einheitliche Lösung zu finden mit welcher man unterschiedliche Menschen zusammenbringt. Die ersten Recherchen haben gezeigt das es im digitalen Raum für gemeinsames Musik hören kaum alternativen gibt, bzw. unsere Bedürfnisse mit dem existierenden Angebot nicht gedeckt sind.

Das Konzept der App entwickelte sich zum Ende zu einer Art Messenger, Music Playlist Hybrid mit Gamification Aspekt. Wir verbinden die schnelle und für alle leicht nachvollziehbare Kommunikation eines Chats mit der Möglichkeit gemeinsam Musik zu teilen und abzuspielen. Der Versuch gemeinsame Zeit zusammen zu verbringen, Musik zu hören und sich über eben diese Auszutauschen wurde somit auf eine einzige App abstrahiert. Um mehr Interaktion zu ermöglichen haben wir drei unterschiedliche, Musikbezogene Spiele zur Auswahl gestellt.

Jeder Chat, welcher nicht mehr genutzt wird, wird als eine, im Vorfeld, personalisierte Kassette abgespeichert. Dieser Bogen zur Darstellung eines analogen Mediums soll unserer neuen Idee eine gewisse Vertrautheit im Nutzer erwecken.

Analyse der sozialen Aktivität

Im Sommer rausgehen, an einen See oder in einen Park und gemeinsam Musik hören. Sich über die neuesten Lieder austauschen, oder einfach nur gemeinsam in Erinnerungen schwelgen und sich Alben anhören, die man früher viel gehört hat. Musik verbindet und schafft gemeinsame Erinnerungen, sie schafft es uns in den Sommer von vor vier Jahren zurückzuversetzen.

Doch was ist, wenn du dich nicht mit deinen Freunden treffen kannst, weil sie z.B. in einer anderen Stadt wohnen, oder sogar in einem anderen Land? Oder ganz aktuell, du dich aufgrund von Corona Schutzmaßnahmen nicht mehr mit deinen Freunden treffen darfst?

Klar, du kannst eine Spotify Playlist erstellen, in der du mit deinen Freunden gemeinsam eure Lieblingslieder sammelt, aber irgendwie ist das doch nicht das gleiche? Es fehlt einfach der Austausch über die Musik, die Musik die jeder gerade gleichzeitig hört. Es fehlen die Erinnerungen die ihr entweder gerade schafft, oder in denen ihr schwelgt.

Wir (Pascal, Marcus und Benjamin) haben uns dieses Problem zu Herzen genommen und versucht eine Lösung, in Form von einer App, zu entwickeln.

Ergebnisse Recherche

Wir begannen an dem Ort, wo für uns hauptsächlich Musik stattfindet. Für unsere ersten Entwürfe orientierten wir uns stark am Design von Spotify, weil wir Anfangs nur an eine „kleine“ Erweiterung der App dachten. Eine viel bessere und umfangreichere Funktion als es Spotify gerade mit „Gruppen-Session“ (Beta) probiert.

Bei anderen Entwürfen schauten wir uns das Swipe-Pattern von Apps wie Tinder oder neue Darstellungen zum Swipe in den neuen iOS-Versionen an.

Erste Entwürfe

AppStore.png
AppStore.pngAppStore.png

Sharify 1.1

Mit unserem ersten Konzept einer Musik App, wollten wir Leute erreichen, die gerade neu in eine Stadt gekommen sind und noch niemanden kennen. Ziel war es, eine Plattform zu schaffen, auf der jeder Nutzer öffentliche Sessions anlegen kann, denen dann jeder joinen kann. So ist es möglich über Musik, auch in Zeiten von Corona, neue Menschen kennenzulernen.

Der Kern dieses Konzeptes war eine Berlin Karte, auf der alle Sessions zusehen waren. Hat man sich dann für eine Session entschieden, konnte man einfach beitreten und gemeinsam mit anderen Menschen Musik erleben/hören. Innerhalb einer Session hatte man dann die Möglichkeit über die Chatfunktion mit den anderen zu kommunizieren. Es gab zudem die Funktion, das Bilder und Videos automatisch aus den Galerien der Nutzer hochgeladen werden, wenn sie zu dem aktuellen Song passen. War man zum Beispiel letztes Jahr mit seinen Freunden auf einem Konzert bei dem Imagine Dragons aufgetreten sind, und der aktuelle Song ist von Imagine Dragons, erkennt das die App und lädt Bilder vom Konzert in die Session.

Diese Ansätze waren an sich nicht schlecht, nur war die Zielgruppe nicht klar definiert, sodass wir zu viele verschiedene Funktionen eingebaut haben, damit für alle was dabei ist.

Adobe Scan 9. Aug. 2020.pdf PDF Adobe Scan 9. Aug. 2020.pdf

Version 1.1.jpgVersion 1.1.jpg

Durch die versch. Einflüsse wirkten unsere Entwürfe irgendwann recht zusammengewürfelt, einfach nicht richtig aus einem Guss mit einem klaren Designkonzept.

Wir schauten nach Apps im App Store die, in etwa einen ähnlichen Funktionsumfang haben und wie die das ganze so umsetzen. Gestoßen sind wir auf „Vertigo Music - Share Life“, eine kostenlose App, die es ermöglicht Channels mit Freunden zu eröffnen, in diesen Channels dann zu kommunizieren, Videos und Bilder zu senden, Video Calls zu machen und natürlich auch Songs zur Warteschlange hinzuzufügen und diese Songs auch zu bewerten, damit sie in der Reihenfolge von vorne oder hinten springen.

Mit 2,9 von 5 Sternen erreichte sie wahrscheinlich nicht ihr Publikum und das lag wohl auch daran, dass hier kein großer Wert auf die Kommunikation zwischen Menschen gelegt wurde, was ja bekanntlich in anderen Apps schon ohne Problem funktioniert. Wir wussten als nun was nicht so gut funktioniert. Im Sinne dieses Kurses und auch der Liebe zur Musik versuchten wir fortan den sozialen, kommunikativen Teil mit der Musik sinnvoll zu kombinieren.

Bildschirmfoto 2020-08-08 um 19.17.26.pngBildschirmfoto 2020-08-08 um 19.17.26.png

Mixtape 2.0

Wir gingen einen Schritt zurück und schauten uns alle Funktionen an, die es, stand jetzt, in der App geben soll und überprüften, ob sie wirklich einen sozialen, interaktiven Nutzen haben. Wir überlegten uns ein Konzept, um die App leicht verständlich zu machen - nämlich mit schon bekannten Patterns und UI-Elementen. Uns ist aufgefallen, dass der Großteil der Features kein komplett neues Interface brauch, die diversen sozialen Netzwerke oder Messenger-Dienste wie WhatsApp oder gerade die Nachrichten-App von iOS bieten schon eine gute Grundlage, auf der wir aufbauen können. Und so änderten wir die Ausrichtung, den Look und den Namen wenige Wochen vor der Abgabe und wir stoßen auf positive Resonanz. 

Die App ist jetzt eine stark erweiterte Musik-Chat-App, die sich im Chat stark an die Native-iOS-Nachrichten-App orientiert. Über diese kann man in iOS nicht nur Emojis schicken, sondern auch Third-Party-Apps können auf diese Schnittstelle zugreifen und individuelle Angebote darstellen.

widkets.pngwidkets.png

Die Idee für den App-Namen „Mixtape“ kam nach langen Überlegungen und Online-App-Namen-Generatoren, von unserer Kommilitonin Jass, der wir verbal von unsere App-Idee erzählten und sie erinnerte es gleich an die Mixtapes von früher, wo man selber seine Lieblingssongs aufgenommen hat und diese Kassette dann weitergegeben oder mit seinen Freunden gehört hat. Dadurch hatten wir auch eine konkrete visuelle Lösung und Eyecatcher für unsere App und gerade für die Vorschau der einzelnen Playlisten/Sessions - nun Mixtapes genannt.

Verworfene Ideen

Ein Versuch, der in der zweiten Version der App einen großen Platz eingenommen hat, war die Möglichkeit lokale Musik Sessions beizutreten und dabei die lokale Musikszene kennenzulernen. Dabei wurde der ausgewählte Ort als 2D Karte dargestellt und die Sessions darunter als Karten angezeigt. Jede Karte besaß die wichtige Information wie z.B. Name der Sessions, wie viele schon drin sind, das aktuelle Lied usw.

Wir haben uns im Endeffekt aber dagegen entschieden, weil der eigentliche Austausch zwischen den Nutzern nicht stärker gefordert wurde. Die Kommunikation wurde nicht erweitert, lediglich das Angebot der App und an der Stelle auch um sehr viele weitere Screens.

User Flow

Chris, hört gerne und oft Musik mit seinen Freuden und tauscht sich darüber auch aus. Wegen Corona geht das nicht mehr so einfach. In der Bahn öffnet er Mixtape und sieht schon die Mixtapes, die seine Freunde erstellt haben. Er und ein paar andere Freunde haben aber einen anderen Vibe also erstellt Chris eine neues Mixtape über den pulsierenden Plus-Button. Nachdem er seine Freunde eingeladen hat und die Farben und Muster seines Mixtapes angepasst hat springt er in den Chat, wo seine Freunde bereits etwas geschrieben haben und Songs gepostet haben. Die Musik läuft und Chris fügt über den Button neben dem Eingabefeld einen neuen Songs, aber vielmehr ein dazu passendes Mini-Game hinzu. Werden nur neue Songs hinzugefügt, landen diesen unten in der Warteschlange. Gefällt aber mal ein aktuelles Lied nicht gibt es eine Skip-Funktion. Eine Anzeige neben dem aktuellem Lied zeigt an wieviel Skips der Songs noch benötigt, bis er wirklich übersprungen wird. Der Zugriff auf die jeweiligen Benutzerprofile ist auch jederzeit möglich, sowie die Chatnachrichten auszublenden und sich in der „Warteschlange“ nur die geposteten Songs anzuschauen.

Zu Hause, die Mixtape-Session mit seinen Freunden ist vorbei, setzt er sich in Ruhe auf die Couch und kann ein bisschen in die Vergangenheit reisen und sich auch alleine alte Mixtapes anhören und in Erinnerungen schwelgen.

User Flow Pascal - New frame(1).jpgUser Flow Pascal - New frame(1).jpg

Design

Soziale Interaktionen

Der Umfang ersetzter sozialer Interaktionen in unserer App hängt teilweise vom Nutzer selbst ab und wie weit er sie ausnutzt. So kann der Chat entweder nur zum Teilen neuer Musik genutzt werden aber auch zum Kommentieren und zum Aufbauen ganzer Konversationen. Im Laufe einer solchen Session können Spiele mit involviert werden welche einerseits als Ersatz zu physischen Spielen angesehen werden können aber auch als Anreiz für weitere Gespräche. Weitere Interaktionen, die mit eingebunden worden sind, sind das „Liken“ von Liedern die einem gefallen aber auch das Gegenteil, „Skippen“ von Liedern die einem nicht gefallen. Für letzteres müssen jedoch eine bestimmte Anzahl von Teilnehmern auch derselben Meinung sein, um das Lied zu überspringen.

Erstellen eines neuen Mixtapes

1.gif1.gif

Hinzufügen von Songs & Games

2.gif2.gif

Skip Song

4.gif4.gif

Vergangene Mixtapes entdecken

3.gif3.gif

App Icon Entwicklung

Icons.pngIcons.png

Ausblick

Weiterer Content für die App könnte sich vor allem in mehr individuelleren Skins der Mixtapes stecken. Man könnte auch eine Kooperation mit Künstlern oder Labels eingehen und seine liebsten Mixtapes mit dem jeweiligen Style, ganz analog, produzieren lassen. Es könnte auch Sessions von Interpreten geben, wie digitale Konzerte (wie Travis Scott in Fortnite) und nur Teilnehmer dieser Sessions besitzen das dazugehörige Mixtape als Erinnerung. Eine breitere Spiele-Auswahl ist auch denkbar.

Tools

Adobe XD

Pro:

  • Kooperatives Arbeiten ist noch in der Beta Phase, funktioniert aber schon recht gut
  • Adobe XD ist zumindest dieses Jahr (2020) noch kostenlos nutzbar
  • Das Layouten funktioniert genauso gut wie in Figma oder Sketch
  • Auto Animate ermöglicht sehr komplexe Animationen, die hervorragend für Präsentationen geeignet sind.
  • Selbst bei einer hohen Anzahl von Frames, ist die Performance noch super (kennt man von vielen Adobe Programmen ja eher nicht so)

Kontra:

  • Es können zwar Töne eingebunden werden, jedoch keine Videos
  • Beim kooperativen Arbeiten ist es nicht möglich die Position der anderen Personen zu sehen
  • Beim Exportieren von Screens ist die Angabe der Größe etwas buggy und funktioniert nicht immer so wie sie soll (kann schnell gefixt werden)

Blender

Pro:

  • Blender ist komplett kostenlos nutzbar
  • Der Funktionsumfang ist so enorm groß, sodass im 3D Bereich so ziemlich alles möglich ist
  • Die neue Benutzeroberfläche ist sehr gelungen und hilft vorallem Einsteigern dabei, das Programm zu verstehen
  • Mit Evee hat Blender einen sehr schnellen Echtzeit Renderer der bei guter Optimierung schöne Bilder ausspuckt, selbst auf eine “normalen Rechner” sind so kurze Render Zeiten möglich
  • Da Blender kostenlos ist, gibt es bei Youtube unmengen Tutorials zu den unterschiedlichsten Themen
  • Blender nimmt nicht viel Speicherplatz weg

Kontra:

  • selbst mit der neuen Oberfläche ist Blender noch sehr erschlagend und kann Anfänger schnell überfordern

Keynote

Pro:

  • Keynote hat wie Adobe XD die Auto Animate Funktion die hier ähnlich funktoniert
  • Im Gegensatz zu Adobe XD ist es hier möglich Videos einzubinden
  • Es ist möglich zusammen an einer Keynote zu arbeiten

Kontra:

  • Auto Animate funktioniert in Keynote zwar ähnlich, jedoch ist vieles dann doch deutlich umständlicher (Es können keine Gruppen animiert werden)
  • Layouten ist in Keynote sehr mühsam, da die smarten Hilfslinien nicht besonders smart sind
  • Wenn man zuvor alles in Adobe XD gelayoutet hat, ist das Exportieren ein neuer Schritt, den man sich sparen kann, da XD ebenfalls eine animations Funktion besitzt
  • Keynote ist nur auf einem Apple Gerät nutzbar

Fazit

Der Kurs entwickelte sich im Bogen nach oben zu einem sehr guten und erfahrungsreichen Projekt. Anfangs waren wir noch skeptisch inwiefern wir ein Angebot entwickeln können, von dem wir wirklich überzeugt sind und hinter dem wir auch stehen können. Die Meetings liefen teilweise sehr lang, ermüdend und förderten unsere Skepsis umso mehr. 

Ab der Mitte allerdings, nach vielen intensiven Versuchen und einer Menge Austausch untereinander, haben wir die Idee mit der Musik App für uns gefunden. Die anfängliche Skepsis ist verschwunden und wir haben mehr und mehr gemerkt wie Lehrreich der Kurs geworden ist. Immer wieder gab es informativen Input zu Dingen wie Prototyping Tools und Design Guidelines. Dies hat auch wirkliche sehr geholfen die App in eine Form zu bringen, die für jeden verständlich ist und unseren Workflow deutlich produktiver gestaltet. Auch wenn es einen Moment gab in dem die App zum großen Teil neu umstrukturiert werden musste, haben wir dies schnell und effektiv angehen können. Mit dem Ergebnis sind wir sehr zufrieden und freuen uns sehr diesen Kurs gemacht zu haben.

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Ivo Herrmann foto: Paul Thiele

Zugehöriger Workspace

Remocial™ Life – Werkzeuge für ein fernes Miteinander

Entstehungszeitraum

Sommersemester 2020

Keywords