Music Playlist Management

A redesign of Spotify and other music apps.

Design Challenge:
Design two prototypes for a music app with clean and efficient flow for creating and managing playlists.
Project Length:
October - December 2017
Team:
Cross-functional team of 4
Role:
UX Designer and UX Researcher
Skills:
UX Research, UX Design, UI Design, Wireframing, Prototyping, Usability Testing, Information Architecture
Tools:
Figma, Invision, Balsamiq
Scope:
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.
Problem:
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.
Design Process
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.
USER RESEARCH
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:
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:
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.

IDEATION
Paper Prototype
Fig 1. Sketch of our brainstorm of Creating a New Playlist from an Existing One
Paper Prototype
Fig 2. Sketch of our brainstorm of Deleting Multiple Songs from a Playlist
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.
HARD DECISIONS
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.

Navigation Bar
Old Design

Selection of Songs
Old Design

3 Dot-Icon button vs 3 buttons at the top of the page
Old Design
PROTOTYPES
The key features of our two prototypes were:
  1. Navigation bar for the 4 main pages
  2. The details for each of the main pages
  3. The Playlist page
  4. 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.
Old Design

TAKEAWAYS
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.