Tuney Musikapp Design und Prototyping

Im Rahmen eines Hochschulprojekts habe ich die Aufgabe bekommen, eine Musik-App zu entwerfen. Es gab keine spezifischen Vorgaben für das Design, lediglich für den Inhalt. Das Ziel dieser Aufgabe war es, den Prozess der Entwicklung einer eigenen App näherzubringen. Dafür musste ich mich intensiv mit meiner Zielgruppe auseinandersetzen, eine Informationsarchitektur aufstellen, Farben und ein Logo entwerfen sowie verschiedene Prototypen erstellen.

Das Endergebnis dieser Arbeit ist eine Abgabe in Form einer Präsentation, die mit Verlinkungen zu den einzelnen Prototypen versehen ist. Darunter der Highfidelity Prototyp, Wireframe Prototyp und ein Paper Prototyp

Die Herausforderung

Tuney ist einer der ersten Projekte, die ich an der Hochschule durchgeführt habe. Daher muste ich mich eingehend mit dem Designprozess auseinandersetzen, insbesondere da diese Aufgabe ziemlich viele Schritte enthielt, die man in einem richtigen Projekt ausführlicher bearbeiten würde. Dennoch konnte ich auch hier mit einem weißen Blatt Papier starten und meiner Kreativität freien lauf lassen.

Mir wurde die Aufgabe übertragen, eine Persona zu erstellen und ein Szenario zu entwickeln. Dazu habe ich ein Moodboard erstellt, das die Stimmung meiner Persona widerspiegelt. Im nächsten Schritt habe ich eine Informationsarchitektur aufgestellt, die den Inhalt meiner Musik-App gliedert. Anschließend habe ich einen Paperprototyp auf Papier skizziert und einen klickbaren Wireframe mit Figma erstellt. Zum Schluss habe ich eine Farbpalette, ein Logo und einen High Fidelity Prototyp entwickelt. Diese Schritte wurden alle relativ kurz behandelt, da der Zeitrahmen für diese Aufgabe sehr begrenzt war.

Folgende Schritte wurden während des Prozesses eingearbeitet

• Erstellen eines Moodboards zum Thema Musik
• Zielgruppenfindung und erstellen einer Persona, inklusive Szenario.
• Ausarbeitung der Content Strategy, Information Architecture und Navigation.
• Zusammenstellen einer geeigneten Farbpalette, Typografie und Logo.
• Gestaltung eines Paperprototyps auf Papier,sowie eines Wireframe und High Fidelity Prototyps mit Figma.

Die Ausführung: Zielgruppe eingrenzen

Im ersten Schritt habe ich mich näher mit der Zielgruppe einer Musikapp beschäftigt. Dabei habe ich die Persona Sophia Ramona gewählt, eine junge und unternehmenslustige Studentin. Eine kurze Biografie und Eckdaten zu ihrem Leben verfasst, um herauszufinden was sie wohlmöglich in einer Musikapp mögen oder nicht mögen würde.

Szenario erstellen

Die Persona wurde tiefer erforscht, indem ich ein typisches Szenario für Sophia erstellt habe, wie sie mit der Musikapp interagieren würde. Es beschreibt, wie sie morgens aufsteht, wie sie ihre Playlist nutzt, um zu tanzen oder Karaoke mit ihren Freunden zu spielen. Diese Informationen haben mir für den nächsten Schritt enorm geholfen, indem sie mir aufgezigt haben, welche Funktionen die Musikapp unbedingt benötigt.

Content Strategy und Information Architecture

In den nächsten Schritten habe ich mich mit dem Inhalt der Musikapp auseinandergesetzt. Auf welche Funktionen ich mich beschränken wollte und wo sie in der App zu finden sind. Dafür wurde ein Fully Connected Navigation System gewählt, bei dem es möglich ist von jedem Punkt in der App zu einem anderen zu gelangen.

Durch das Aufschlüsseln, der einzelnen Navigationspunkte wie zum Beispiel ,,News”, ,,Player” oder ,,Explore” habe ich Unterpunkte und Funktionen herausgesucht. So soll man beim Navigationspunkt ,,Explore” die neusten Songs oder die angesagtesten Künstler finden.

Papierprototyp scribbeln

Mit den gewonnen Informationen ging es an das Ausarbeiten eines Papierprototypens. Damit können die Funktion aus einfache Art und Weise aufgezeigt werden und Fehler schnell erkannt werden. Ich habe mich dazu entschlossen drei Screens zu scribbeln, den Home, Explore und den News-Screen. Den Papierprototyp wurde online hochgeladen und ist stark eingeschränkt klickbar.

Mit einem Paperprototyp kann man dann Nutzertests durchführen, damit man bereits im Anfangsstadium Nutzerfeedback bekommt und ohne viel Aufwand die App verändern kann. Da wir uns hier aber nur auf den Prozess konzentrierten haben wir keine Nutzertests gemacht. Hier gehts zu einem anderen Projekt, in dem Nutzertests durchgeführt wurden.

Klickbarer Wireframe auf Figma

Nachdem der Paperprototyp fertiggestellt wurde, habe ich mich an die Ausarbeitung eines detaillierteren Wireframes gemacht. Dafür habe ich mit einfachen Formen auf Figma gearbeitet und die Anordnung verbessert. Schriftarten und Abstände wurden ausgearbeitet, Icons hinzugefügt. Die App wurde interaktiver, beinhaltete bis dahin aber noch keine Bilder oder Farben.

Farben, Schriften und Logo

Anhand des bereits angefertigten Moodboards und der Persona habe ich eine Farbpalette zusammengestellt. Dabei habe ich mich nur auf das wesentliche beschränkt, eine Accentfarbe, eine Secondary Farbe, sowie Schrift und Hintergrundfarben.

In dem Logo wurde der Name der App ,,Tuney” eingearbeitet. Das T wird mit runden Formen dargestellt, die Farben der App tauchen ebenfalls auf.

Der High Fidelity Prototyp

In dem letzten Schritt wurden alle Erkentnisse eingearbeitet. Ein HiFi Prototyp mit mehreren Funktionen wurde auch Figma erstellt. Farben und Bilder wurde eingearbeitet. Die einzelnen Screens wurden miteinander verknüft, dass man damit Nutzertests durchführen kann.

Fazit

In diesem Projekt musste ich in sehr kurzer Zeit eine vollumfängliche App ausarbeiten. Das Ziel war es ein besseres Verständnis und Überblick für den kompletten Prozess zu bekommen. Leider hatte hier dabei nicht die Gelegenheit die einzelnen Schritte tiefergehend zu bearbeiten.

Dabei hätte ich mir gerne mehr Gedanken, um Schriften, Farben und das Logo gemacht. Ebenso hätte ich gerne mehrere Screens gebaut und diese mit mehreren Interaktionen versehen.

Dieses Projekt war eins der Ersten und zurückblickend würde ich einige Dinge anders gestalten. Dennoch ist es schön zu sehen, wie sehr ich in meinen Designs gewachsen bin.