Playlist Generator

Summary

The Playlist Generator is a simple web app that allows users to search a song and an artist, and build playlists by similar genre, song, or artists. Users can listen to 30-second previews if available and view musical attributes of each searched track (energy, tempo, loudness, and danceability), which are used by the search to return similar playlists.

My Role

Deliverables


The Design Process

Framework & Interaction Design

To plan out the framework and interactions, I created user flows and created low-fidelity wireframes.

playlistgenerator_wireframes

User Interface Design

For the user interface, I used Materialize.css, a boostrap-like framework, to incorporate Google Material Design principles and elements.

playlistgenerator_UIkit

The Development

The Process

Once I built the basic HTML and CSS for the app (using Materialize.css as a framework and customizing it), I used JavaScript and jQuery to implement user search, pull song and artist data from the Echonest and Spotify API's, and populate the page with a generated playlist based on similar artists, songs, or genres with a 30-second song preview (if available on the database). I also used Echonest's API to pull data on each query's music components such as energy, tempo, loudness, and danceability.

Technologies used

Final Web App

Want to see the project? View my code on Github.

Try the App



Interested in working together?

I'm currently unavailable to take on new projects, but I'd still love to chat. If you have any projects or apps that needs some design love, I'd be happy to discuss with you about how I can help given my availability or refer you to other designers.

Let's Get In Touch

Other Work

Wearable heart health device and app concept.

View Case Study

Nutrition-based recipe search using Yummly's API.

View Case Study