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.
weekly slack thread
brainstorming development approaches
whiteboarding
Design
We used Figma to mock out the UX, focusing on ease of starting collections and adding songs.
homepage mock
collection mock
mobile mock
After some tweaks and functionality slimming we had a working experience that enabled users to create collections with songs from Soundcloud and YouTube.
local version of collection
local mobile web
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.
openrecord homepage
openrecord about
collection demo
collection mobile
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.
