Music applications, such as Spotify and Tidal, provide a multitude of features that go beyond just listening to music. Users are able to create, edit, copy, and follow playlists which allows them to take ownership of their music. This makes these applications more interactive and engaging for users.
While music playlist applications have multiple features, not all of these features are user friendly. Specifically, Spotify is one of the best music managing apps on the market, but it lacks a feature for users to copy Spotify's curated playlists. In addition, users can edit their personal playlists (i.e. delete and add songs), but only one song at a time. The lack of freedom with these features hinders users and makes their interactions with the app less efficient.
1 | Understand
Through user research, we discovered the users's issues with the apps.
2 | Ideate
We conducted a comparison of workflow and a competitive analysis of different user scenarios across multiple applications.
3 | Prototype
We mapped the site architecture to lay out the flow of our redesigns.
My team and I conducted several interviews to gather information about people’s experiences with music playlist management apps. We wanted to know what apps users liked and why. What features made the app more enjoyable to use? We created a list of questions to ask all of our interviews, some of which included:
After the client interview, my team and I analyzed and interpreted our notes to come up with design ideas for the website. Here are some of our ideas:
How (what application) do you use to listen to music?
Do you organize your music?
(If Yes) How do you organize your music? (Look for: Genre, occasions, mood, etc)
(If No) Then how do you listen to your music?
Think of the last time you made a playlist, or the last few times you used them.
Once you make a playlist, how do you use it?
Do you ever update it? Do you make new ones? Why?
When do you make the playlists?
Where do you make the playlists?
What do you do with new music?
In addition to the questions above, we had our interviewees use the app as they talked about their preferred app. By doing so, they were able to show us features they like or disliked about their preferred app and my team and I were able to see how they interacted with the apps. We found that all of our interviewees liked to organize their music into different playlists. Some are for events like a party or going to the gym while other playlists for different genres. 5 out of our 11 interviewees preferred to use Spotify to listen to music, followed by 2 who used Apple Music/Itunes, and 1 person for each app respectively (Tidal, Android Music, Melon, and Bugs).
From the interviews, my team and I looked for user scenarios that encompassed creating or managing a playlist and other activities to do with playlists. We found 9 distinct user scenarios:
Creating a Playlist
Creating a playlist through searching
Creating a playlist from an existing playlist
Making a new playlist collaborative
Managing a Playlist
Finding and adding recommended songs to a playlist
Searching for a specific song in a playlist and deleting it
Organizing songs in a playlist
Managing a queue of music
Sharing a playlist
Following a playlist and people
COMPARISON OF USER EXPERIENCE & WORKFLOW
After the user research, we conducted observations of users using 5 different apps: Melon, Soundcloud, Spotify, Tidal, and Youtube. My team and I chose these apps because of how individually different they are from each other. After the users ran through all the scenarios, my team and I found the best and worst user experience from each of the user scenarios listed above and created a Powerpoint comparing the good and less good user experience and workflow.
I found this process to be insighful because instead of me individually critiquing the workflow of the apps, I was able to observe how different users interacted with the app, alowing me to identify pain points. This gave me a deeper understanding on the the strengths and weaknesses of each app, which gave me inspiration for design ideas for the ideation process. Each individual is different, so how they interact with an app for a specific scenerio will vary; what I might find diffcult may be easy for another person. By doing this comparison, I was really able to see all perspectives allowing me to design from the context of the use.
COMPETITIVE ANALYSIS OF INFORMATION ARCHITECTURE
To make our design process be more efficient and run more smoothly, my team and I made a competitive analysis of the navigation structures for 3 out of the 5 apps we used for the user scenarios. We created sitemaps for Soundcloud, Spotify, and Tidal. This gave us a better understanding of how these apps are structured. Furthermore, the sitemaps gave us inspiration for the design of our music playlist management prototypes because it provided interaction design patterns. The competitive analysis pushed me to think structurally and imagine how users would interact with the redesigns. This helped me visualize the goal of each redesign and the necessary steps needed to reach those goals.
With the competitive analysis finished, I went on to sketch our design ideas on paper as the first step of our design process. All the apps we tested had really good features and some that needed improvement. We decided to create two prototypes that focused on two different tasks: (1) Creating a new playlist from an existing one, and (2) Deleting multiple songs from a playlist. We chose these specific tasks because we found they were lacking in the apps we user tested or had bad workflow. In the sketches, I wrote out the different components and functions each tasked required as well as the different pages my team and I believed were needed to complete the tasks. During this process, I wanted to focus more on the important interactions and flow of the redesigns to ensure consistency of screen structures.
For Creating a new playlist from an existing one, the user is able to click on an icon while in an existing playlist that will allow them to select specific songs. Once the user is done selecting songs, the user presses on the same icon where a menu will pop up with a different options. The user can choose to "Add songs to playlist" which pops up another menu that allows the user to create a new playlist or add the songs to the user's playlists. The goal of this redesign was to add feature without adding too many unnecessary steps and making intuitive for the user to use.
For Deleting multiple songs from a playlist, the user presses on an icon when they are in a their playlist, which pops up a menu with different tasks the user can do with their playlist. Choosing "Edit Playlist" allows the user to rearrange the order of their songs as well as select songs. Once the user has selected their songs, they press the same icon as before which pops up a menu of various options. The user can then delete the selected songs. The goal of this redesign was to give the user more freedom by allowing them to delete a multitude of songs. Looking back at this design, I would add a confirmation pop up so the user can confirm if they want to delete the songs they've selected and then a second pop up confirming that X amount of songs were deleted from their playlist.
Here is a list of a few of the big decisions my team and I made during our ideation and design processes. There was a lot of discussion and back forth, but we made our decisions based on what was best for the user which was supported by our user research.
My team and agreed that the navigation bar was the first thing we had to decide on because it is the first level of the app’s navigation structure and all the other pages are built of it. We looked at Spotify’s and Tidal’s navigation bars as a basis for our own. We wanted to have a Homepage, an Explore page, a Search page, and a Library page as the core four. This was our first hardest decision and most important decision. All the decisions made about the navigation bar had to be done first before we could flesh out any other page in the app. Looking at Spotify and Tidal, we saw that both music applications highlight the homepage icon that the user is on. Having seen this in other applications as well, we decided that we would incorporate the highlighting the icons since it was standard for other apps. We decided to make the navigation bar fixed no matter where the user is in the application, even for pop up menus. This way that user is always oriented and can figure out where they are in the app even if they are three or four levels deep. By having a conceptual hierarchy, the user will be able to retrace their steps and hopefully rarely feel lost while using that playlist making app. We also decided to add a label under each icon in the navigation bar for users who have never used an app like this to understand what each icon means or in case some people forget.
Selection of Songs
One major problem we found when using other music management apps, such as Spotify and SoundCloud, was the inconvenience of having to individually add songs from an existing playlist to a new playlist. We wanted to create a process that made creating a new playlist from scratch more efficient and simple. We ideated two ways to achieve this goal. One being swiping left on a song that would generate a pop up to pick which playlist the song being swiped would be added to and the other idea was to create a checklist similar to email apps. We decided on the checklist option that would allow the user to choose multiple songs at one time and the decide what to do with the selected songs. The selected songs can either be added to a playlist, added to the user’s library, added to the user’s queue, or deleted from the playlist if it's the user's. We found the checklist format to be more efficient than the swiping format because in the latter situation, the user would need to decide which playlist to put the song into after each swipe—this would become redundant and inconvenient when trying to add multiple songs from one playlist to a new playlist.
3 Dot-Icon button vs 3 buttons at the top of the page
Following the selection of what songs should be added to a playlist, we needed to decide what step the users should take next. After the songs are selected, the user needs to decide what to do with the selected songs. There are three options the user can do with the selected songs including: add to playlist, add to library, and add to queue. Our dilemma was figuring out how to present these options. We were stuck between the idea of putting these options in the 3-dot icon button or putting 3 buttons at the top of the page. The problem with putting three buttons at the top of the page would be aesthetics; putting three large buttons with each function would be cluttered at the top of the page. We considered using icons instead of text to indicate library, playlist, and queue but it is probable that the user would mistake the icons for different functions. In result, we scrapped this idea and decided it would be better to add the list to the 3-dot icon button. Additionally, we found this to be more consistent with the app since all of the previous editing options were also in the in the 3-dot icon button.
The key features of our two prototypes were:
Navigation bar for the 4 main pages
The details for each of the main pages
The Playlist page
Menus with list of options for the playlist
With ideation completed, I sketched out the different screens in more detail as a base for the mockups to be created on Balsamiq. From there, we created our screens on Figma and used InVision to turn our static screens into a clickable prototype. We drew inspiration from the various music applications used in the comparisons of workflow as well as other apps like Gmail for the redesign of the two scenarios. From there, we were able to a create a new functionality of creating a new playlist from an existing one and make the process of deleting multiple songs simpler and quicker.
This project opened me up to the world of app design and many interaction possibilities. Whereas website design is mostly visual, app design also involves touch. A swipe and tap have different outcomes. I'm excited to explore this new world of interactions that aren't just visual.