Doug Roche
Get In Touch

Collaborative YouTube Playlists Application

UX Design | Code
Collaborative YouTube App Screenshots in phones
My Contribution

I helped wireframe, test, and implement the UI. I was responsible for creating the simultaneous YouTube player experience using Socket.IO. I set up the Express web server and integrated the UI and database.

Paper prototypes, Wireframes, Usability Testing, Javascript, Node.js, Socket.io, MongoDB & Mongoose, Handlebars.js, YouTube API

TEAM: Charles Aweida, KeVon Ticer

Designing a shared YouTube player experience to collaboratively create and curate playlists of videos.

Choosing what music to play in groups can be a pain (note: this is before Spotify took off). This is what inspired me to create this application with Charles Aweida and Kevon Ticer. Our application is a cross-platform mobile web application designed to let groups of people collectively build playlists of YouTube music and videos. The Reddit-like upvote downvote system keeps only the music that everyone wants to listen to at the top of the queue. Simply plug one phone or computer into a set of speakers and everyone can contribute by logging into the app. I created this application while at Carnegie Mellon University for an elective term-project.

Concept

My teammates and I all could relate to situations where it would be nice to have an easy way to collaboratively create a playlist of music. This could be handy for:

  • Parties or group settings
  • Driving in a car with friends
  • Sharing music with others

When we pitched our idea of combing a shared YouTube video player experience with an upvote/downvote system to other people they seemed to appreciate the idea.

Choosing YouTube

One concern was whether using YouTube was the best choice for a music catalog. Most people don’t regularly use YouTube to listen to music. However, we chose to use YouTube’s API for two main reasons:

  1. It offered easy access to nearly every song anyone could think of.
  2. The idea of creating a shared video experience was intriguing enough to explore.

Application Flow

We approached the design of our application with a focus on defining a MVP feature set due to the time constraints put in place for our class. With this in mind we identified the following key actions users would need to be able to accomplish:

  • Enter/create a shared "room" for listening to music
  • View the current video
  • View the current playlist
  • Upvote/downvote videos
  • Search for/add videos to the playlist
  • Invite friends to room

Wireframes for full application UI

After outlinig the high-level tasks and flow we started sketching and building wireframes which can be seen below.

wireframes of app flow

First Iteration of a Shared "Room"

Our originally designed version of the "room." The video player and playlist are in the same view, with a top button that shows/hides the video player. This interaction did not test well. Searching is accesible from the top right button. There was no friends/current room members view built into this version.

current layout for room ui

Second Iteration of a Shared "Room"

New tabbed layout for the "room" allowing for easier access to all of the features of the room (video player, playlist, search, friends). The video player and playlist views may eventually be combined.

new layout for room ui

Back Home To View Other Work