Audioboard
Chrome Plugin & Web App
2024
Audioboard is a passion project of mine that I've been working on for a while. The concept is simple - it's like Pinterest, but for musicians.
Playing in bands over my teens and early 20s, I found that it was a nightmare trying to send specific samples to people and would often have crazy messages like "listen to the weird thing in the background at 0:30", which was often met with "I don't know what you're talking about" or "I don't have spotify".
Audioboard would be a single platform that is designed for listening to references for musicians, and could be a way for creators to help monetise music in the new, digital era.
Project Summary
Problem
→ Musicians, artists and producers have no designated place to store audio based stimuli like songs, samples, and sounds, so have to resort to downloading songs, and storing them in a folder on their computer.
→ When working with a band, producers will often be sent reference playlists that can be very long - most producers work on multiple projects at once, and can't be spending their time listening to entire playlists, just to hear specific parts.
→ Inspiration is key for musicians and producers, and they don't have access to the same stimuli as those in the visual arts
Approach
→ I started by speaking to producers and artists in the NYC area to try and find interest in my idea of an audio-based moodboard. I was generally met with positive reaction, especially among producers
→ I found through research, producers and musicians would love to be able to clip specific sections, whole tracks, and organise them relevant to the projects. They also believed that isolating tracks would make this easier.
→ I prototyped a very rudimentary version of the product, and it was met with praise, but it lacked the familiarity and affordances of hardware used by musicians.
Solution
→ I created "Pinterest" but for musicians. I visually designed the product to have clear parallels to the hardware used, from Apple Voice notes, to technical software like Ableton Live.
→ I designed an isolator feature that could be used to separate and further narrow down the reference clips.
→ I designed a modal and plugin for Google Chrome that allowed users to turn on and off relevent to their needs - eg. if someone is looking for samples on youtube, they can run it constantly, then turn it off when they're back to normal browsing.
→ 8/10 Potential Users really liked the idea as an inspiration tool. The ones that didn't, preferred doing things their way.
Role
UX Design
Brand Design
The plugin opened to full size on a Youtube page.
The Context
Artists and designers across all fields have a variety of different methods for retaining their inspiration. With sites like Pinterest and savee.it, there’s no shortage of places for artists to find, organise and retain their inspiration.
When it comes to musicians and producers, this is slightly different - the closest thing there is is Spotify or Youtube playlists, and it is increasingly difficult to mark references to audio, and the artists have to reference an entire song without being able to add comments or mark down and isolate specific moments in the song, or specific sounds.
Allowing pinpoint accuracy for notes on songs.
Saving time for producers is crucial - they don't have the time to be spent listening to entire playlists of references for one tiny part. With Audioboard we implemented a scrubbing feature that allows users to sample small parts of songs, and only send the relevant sections, as well as whole songs. This helps avoid the confusion as shown above - you can pinpoint it exactly and send it as a clip.
The original prototype version, prior to adding the button based functionality.
Variants of the plugin's different states.
Redesigning the UI for familiarity.
By testing the product using a figma prototype, we knew that it:
→ Was useful for artists and producers.
→ Was easy to use and understand.
However, they did have a few concerns:
→ It could mimic familiar practices from hardware/software.
→ It could have a button that is just held for a section to get small sections versus scrubbing
→ It could benefit from being able to isolate the instruments.
We redesigned the interface based on familiar hardware practices. The target audience are familiar with using recording interfaces, the iPhone voice notes UI and record and CD players. So we returned to the drawing board to see what we could implement, taking cues from Teenage Engineering, Akai, and Ableton.
Scope for further Accuracy, and addressing Piracy Concerns
The software is designed to be used for referential purposes, rather than to directly sample from, which is a concern with the isolation of instruments. To avoid this, we would not allow download of the mp3 or wav files.
Creating a Library and sorting References
Like Pinterest and savee.it, we felt from the start it was important to offer collections so that references could be sorted easily. Producers and artists will often be working on multiple songs or albums at once, and the ability to sort the references would further streamline their process.
Left: All Collections View
Right: Inside a Collection View
Isolator
Proposed as a paid feature, the Isolator allows user to go further in depth with their samples, and separating each instrument. This allows users to get further specific in their references for things like guitar tones, riffs, and basslines, as well as drum patterns.
The isolator was intentionally designed to mimic the interfaces used by Ableton, and GarageBand.
Anatomy of a single track of the Isolator.
