Screen Shot 2018-05-04 at 12.14.52 PM.png

Vibes

 
 

Vibes

Overview

Vibes is a music playlist management app that provides music listeners with a place to discover new music and create playlists that they love. This app was created by interviewing and observing users interact with todays most popular music apps. We incorporated the features that users loved and created new features that make the music playlist management process easier and more intuitive. This 4 week project was completed along with 3 others for a Usability and Information Architecture course at UCSD (Cogs 187A).

     My Roles

  • User research
  • UX/UI design

     Tools

  • Adobe Illustrator
  • InVision
 

User Research

In order to gain deep insights and understand our users, we conducted in depth interviews and observations with 6 different music apps: Spotify, Soundcloud, Youtube Music, Tidal, Pandora, and Apple Music. The interviews were aimed at both gaining overall information about users and understanding how different users interact with music apps. Along with the interviews, we also gave users different scenarios to perform while we observed them. In total we conducted 9 interviews and observations. Our research group consisted of mainly college aged students who ranged from frequent music app users to infrequent music app users.

 

User Interviews

Screen Shot 2017-12-05 at 11.55.42 AM.png

User Scenarios

Screen Shot 2017-12-05 at 3.40.41 PM.png

Key insights

The key insights from our interviews and observations were that majority of users prefer using Spotify because it has the most music and it feels the most personalized compared to other music streaming apps. Some of the consistent pain points we observed occurred when users were creating playlists for specific activities because of the large number of options Spotify provides users with. Some other consistent pain points users faced were deleting songs from playlists and reorganizing existing playlists.

 

Competitive Analysis

Using the insights from our user interviews and observations, we performed a competitive analysis of the 9 scenarios above using 4 different music apps: Spotify, Soundcloud, Tidal, and Youtube Music. For each scenario, we chose an app that did the task well and compared it with an app that did not do as well. Below are some examples:

Good example of a flow for the scenario of creating a playlist for an activity (Spotify).

Good example of a flow for the scenario of creating a playlist for an activity (Spotify).

 
Good example of a flow for deleting a song from a playlist (Soundcloud).

Good example of a flow for deleting a song from a playlist (Soundcloud).

Less good example of a flow for the scenario of creating a playlist for an activity (Soundcloud).

Less good example of a flow for the scenario of creating a playlist for an activity (Soundcloud).

 
Less good example of a flow for deleting a song from a playlist (Spotify).

Less good example of a flow for deleting a song from a playlist (Spotify).

 

Information Architecture

After performing competitive analysis of different scenarios, we chose 3 music apps (Spotify, Soundcloud, and Tidal) to perform an information architecture competitive analysis on. We analyzed the information architecture for three levels into each app. This process helped us compare the way that information is laid out in each app as there is a large amount of information that needs to be organized and displayed.

Information architecture of Soundcloud

Information architecture of Soundcloud

Information architecture of Tidal.

Information architecture of Tidal.

Information architecture of Spotify

Information architecture of Spotify

 

Prototyping

In order to begin prototyping, we chose 2 scenarios to create. The 2 scenarios were: deleting a song from a playlist and creating a playlist for a specific activity. These 2 scenarios had the most pain points during our user interviews and observations.

Each member of the team created paper prototypes of their ideas for each scenario and then we came together and compared and analyzed each other’s ideas.

IMG_1740 2.jpg
25075358_1814338605242870_1242778152_o (1).jpg
 

Design Decisions

How to categorize the Discover page?

We decided to categorize the “Discover” page by presenting displays of brand new releases, a diverse range of genres to explore, and playlists based off various activities that may match the user’s mood. Part of our decision in deciding what to feature on the discover page was by discussing how it differentiates from the homepage for the user. Our homepage is intended to be personal towards the user and feature their music history along with suggested music based on that history. In comparison, the discover page is for the user to explore a newer and wider selection of music on the entire app.

How does a song get deleted?

During our interviews, we discovered that many users had trouble deleting songs off of a playlist on Spotify. One user didn’t even know that songs could be deleted off of the phone, and always went on her laptop to delete songs. This problem stems from the convention of swiping something left in order to delete. For example, deleting messages off of an iPhone is done by simply swiping left and this has become a standard convention for deleting. On Spotify, when a user swipes left on a song it is automatically added to the library which often confuses and frustrates users. Also, when a user on Spotify goes into the menu next to a song, there is no delete option. The only way to delete a song is by going into the overall playlist menu. This scenario came up several times in our interviews so we knew we had to make this function seamless and intuitive. We decided to incorporate the swipe left feature into our design as well as an option to delete in the 3 dot menu next to a song. This will allow the user to delete a song two different ways which should reduce errors.

What feedback?

In order to guide the design and information that would be displayed on the confirmation page after deleting a song, we referred to experiences from our interviews. We decided to go with a simple pop up menu after a song was deleted to confirm to the user that it was actually deleted. We also decided to include both the name of the song that was deleted and what playlist it was deleted from. This would guarantee that the user understands exactly what is happening.

Final Design

Home: The Home page is geared towards helping users pick up where they left. This page displays the most recently listened to music.

Discover: The Discover page is where the user can go to discover new music that they haven't already listened to. This page is not personalized to their history so they are exposed to new music with the option of choosing music based on a different genre or activity they are interested in.

Search: The Search page has a basic search functionality where users can type in the name or artist of a song they want to find.

My Collection: The My Collection page is a personalized page where users can view all the music they have saved such as personal playlists, followed playlists, and downloaded songs.

We used Adobe Illustrator and InVision to prototype our app. We created landing pages for each part of the main navigation and two user scenarios: deleting a song from a playlist and creating a playlist for a party. 

24623771_1808719082471489_1826298539_o.png
24739990_1809985095678221_1995479258_o.png
Screen Shot 2018-01-16 at 11.10.43 PM.png

Takeaways

This project taught me a lot about competitive analysis and the importance of this step in the design process. Although we created our own music app, we relied heavily on understanding already existing products and how ours was unique and improved upon the competitors. I also learned that competitive analysis can be a time consuming step as you must fully expose yourself to the competitor products. But in the end it is worth it in order to ensure you are improving upon what already exists, understanding conventions that may already exist, as well as creating something unique and innovative.