SPOTIFY MASHUP

A Spotify feature that allows users to make personalized mashups.

TIMELINE: 1 Week, Fall 2020
Product Design, UX/UI Design
TOOLS USED: Figma, Photoshop, Illustrator

BACKGROUND

Have you ever only liked one portion of a song and wished that you could only listen to that one snippet without having to go through the arduous process of skimmming through the entire song and finding the exact timestamp every time? This was a common problem that I, as well as the rest of my music-loving friends, encountered.

According to Google, a mashup is "a creative work usually in a form of a song, created by blending two or more pre-recorded songs, usually by superimposing the vocal track of one song seamlessly over the instrumental track of another". I always wanted an easy way to combine certain snippets of tracks that a normal playlist could never do. And in the age of music streaming, downloading music and manually creating mashups is troublesome.

This project is what creating mashups might look like on a popular (and my favorite) streaming platform, Spotify. I realize that there may be some issues with copyrights, so this design is purely speculative (and fun to create).

PROBLEM

HOW CAN WE IMPLEMENT A MASHUP FEATURE TO SPOTIFY?

We need a throwback to the late 1990s.

OPPORTUNITY

The MASHUP FEATURE allows users to mix and match different clips of their favorite songs to create the ultimate mashup.

Mashups offer full creative freedom that normal playlists can't.

CHALLENGES

Users must be able to easily and intuitively create, edit, and listen to a mashup. The experience of creating a mashup must have distinguishable differences from creating a playlist.

USER RESEARCH

IDENTIFYING THE TARGET AUDIENCE

Since Spotify's user base is diverse in all backgrounds, so there's a lot of factors to consider when implementing a new feature.

Source: Kommando Tech


From the above findings, I found it interesting that Millenials made up more than 50% of Spotify's users. However, I wanted to go deeper into the age question. Thus, I found this chart that shows Spotify usage by generation:

Source: Music Business Worldwide


Gen Z-ers and Millenials stream the most music. This was valuable information because mashups exsited alongside with Millenials and I figured it would be a perfect way for both generations to connect through the creation of mashups on Spotify.

I also wanted to know more about users and playlists:

Source: Jose Angelo Gallegos


I was plesantly surprised to find out that a large amount of users listen to User Generated Content, confirming that Spotify is community based and values individual user creativity. Perhaps the same sentiment can exist for mashups!

ASKING QUESTIONS ABOUT MASHUPS

I also wanted to know what my peers thought of the idea, just to get more insight on how valuable this feature might be. I asked them a couple of questions on mashups:



My peers responded:



I also searched up how often the word 'mashup' was searched for on Google. Additionally, I looked up the stats for 'remix creator', since many know mashups as remixes:




From the data, it's pretty evident that mashups are a niche interest. But, with content creation being on the rise, I can imagine that implementing the feature on Spotify can increase the interest, while providing a feature that is completely unique from other music streaming apps.

RESEARCH SYNTHESIS

Based on the research above, I created a user flow on how I imagine a user would navigate the mashup process:



The process is fairly similar to creating a playlist, sans trimming the song.



Here's how it works:



User goes to song menu/settings.

User selects which mashup to add to.

User "snips" song, by adjusting sliders. Red line determines where the user is at in the song. They can also play the snippet.

FURTHER EXPLORATIONS



I wanted to explore what the UI might look like if the user creates the snippet based off of the soundwave of a song. If the user knows where a song lowers in volume, it might make it easier for them to accurately snip of their desired portion. However, I decided to scratch that idea as it seemed redundant and finding the time stamp is just as useful.

Here's what the mashup page would look like:

  • Top portion of mashup page UI remains the same as the playlists.
  • I kept the "ADD SONGS" button due to its intuitiveness for users.
  • "Bubble" design allows users to differentiate snippets from each other, but still allows seamless transitions between songs. Red line determines where user is in mashup.
  • Order of the bubbles is according to the featured songs in the mashup. While the mashup is still seen as a single entity, it's still important for users to know what song each snippet is from and allow them to like the original song.
  • Reccommended songs feature allows users to easily add similar songs to mashup.

User taps on "bubble" of snippet and information about the snippet, like what song it came from, appears. The user can also delete, move, or edit or "re-trim" snippet. A user can also move snippet by holding on it and dragging it to its desired place.

When user decides to move snippet through the menu, this frame appears to educate the user how to move snippets efficiently.

The user then can move each snippet in the edit mashup menu.

TAKE-AWAYS AND CONCLUSIONS

Thanks for reading my design process on implementing mashups for Spotify! Even though this may be speculative, it's fun to create hypothetical features for apps that already exist. This is my interpretation for redesigning the Spotify app, even if the redesign is just the simple addition of a feature. I recognize that this feature may be a niche interest for users, but I believe it's important to explore all ideas, even if they may not be possible. Innovation is what drives products to be better and failure is not a set-back, but rather progress.
What's next?