Project | MetaMusic Web App — Michael Anderson

Overview

For a class project, I created an interactive web application that allowed users to search Spotify’s music library based on ‘meta’ values of the music (dance, energy, tempo, etc). I implemented my design using javascript, jQuery, with the echonest API and Spotify API.

Problem: Searching Music by Abstract Qualities

While spending time with some friends, I noticed a friend skipping over several songs until they found one that suited their taste for that moment. The reason they gave for skipping the songs they skipped was because "they weren't dance-y enough." From these informal observations, I was inspired to create something that addressed the desire to search songs relative to their meta attributes.

"I skipped songs in my playlist until I found on that was 'danc-ey' enough to play.” -Casey B.

Persona: Defining the Target Audience

To guide my design, I created a persona that captured the needs, wants, and capabilities of the audience for which I was designing. The key assumptions the persona embodied was users that frequently listened to music and were tech-savvy.

Ideation and Sketches

Drawing inspiration from the persona, I sketched several rough outlines of what I envisioned the interface could possibly look like.

I received feedback that having different controls may make the interface appear to be disjointed (seen in Idea 2). I resolved to unify the interface by using the same control for attribute. I also researched what databases where available and contained information about music that I could use for my web app. Echonest had an enormous, searchable database of music and contained some meta information about each song.

How it Works

Below, I created a diagram explaining how my web application works.

Interface: First Iteration

Using the HTML,CSS, and javascript, I implemented an initial prototype. Users could scroll over each of the dials to alter the value. Pressing the search button returned a static text list of songs.

I conducted informal user testing and found that users enjoyed interacting with the dials. However, the search button was difficult to see and the search returned a list of the songs that wasn't playable. I found that the I could use the "play button" by Spotify to return a playable list of songs to the user. I also altered the color scheme and changed the search button into a play button icon.

Interface: Second Iteration

After conducting informal user tests with the second iteration of the interface, I found that users had to scroll down the page after conducting a search to view the results. I decided to alter the interface so that the controls and search results appeared side by side as opposed to on top of one another.

Interface: Third Iteration

The third interface was the most delightful for users to interact with. However, the concentric rings presented a new challenge for users to understand what each ring represented. Users who had previously interacted with previous versions were able to easily understand what each concentric dial represented. First time users required more time to understand how the interface operated.

Challenges and Next Steps

Time constraints played a major role in this project -- I was not able to implement several features because the timeline of class didn't permit it. Going forward, there are several clear next steps:

Allow user to choose control display: because the separated dials are easier to understand (iteration 2), the next iteration I implement would include a landing screen with dials separated, but the ability to enter a mode with dials overlaid (third iteration).
Dials turn to visualizer: once a user hits a play button for a song, I'd like to implement code that makes the dials behave as a music visualizer through the duration of the song.
User can turn on/off dials: allow users to turn off dials they do not care about so they could search by fewer than five values.
Scrollable results list: implement solution that enables users to scroll through list of results.