Music App Redesign

Priyanka
7 min readDec 7, 2017

The Challenge

Creating playlists on a music applications is often easy and intuitive. However, it can be rather tedious to manage them, especially if it is a collaborative playlist amongst friends. How can we make it easier for users to create a collaborative playlist and maintain it?

Goals

In this music app redesign, we wanted to make it easier for users to manage their playlists by adding new songs and deleting outdated ones. We also wanted to incorporate a more intuitive collaboration system where users can invite their friends to collaborate on playlists and can also see the songs that their friends are listening to on a ‘news feed’ type of feature on the Homepage.

Context

  • 4 weeks (Nov’17- Dec’17)
  • 4 members

Contributions

User Research | Competitive Analysis | Prototyping

I made significant contributions to all aspects of the project including user research, competitive analysis, wire-framing and prototyping.

User Research

Users : We interviewed 10 users between the ages of 20 and 30.

My group and I interviewed music listeners about the music application that they frequently used. We asked them various questions to gauge their usage of these apps and to identify any common trends. We asked them questions such as:

“What do you like about creating playlists?”
“How do you find new songs to add to your playlist?”
“How do you manage your playlists?”

Most of our users had different situations where they listened to music. For example, some of our users had a separate playlist for workouts, for studying or even for cooking. Many of our users informed us that they discovered a lot of new music from their friends and that they would like a more ‘social’ music app. A lot of our users also revealed they did not like how some music apps did not have an intuitive option for deleting songs and it’d require them to perform many steps to delete a song.

Takeaway
Many of our users found new songs from their friends by seeing what their friend were listening to. Our users also reported that it was often difficult to create playlists and deleting songs would require multiple steps.

Competitive Analysis

To understand how different music applications perform the same functions, we contrasted similar functionalities to identify the different icons, navigation, options and different uses of layouts. For this analysis we identified how different applications facilitated creating playlists, deleting songs from a playlist and adding songs to a playlist.

(a) Creating a Playlist

Good User Flow : Spotify
Spotify has a good user flow for creating playlists and allows users to create a new playlist by going to their playlists in the ‘Your library’ section. Then, the user is able to create a new playlist by clicking on the green button. Spotify requires only 2–3 steps for creating a playlist and has a button for creating a playlist on the playlists section.

A user creating a playlist in Spotify

Less Good User Flow : AudioMack
AudioMack has a less good user flow for creating playlists. When the user clicks on their playlists, they do not see any option to create a new playlist. Instead, to create a new playlist, the user first has to find a song that they would want in that playlist, and then add that song to a playlist. By adding a song to a playlist, they will be asked if they want to create a new playlist. In order to have a smoother user flow, the 5th picture with the ‘Create Playlist’ option should have been present in the ‘My Playlists’ section. Whereas Spotify only had 2–3 steps to create a playlist, AudioMack has around 4–5 steps since the user is not able to create a new playlist in their ‘My Playlists’ section.

User creates a playlist in AudioMack

(b) Deleting a Song from a Playlist

Good User Flow: Google Play Music
When deleting individual songs from an already existing playlist, Google Play Music has the most efficient interface for users to use. Once the user is in the particular playlist that they want to delete songs from, all they have to do it swipe the song to the left, and the ‘delete’ button will pop up on the right side of the song. The user then just taps the button to confirm the deletion. Since there is a slide and a tap, the user is also less likely to make a mistake compared to just sliding.

Deleting a Song in Google Play Music

Less Good User Flow : Spotify
Spotify, on the other hand, makes the user navigate to a full menu of playlist management options first. The user needs to pull up the menu of options and then click ‘Edit’ to change anything about the playlist. After clicking ‘Edit’, a delete button will pop up to the left of every single song in the playlist. It’s then up to the user to scroll back to the song they want to delete and then delete it. It’s also very easy for users to accidentally click delete on a song they didn’t want to get rid of as they are scrolling through all of the songs in the playlist.

Deleting a song from Spotify

Design Story and Initial Prototype

While doing our user interviews, we noticed that :

  • Users wanted a more ‘social’ music app where they could see what their friends were listening to and be able to easily make collaborative playlists with their friends.
  • Users wanted an intuitive way to create a collaborative playlist and wanted to be able to invite multiple friends at once.
  • Users did not want to make more than 2–3 steps in order to delete a song from a playlist or to add a song to a playlist.

Keeping all these in mind, we sought to design an interactive music app, by incorporating a feature analogous to a ‘News Feed’ on the home page. Here, users can see what music their friends like and can also see their friends’ comments on albums/artists/songs. Additionally, creating a function that made making playlists collaborative was a major point in making a more social music app. While it is currently possible on Spotify, it is not a major proponent of a playlist; in order to create a collaborative playlist, a user must tap through a series of options and choose between possible pathways to achieve the collaborative playlist goal. Thus, we also wanted to create an easier and smoother workflow for creating collaborative playlists.

Initial Prototype
For our initial design of the prototype, we made sure to include the ‘news feed’ on the Homepage of the app. However, after designing a few pages, we realized our prototype felt very similar to Apple Music, even though we had many different functions. Therefore, we decided to change the aesthetic of our prototype.

Final Prototype

Using Illustrator, my group and I fleshed out our final prototype keeping our distinct user scenarios and core features in mind.

User Goal 1 : Adding Songs to a Playlist after you’ve already created It

Hardest Choices:

  • Deciding where the user would be taken after they clicked ‘Add Music’. While doing our competitive analysis, we noticed that Spotify would take the user to ‘Browse’ if they wanted to add songs to their newly created playlist. We were considering doing the same thing, but we decided to give users a choice. The user can either add songs that have already been saved to their library, or they can go to ‘Streaming’ which basically comprises of all the songs that the music app has available.
  • Content of our ‘Streaming’ page. The streaming page isn’t exactly the same as ‘Browse’. We do have the ‘Browse’ section on our ‘Streaming’ page, but we decided to add another unique feature which we have not seen in other music apps. On our streaming page, we have a section titled ‘Your recently Played Songs’. These are the songs that the user has recently played, but is not present in their library. We thought this would be a quick way for users to add songs to their playlist.
  • Where the user would be taken after they had finished adding songs to their playlist. On Spotify, after the user adds a song to their playlist, they are given a confirmation that their song has been added and they remain on the same page. Since we already allow the user to add multiple songs to their playlist at once, we have a ‘Done’ option the user can click. We decided that after the user clicks ‘Done’, they will be taken to their playlist where they can see all of the songs that they have added. There, they can play the songs from their playlist or click ‘Shuffle’ to play the songs.

User Goal 2 : Creating a Collaborative Playlist

Hardest Choice : Pop-Up vs New Page for Inviting Friends

Initially, we had planned to create a new page for ‘Inviting Friends’. However, after a lot of contemplation, we decided to use a pop-up feature instead. We did this because we did not want to add an extra step for the user. After they’re done inviting friends, they can close the pop-up and they will remain in the same ‘create new playlist’ page. We noticed that the apps that had a less smooth user flow, had some unnecessary extra steps which could have been avoided by including pop-ups.

Interactive Prototype

View our interactive prototype here!

--

--

Priyanka

Grad Student at UC Berkeley School of Information | UX Research & HCI