Coursework Project

Music Playlist Management Redesign

Making Playlists Simpler
November 2017

Role person

I was a Design Development Team Member in this coursework assignment that focused on redesigning a music streaming app.

Team group

I worked in a team of 4 people. We were all designers in this project, but with different backgrounds. Two are HCI students and the two other (one of them being me) are Computer Science students.

Work border_color

The team worked on redesigning a playlist management system of major music streaming apps, such as Spotify, SoundCloud, and Apple Music.

Redesigning Management of Playlists in Music Apps: The Project

This project aims to allow users to make and manage playlists on mobile easier. With numerous music apps out there (i.e. Spotify, SoundCloud, Apple Music), each has their own process of creating playlists and managing them. Some are effortless, allowing users to create playlists within seconds, while others can cause frustration, as users struggle to find the "Create" button.

Therefore, this project aims to reduce the frustrations in users when using music apps. We will analyze multiple apps in the market, seek out what designs work well and which ones fall short, and redesign a music app prototype that reflects well-thought out designs from data collected from interviews and analyses.

What I Did

My task was to work alongside all the other team members in redesigning our prototype. We fully collaborated with one another in deciding on the designs and utilizing a collaborative prototyping tool where everyone was able to access and work on the designs.

Overview

I worked together with every team member in every phrase of the project. I ensured all our administrative documentations were fully completed for submission and pitched in my design ideas for redesigning of our mobile music app.

Skills

The development and designs tools used for this project included Figma for a collaborative platform to design and prototype and Google Drive for documentation.

Task

Many tasks in the project were worked on together as a team. We utilized Figma to begin designing and prototyping the app. I took care of designing several screens of the Search Bar functionality and the homepage layout of the app.

(First Image): Main Homepage layout of the app
(Second and third image): Screen layout for the Search functionality

The Process

Here I outline the process of what my team did from design to implementation.

Interviews

We first started out with interviews to get an understanding of the goals, tasks, and most importantly, the needs of our users. We wanted to get a variety of the different mindsets our users had when using mobile music apps. Most importantly, our interviews will allow us to observe users and capture what issues they have when using the app. These issues would be vital to our redesigns of our prototype, so we can create a product that is better than most apps out there.

Because we aim to redesign the playlist management system of a music app, we asked questions and asked users to perform tasks related to playlist management.

Here are some questions we asked our interviewees:

  • Do you create playlists for different occasions such as working out or relaxing?
  • Does grouping different genres of music contribute you to creating different playlists?
  • How often do you listen to music and what times of day?
  • What music app do you use?
  • When was the last time you made a playlist using your preferred music app?
  • How would you say your experience is like with your app with making playlists?
  • What are some things you like or dislike about your preferred medium’s playlist functionality?

After, we asked interviewees to perform a series of tasks involving playlists, such as creating, deleting, and adding, to get an idea of how different users interact with music apps. Here are some of the tasks we asked them to perform:

  • Create a brand new playlist for studying
  • Add and delete song(s) in a playlist
  • Share songs in a playlist
  • Browse for similar recommended songs to the songs in a playlist
  • Managing your created playlist to add and remove songs of a different mood and rename
  • Finding a new artist that you like, follow, and adding music to a the previous playlist
  • Sort the playlist
  • Add a whole album to a playlist

In the end, we gathered a good amount of data to help us proceed to deciding on our redesigns. Important information included that some users had issues creating a new playlist, some had trouble deleting songs from a playlist, and many had different approaches in navigation of the app that brought forth a variety of issues. Therefore, we aimed to take this into consideration in our redesigns to make a prototype that addressed these issues.


User Experience/Workflow App Comparisons

After the interviews, the team decided to perform several comparisons between several popular music apps in the market. With this task, we aimed to seek out the good user workflow and experiences in apps to help give us ideas on how we would proceed with our redesigns.

We did comparisons between 5 apps (Spotify, iTunes, SoundCloud, Google Play Music, and Amazon Music) and looked for what was good in one app and what was less good in another. We did not necessary seek out the bad flow in apps, but rather what was just less good that another app did better. We believed that this would help us decide what to implement in our redesigns and what to avoid.

Below is an example of a comparison we did between iTunes and Spotify in creating a new playlist. The scenario is locating the button to create a brand new playlist. This scenario proved to be a popular issue among our interviewees when asked to create a brand new playlist.

Finding the "Create Playlist" button

Good: iTunes


When users are on the Playlists page in iTunes, they are met with their playlists in sorted order. The "New Playlist..." option is always at the top of the Playlists page, making it visible to users that they can create a new playlist. Among our interviewees, this playlist functionality proved to be most easily discoverable with this navigation scheme.

Less Good: Spotify


Spotify’s Playlists page does give users the option to create their own custom playlist, but the button is somewhat hidden and not as obvious as iTunes. Spotify's Playlist page lists all the user's playlists, but places the "Create Playlist" button all the way at the bottom of the user's list of playlists. For users who had a particularly long list of playlists, this is not the most obvious location, especially if a new user was asked to create a new playlist. Most of our interviewees had trouble discovering the option to create a playlist, looking mostly to the Edit or hamburger menu buttons at the top right of the Playlists page.

This was just one of several comparisons the team performed. For more comparisons between music apps, check out our documentation. We cover scenarios of creating new playlists, managing playlists such as add and delete, and much more.

