OpenRecord

Idea: Collaborative Music Collections

Role: Creator, Product, Frontend

Team: James McNamara, Osebo Akhigbe, Chas DeVeas

Tools: React Hooks, Typescript, GraphQL, Node

Timeline: 2018

Background

It started with a problem experienced while throwing a party with friends. I wanted to create a playlist of music for the event and asked everyone if they would contribute. Problem was, not everyone had a Spotify membership and most just ended up sharing various song names or YouTube links.

Problem

I wished there was a way to easily create party playlists with friends without having to log in, while still having access to all of the best music.

Question

How could we make it simpler for music lovers to create playlists with others?

Solution approach

I’ve used the react-player npm package before on other projects and knew it was capable of rendering YouTube and Soundcloud embeds. If we could query tap into those libraries we’d access endless content and could build a fluid UI on top.

Research

When I worked at Ad Hoc, the team had a Slack channel where we'd share music in themed weekly playlist. It was the perfect crew to ask about their music collection habits, so that’s what we did. Those discussions drove our initial user flows and information architecture.

Design

We used Figma to mock out the UX, focusing on ease of starting collections and adding songs.

After some tweaks and functionality slimming we had a working experience that enabled users to create collections with songs from Soundcloud and YouTube.

Development

Throughout development, we sought feedback from friends and teammates and work. Over time we refined the messaging and user experience to help users discover other collections and make each song stand out during playback with dynamic colored backgrounds.

Reflection

Open Record was my first open source project and I really enjoyed being able to rapidly share and get feedback from other creators. Further, working with more experienced developers pushed me to learn new languages/tools like Typescript, Hooks, and GraphQL.

Open source comes with its own set of challenges. Keeping everyone on the same page and working towards a clear goal is difficult when contributors are transient. Naturally, there are parts of the product that one person champions and it can be difficult for someone else to pick up and continue that work.

A great experience all around and I’ll definitely be contributing to more open source projects soon.

Site Info

What is this?

Ryan Luu's Portfolio & Blog

Why does this look familiar?

The design mimics Dropbox Paper. It's what I use to organize my daily process, so I thought it would be a fun challenge to recreate it's ux from scatch for my personal site.

How was it built?

This site was custom coded with React Hooks and Gatsby. I included a few unique features that I enjoy, like hovering over videos to initiate playback.