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

Spring 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 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 just 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 wish 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 it 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 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.

I came up with two possible ways a user could make selections on the app:

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

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. 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.

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