Project for the course "Mobile Interaction Design" by Patrick Münster
Tool: Adobe XD
Challenge
For this course, our task was to design a mobile music streaming app for one specific genre. The app's aesthetic and features should reflect that genre to really speak to the corresponding users.
Solution
Indiego is a streaming app for the genre indie. Aside from typical features, there are unique ways to enjoy the listening experience. Indiego combines music streaming with aspects of social media, to let users interact with each other. By choosing fitting adjectives for their mood, Indiego can generate mood playlists for the user, and as Indie is all about creating individual sounds, there are guitar chords available for every song.
Experience indiego
Notification and song sending feature
Enjoying music with friends
Indiego makes it easy to casually stay in contact with your friends and share your passion for music. With help of notifications, the user gets updated on what their following accounts are doing, for instance when new playlists are created or an album gets released.
Instead of having to send song links via messenger apps, you can share songs in indiego directly, which is way more efficient.
Generating Mood Playlists
The Mood Playlist Generator is a unique feature that lets indiego stand out from other music streaming apps. By choosing up to three adjectives that describe the current state of their mood, users get an individual playlist made for this specific feeling.
It is possible to either generate the songs randomly, or to only use ones that are already saved in the library.
Generating an individual mood playlist
Exploring the lyrics feature
Interacting with the music
Indie music is all about independent artists who design their own art, write their own lyrics and also often play instruments. It is not uncommon that sometimes, there is just the artist with their guitar on stage.
Indiego wants to offer their users the possibility to get creative, too, by providing lyrics to sing along with for every song. In addition, guitar chords are available.
Design Process
To come up with an app idea, I made a moodboard for the genre indie. In order to represent a user that would use my app, I created my persona Luca. Creating my persona Luca and seeing the app “through his eyes” helped me a lot during the design process. By focusing on his goals and his daily life, which I described in a seperate scenario, I immediately knew which functions I had to prioritize in order to fulfill the needs of this user.
Moodboard for the genre indie
Persona Luca
After analyzing the potential user group and coming up with first ideas, I started the iterative design approach by creating a paper prototype. To test the prototype, I made it clickable with the Marvel app.
Link to the paper prototype: Click here.
After testing and improving it, I created a wireframe prototype, followed by the high-fidelity one. It helped a lot to stick to that order and the iterative approach, because after each cycle I found something to refine.
Clickable Marvel paper prototype
Indiego styleguide
Based on the colors of the moodboard, a sky blue was the obvious choice for the theme color. Blue is often associated with freedom, intuition, imagination and inspiration, which is very fitting for the genre indie. In addition, it is a calming color, which is pleasant for the eye of the user.
For indiego, background colors like black and grey seemed too cold, too dark and most importantly, not unique. Therefore, I chose various brown shades as background and layout colors. Brown is the color of growth and earth, which makes it very comforting. It is often associated with dependability, security and strength. The colors have a certain warmness to them, which brings out the accent color blue even more.
Site map for the app
Use flow for listening to a song
Information architecture is core to an app's user experience, as it derives useful content structures and navigation systems from complex sets of information. Before considering visual design choices, I focused on hierarchies, navigation and the division of content and functions. Creating a site map and a use flow helped me to keep a clean and focused design during all cycles.
Design process of the app icon
Learnings
Indiego was the first app and prototype I ever created. That is why, out of all my projects, this was the one with the highest learning effect, because the task teached me all I needed to know as a beginner about design thinking and the iterative design approach. Adobe XD was a good prototyping tool to start with, as it is not as complex as for instance Figma. In retrospect, I would have made more bold design choices, but this change in personal style highlights my development as a designer since 2021.
