SongMash

Front-end Design and Development
An app that creates collaborative Spotify playlists for you based on your most recent preferences.

Brown University SWE coursework

2019

Team Size: 4
It’s time for a roadtrip but you and your friends can’t decide which playlist to jam to. SongMash takes all of your combined preferences and curates the perfect playlist for you!

I worked on the design and development of the front-end for this project using a combination of Figma, Java, Javascript, HTML and CSS.

Introduction

For our software engineering final, we decided to build an application that curates a playlist for you and/or your friends. The idea was simple: you choose between two songs at every step of a brief survey and each choice gets fed into our machine learning model. This model combines your choices with those of your friends and creates a playlist just. for. you.

But Reet, why can't I just use my Discover Weekly or my friends make a collaborative playlist?

Well, your discover weekly is specific to you and making a collaborative playlist makes one underlying assumption:
you already know the song you want to listen to.

When generating choices and content for your playlist, SongMash uses Spotify's API to ensure that we don't pick songs already added to your library, combining the power of a collaborative playlist while discovering music none of you have heard before.

Interface Design

We needed the interface and the navigation for SongMash to be as simple as possible. I defined the following principles to prioritize when designing for the least amount of user effort:

Familiarity: if the interface was familiar to the user, they would have to spend less mental effort into understanding the interface, hence reducing possible errors.

Easy choices: For our k-means machine learning model, more data meant better output. However, we had to strike a balance between bombarding the user with questions while gathering valuable data. We concluded that the simplest choices will give us the most information without confusing or misleading the user.

Masking the tech: Users didn't need to understand the crux of our algorithm to get a personalized playlist. We had to mask the tech and keep the interface skeletal enough that it got the job done.

In the spirit of exploration, I came up with two possible ways a user could make selections on the app:

A binary choice: reduces mental load for user
A weighted choice: provides detailed data for recommendations

To choose between the two options, I conducted a quick A/B survey.

People largely picked the button interface, which was ultimately implemented

The Technical

Designing the interface wasn't my only challenge. I had to make sure I developed an efficient front-end that was smoothly connected to our back-end. My goal was rooted in the theory that good performance is good usability. Our back-end consisted of a machine learning model based on the k-means clustering algorithm. We created a vector for each song based on its attributes such as energy, danceability, acousticness, etc - all measures provided by the API- and clustered songs based on these features. Additionally, we had to build out a large database of songs and their properties using Spotify's API and maintain constant connection throughout the interaction. With constant GET/POST requests going back and forth, I had to make sure the users always received appropriate feedback and error messages when interacting with the front-end. To this end (pun intended), I added loading displays, text messages and error cues for when the back-end was running on a delay. One particular challenge for the front-end I faced was embedding an audio player that could communicate with our backend database of songs to play a 15 second preview of each choice on display. I addressed this by using Spotify API's Embed feature and keeping track of all the songs' embed links in our database.

The Output

To train our model and test our application, my team generated many playlists together.

One of the playlists my team members and I generated together to test our product

Summary

SongMash combines the power of a discovery weekly and a collaborative playlist by letting multiple users generate a playlist based on everyone's playlist. What makes this application unique is that it makes sure that all the songs being considered aren't already a part of the users' library of songs. Building using Spotify's API provided us with a powerful set of tools, from audio embeds to song attributes. The ability to authenticate a user's Spotify account and create a playlist directly into their profile was a neat touch that helped our platform have real-life applications.

Despite that, this project was ultimately a prototype that could be greatly improved. Under fewer constraints, I would make the interface be more visually appealing and incorporate motion design to add detailed interactions with buttons. I would also improve the flow for "rooms" - where multiple users wait until everyone has joined to create the playlist together. From the machine learning perspective, I would try to train the model more for better recommendations.

Ultimately, this was a learning experience that gave me the opportunity to explore developing with an API. We ran into many challenges ranging from making the application user-friendly to training the algorithm to be robust enough to provide useful recommendations. More than anything, I felt the joy of bringing new music to users that they would like and helping create a shared experience for multiple users at once.

<--- View Previous
Back to Top
View Next --->