View Comparisons Document →

Design Decisions

With data collected from our interviews and after performing a thorough user experience/workflow of music apps, the team proceeds to discussing what will be used in the redesigns. We select designs and workflows that work well in existing music apps and consider incorporating it into our redesign.

Additionally, we looked at two platforms, Apple's iOS Human Interface Guidelines and Google's Material Design, for UI components and layout designs that give an aesthetically clean and pleasing look and feel.

From our interviews, we noticed a couple of designs that gave interviewees issues, such locating certain items and navigation. Here are some of the issues we observed:

  • Users struggled with finding the button to create a new playlist due to visibility issues (i.e. Spotify's "Create Playlist" button located underneath all the existing playlists, SoundCloud doesn't have a place to even create a new playlist)
  • Users have to move back several levels to add songs they want into their playlist rather than being able to add songs to their playlist directly within their playlist (i.e. within a playlist in Spotify, users don't have the option to directly add songs into the playlist at that moment)
  • Navigation in several apps can be very deep and some users forget what level they were on as they keep pressing buttons and struggle to remember how to go back up
  • Managing playlists is a struggle as all the options to manage are not in one place (i.e. Spotify gives option to playlist, but there is a separate button to rename playlists)

Given these issues, we moved forward to brainstorm design ideas for our prototype. Drawing from Apple's iOS Human Interface Guidelines and Google's Material Design, we decided on the following design decisions to address the issues from above and to also create a simple, yet easy-to-navigate prototype:

  • A floating action button on the bottom right corner of the playlists page, giving users easy accessibility to create new playlists anytime
  • A sideways, swipable navigation tab near the top of the page, allowing users to easily switch between pages in the app and always informing users which tab they are currently on
  • An all-in-one feature to manage playlists (add, rename, delete) upon one click of a button

With that, we went on to designing!


Our Redesigned Music App

With our decisions made, we proceed to begin designing.

We decided to use Figma, because of its collaborative platform for designing and prototyping. As a team, we collaborated on all aspects of the design, but I also completed the Search screens individually.

In the end, we have a prototype that we are proud of. Check out our final mobile music app prototype!

View Prototype →

Below are some images of our final prototype!

Hardest Design Decisions

Our team ran into some tough decisions during designing. We had some trade-offs, but our goal was to ensure we create a simple, yet effective prototype with easy usability. Below I talk about two of our hardest design decisions.

For more information on our decisions and why we chose certain elements (i.e. widgets, navigation tab), please take a look at our documentation:

View Decisions Document →

Managing Playlists (Edit)

One of our hardest design decisions involved where to place an “Edit” button for just playlists in the layout of the main home page. Our design idea was to have an “Edit” option so users can edit items within a certain tab. For example, if users were within the “Playlist” tab, they would be able to edit playlists items in that tab. We thought this would allow flexibility, such as being able to delete multiple playlists and/or rearrange the order of the items all at once. However, the challenge came to where to place the “Edit” button. We first decided to place the “Edit” button underneath the navigation tab and to the right, but it seemed to leave an awkward white space between the album photos and the navigation tab and we didn’t like that as it took up unnecessary screen space (Left image). We then tried to add the “Edit” button in the top right corner next to the title. However, we decided against this as we believed its placement would mislead users (Left image). Specifically, by implying the ability to edit the entirety of the library as opposed to content in the Playlists page. This left us to a decision of uncertainty and this decision became our tradeoff. Ultimately, we decided not to have the “Edit” option on the homepage (Right image). This was to allow more screen space to see the cover art and also reduce the awkward white space. We figured that the user could just go into the playlist itself to do any sort of editing and/or deleting. This way, although we are trading off the functionality to delete multiple playlists at a time, our app would look cleaner and it would take more thought for the user to decide if they wanted to delete the playlist rather than making it too accessible early on. This is a design decision we would need to improve upon and consider later on, but for now, we believe the homepage layout is the best, providing a clean look and easy and unambiguous usability.


Browsing via the Search Bar

We wanted our app to offer an overarching search functionality that was easily and obviously accessible to our users. As such, the search bar appears at the top of the page at all times if the user swipes down. From here, the user can search the entire library irrespective of the page they are currently on. We did fear that this might cause some confusion amongst users. Specifically, we thought some users might have difficulty understanding that it was an overarching search rather than one that was relegated to the page they were on. To resolve this issue, we decided to make the suggestion text within the search bar more obvious with use of phrasing like “Search All” or “Search Your Library.”

Reflection

This project has been a great experience because I got to work on the design aspect. My background is mainly software development, so being able to work in the stage where designing happens before the development was a new perspective. As a Computer Science major, I always wondered what field I would like to further explore, and UI/UX was one of the things that seemed interesting to me. I am glad I got a chance to work on this project to get a flavor of what it's like to be a designer, such as conducting interviews and working/collaborating in a team to design visual elements of an interface. I am very happy with the result of our prototype!

What I Learned

I have learned a lot during the process of this project. I learned that interviews are actually really important. It guides us to understand the context of users and most importantly, their needs. This helps us design elements that would be useful rather than something that is only appealing to the designer. Performing comparisons betweens apps in the market is extremely useful as well. It showed me designs that work well and designs that don't. After thoroughly examining several music apps, I view every app now with a different mindset, judging its usability and effectiveness.