Mobile Playlist Management –Music Application

Information Architecture Project

Timeline – 2.5 weeks

Collaborators – Mitchel Topete, Vince Chang

Tools used – Lookback.io (for recording user interactions), Adobe Photoshop and Invision.

Problem

Considering many people listen to music through apps like Spotify, Soundcloud etc., it is commonly noticed by users of such apps that the navigation on it are never that simple. The aim of our 2.5 week long project was to design a music application that improves upon the process of creating and managing (such as add, delete, organize) playlists by looking into and improving upon the information architecture of such applications. Prior to the design, our team and I did extensive research and analysis on preexisting music applications which helped us focus on what things to include in playlists, and the tasks that needs to be incorporated to use and manage playlist in the most efficient way possible.

Design Process

Interviews

To understand the context of how users generally listen to their playlists and manage them, we interviewed several people (around 10) across music platforms that helped us find out many user scenarios among apps that we looked into for our own music application. Additionally we also asked them about the issues and things that they could change to improve their experience.

A User testing out a scenario

A User testing out a scenario

Snapshot of Interview Notes

Few Music apps that we came upon during our interviews which we eventually used for research are Spotify, Soundcloud, 8tracks, Pandora, Google Play Music, Apple Music, and Saavn.

Participant Observation and Comparative Scenarios

After the interviews, we looked into various scenarios and generated walkthroughs for the users so that we could observe various pain points and design issues that they were facing. To do the observation, we recorded users going through the various scenarios using the ‘lookback.io’ tool on their phone that recorded actions and interactions done while going through the task. Few of the recordings that I and our team did with various participants can be seen below in the videos.

 

Examples of user scenario recordings by our participants

As seen in the above videos, we went through 3 scenarios for each of the participants we interviewed and generated almost 30 + video recordings across many platforms.

Now among the various scenarios we complied, we picked out the most important and common ones and studied how users perform the same scenario in different music apps (e.g. Spotify, or Google Music or Soundcloud) and then compared the walkthroughs and interaction cost among the apps. This comparative scenario analysis helped us understand the information architecture that each of the app follows and eventually aided in the design of our app - Synth. 

Comparative Scenarios through different apps

Competitive Analysis

The next step included an extensive competitive analysis of the navigation structures and labels used in different applications. The navigational categories that we looked into included Genres, Non Genres, Albums and Track Routes across various platforms.

For example, we noticed that, for Genres, Spotify uses block icons with an affiliated background on it due to limited set of genres (and few subgenres inside the main genre) whereas Pandora uses a list view instead, due to a huge number of genres and sub genres. Soundcloud (and also 8tracks) uses an entirely different concept of tags instead of genres in their app. 

Spotify Genre List

Spotify Genre List

Pandora Genre List

Pandora Genre List

Soundcloud Genre Tags

Soundcloud Genre Tags

The following images of the excel document show few excerpts of our thorough competitive analysis of various music applications. 

Competitive Analysis of various music applications.

Low Fidelity Prototypes and Design Decisions

We designed our draft by looking into the scenarios and the competitive analysis done for various applications. Our team brainstormed ideas based on the research done by each member to improve the creation/management of playlists and came up with a rough prototype for the app. 

Teammate drawing out one of the sketches

Teammate drawing out one of the sketches

FullSizeRender-5.jpg
White board low fidelity prototypes

White board low fidelity prototypes

These included quite a lot of difficult design decisions in navigation that we solved by comparison and testing out the low fidelity prototypes with a couple of users. 

For instance, one of the design decisions that our team together came upon was on how to improve the efficiency of adding a song to the playlist (or deleting from a playlist)? Unlike the traditional way of clicking for more options on a song, we implemented the ‘drag and drop’ feature (fig below) by taking inspirations from the Facebook Messenger bubble and TouchWiz UI on Android. This drag and drop feature eliminates the need to have the user perform extra clicks through the ellipses button (traditional way on Spotify, Play Music etc), and gives a more natural “add to cart” feel while creating and managing playlists. After such decisions were made, we made final paper prototypes (and whiteboard sketches) and went towards designing the high fidelity prototype using Invision and Adobe Photoshop.

Traditional way of adding a song     in Spotify

Traditional way of adding a song     in Spotify

Sketch of our drag and drop     design idea

Sketch of our drag and drop     design idea

Our prototype of the drag and drag idea to quick wheel menu

Our prototype of the drag and drag idea to quick wheel menu

Final design

The following prototype was designed using Adobe Photoshop CS6 and then implemented onto Invision for interactivity. The application was essentially a complete redesign of various music applications (Spotify, Play Music, Saavn, Pandora and more) by taking into account the interactions and efficiency of creating and managing playlists while still allowing users to browse and discover songs very easily.

Team working on the final design

User Scenario example - Adding song to a new playlist (GIF)

User Scenario example - Adding song to a new playlist (GIF)