Unilist is a playlist based music streaming app. It helps users create playlists from multiple streaming sources. The app is currently being further developed.

‍

Context

My friends and I were talking one day and realized that we all use multiple platforms to listen to music. One essential reason why is that certain songs were on certain platforms and not on others.

Take, for instance, the song Plastic Love (1984). It’s wildly popular with 27 million views on YouTube, but unavailable on Spotify. Instead, there’s a remix of the song by an artist named Yuri Tanaka. Ironically, this song is not on YouTube.

But what if I wanted to create a playlist with those two songs? Or with another song only on SoundCloud? Or with another song on our phones?

Project Overview

Goal: Develop a playlist based music player with cross-platform streaming support.

Target Users: 15 to 60 years old, music listeners

Platform: Android

Design Problem

With Unilist, I didn’t want to just create another music player. To understand the directions I need to take, I asked the following questions:

• What do users need?
• What are competitors missing?
• How would UniList solve user problems?

I decided to answer this question by researching user needs and the current market space.

Understand

User Interviews

As a first step in understanding what the users need, I gathered 4 quick user interviews. I tried to gather a diverse set of music listeners, each of which would illustrate different problems. Here were some key findings:

1. Even casual listeners use multiple platforms for several reasons. Interviewee B revealed that he would sometimes listen to Music Video because the audio is different and he’s more “used to that version”.
2. Music producers create playlists to experiment with new ideas. They create many playlists often and access many songs.
3. Users on Spotify revealed that after having many playlists, they seem to randomly re-order themselves, making it difficult to organize and access playlists. 
4. Users don’t usually have the need to sort through a playlist. Changing the order of songs manually is occasionally used, but none of the Spotify users used the automatic sort feature.

"...I just kinda shuffle through all the playlists ... [I] don't think I play any of them, like normally..."

Competitive Analysis

I wanted to do some market research for two reasons. First, I wanted to understand what's currently missing in the market space, so that Unilist actually solves a problem rather than ending up as another music app. Two, I want to understand what competitors are already doing well.

I chose some popular music apps, both streaming and local players, and explored the criterion that will help me answer questions based on the user interviews. One thing I specifically focused on was playlist creation. Because Unilist would be solely based on playlists, one goal I had was to make that process easier than the competitors.

Define

Personas

Based on the earlier user interviews, I created two personas that would represent the user group. Chris Hayes represents the casual listener group, those that need to be able to create playlists with multiple sources. Tina Spence represent the heavier user group: those who will access more songs and will be more likely to create more playlists.

Feature ideation

With my research, I sat down with the dev team to define the scope of what our app will do. I also used this process to communicate further specifics about the product’s vision.

The dev team provided new ideas, such as developing a dark mode UI. In this case, after discussion and looking at research, we determined it as a low priority feature that we can implement in the future. Of course, we decided to design the UI with dark mode in mind.

Explore

Information Architecture

I started the design process by mapping out the overall IA. Because I wanted to tackle the user challenge in quickly generating playlists, I tried to go more in-depth into the new playlist process with a user task flow. This really helped in creating a fast and efficient new playlist wizard.

Sketches

To further layout the foundation for the designs, I sketched out some basic wireframes.

This process was where I realized that unless clearly differentiate the way users see songs and playlists, it may become very confusing whether the item the user is looking at is a playlist or a song. I tried to address in the later iterations.

Solve

lofi prototypes

Based on the sketches, I created a first set of prototypes in mid fidelity. I ran a quick round of user testing to test if the users are able to clearly understand each component.

Here were some key findings:

• Displaying search matches separately for title matches and song matches received positive feedback, except that it may get confusing first time around
• The current tab design when adding new tracks is a bit cluttered.
  

Hifi prototypes

From there, I created a digital prototype that would more closely resemble the final designs.

I addressed some of the previous findings:

• term matches in search were signified with color, and the tab design was changed to a more conventional design.
• I also tried to solve the problem I discovered in the sketch phase where songs and playlists look too similar by making the cover art of songs as circles and that of playlists as rounded squares.
  

Again, I ran another round of user tests, although this round was more extensive. Here were some findings:

• While using three long lines as an indicator to change the order of items was assumed universal, more than one user seemed confused. I later ran a mock A/B test with an alternate indicator which was more positively met. This was later implemented.
• There are three options to play a playlist from the playlist screen: play, shuffle play, and add to queue. I wanted to see if users would understand their function just with icons. Fortunately, all users showed clear understanding.
• Three subjects reported that the circular and rectangular designs was “messy”.

“...I don’t get why there are circles and rectangles and then this one only has two circles like man this looks like a circus...”

Final Design

As of now, I refined the previous design based on the feedback into a final design. A notable change was that I reorganized the way cover arts are presented on a screen. If a screen is displaying playlist cover arts, I hid all the song cover arts, and if the screen is focused on each individual song (the queue modal and the now playing screen), the playlist cover art was hidden.

Wrap Up

This was my first experience working in a small team with developers, all of us who are passionate about this problem space. While the product is still under development, here are some things I learned:

• One reason I started this project was to get more experience with taking research results into a product vision. I learned a lot in this area as well as how important it is to solidly define the product before moving on the design phases.
• Previously having most of my experience in Adobe XD, I tried to use Figma for the first time. I enjoyed its asset management while I missed the auto-animate feature in XD.
• I learned how to communicate with developers. I have a working knowledge of development but developers often approach projects from a different perspective. One dev commented early on, “just make it look like BlackPlayer,” although later they were just as interested in the research process as I was.
• Last important lesson I learned is to never assume for the best. The three line handle (that indicates to the user that the order can be changed) seems to be something that is up in the air, especially with those who lean towards a casual listening style. Creating an alternate design to solve this, however, was also quite fun.

‍

Additionally, since the product is still under development, I want to further work on:

• The dev team is working hard to complete the product by the end of the year. Until then, I plan to work closely with the team to solve potential obstacles that may arise.
• The current prototypes lack animations. I want to prototype some basic animations such as the header change in playlist screen. 
• The current version of the UI was developed with dark mode in mind. I’ll be designing a dark UI with contrast ratios and the Android Palette API in mind.

‍

Thanks for reading!