Redesigning a Mobile Playlist Management Application

For my Usability and Information Architecture class, our final project was to create an information architecture wireframe for mobile platforms that supports music streaming. My team and I followed a strict outline in order to understand the context in which our system would be used, the good flow that we would like to have, and what our final redesign would look like.

Interviewing Users

The first thing we did was interview a total of 9 people who regularly listened to music through their mobile devices. While interviewing these users, we came up with user scenarios and also took note of what they did not like about their application. These users were all students and they all used two of the most used music streaming applications today: Soundcloud and Spotify.

The first thing we did was create a list of questions that we would ask students. From there, we would ask different questions based on the stories that they would tell us about their experiences. We learned that there were many different ways people created a playlist and managed a playlist. For instance, the thought process as well as the actual creation process a user goes through when creating a playlist for a long drive versus creating a playlist for a party is not the same.

After these interviews, we came up with 10 distinct user scenarios which would later be used to help us understand what users liked/disliked in a playlist management application as well as what they normally use it for.

Comparing Good and Less Good User Experience/Flow

In this part of the project, our goal was to find screen sequences that were worth imitating in our final redesign as well as sequences that we should avoid. After watching our interviewees run through multiple create/manage/other scenarios, we noticed many good sequences as well as many less good sequences.

Here is an example of a good and less good sequence that we found from these trials:

Good Sequence: Soundcloud
Less Good Sequence: YouTube Music

Here, we learned that most music applications do the same thing. However, how they do those things are actually very important to a user. After gathering 9 different snippets of good and less good flows, we started to have a more solid understanding of what we really wanted in our redesign.

Competitive Analysis

After our comparisons, we performed competitive analysis, where we built a sitemap with only the core navigation labels. While doing this, we were able to make design decisions that would help us in our final redesign.

Google Play’s Sitemap
Soundcloud’s Sitemap

Wireframe Redesigns

Now, we get to the fun part! We began our redesign by first drawing out exactly what we wanted them to look like.

After sketching our designs, we spent a bit of time deciding what tool we wanted to use to create our wireframes. At first, we thought about using Invision, but realized later that we would need to draw parts of our redesign (Photoshop, Sketch, etc) and none of us had any experience with this. We moved away from Invision and decided to use Axure, since it basically provided everything that we needed.

Since we had already sketched out our design ideas beforehand, and also conducted interviews, comparisons, and competitive analysis, the actual wireframe design was actually not too bad! It was all a matter of learning how to use Axure and ensuring our links were all working. At first we thought Axure was going to be hard to learn based off other wireframing tools that we have used before, but it actually turned out to be really simple. Mostly everything was drag and drop and making links hot was as simple as a couple of clicks. Below is a doc of the links as well as the steps the user to take for anyone interested!

https://docs.google.com/document/d/1j-Ezuo0sRdyoOo3XZt7pyWWpYWekZ5HcZ_vlfjIOb_w/edit

Like what you read? Give Phong Tran a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.