The brief

Build an interactive experience where fans could search and listen to Soulection's 700+ episode archive, as well as an admin portal for the Soulection team to add new episodes going forward.

Research

We looked at a number of other internet radio stations and conducted a handful of user interviews. In our interviews, we asked people what they felt was missing from existing internet radio sites. The features that came up the most were

• 1. Tracklists with clickable timestamps
• 2. Searching by artist/track/DJ
• 3. Persistent audio player

We also looked at traffic analytics on Soulection’s main site and found that over 85% of users were on mobile.

Process

We started by putting together a mobile-first prototype in Figma. We iterated with the Soulection team until we landed on a final site structure. The site would have a home page that showed featured episodes and trending tracks, a search component, episode pages with track lists, and a persistent media player connected to the Soundcloud API. On the back end, we were to build a CMS so that the Soulection team could add new shows, as well as a database that would contain all the show information.

For the final design, we extended Soulection’s existing brand identity to create a minimal, monochromatic layout that emphasized artists and episode artwork.

In actually building the site, the first step was to ‘backfill’ all episodes dating back to 2011. Instead of having someone from Soulection manually upload each episode (as was the original plan), I wrote a script that scraped episode data from sites like Soundcloud, Bandcamp, and Mixcloud and automatically propagated them to our database.

In order to create a media player that would persist across route changes, we made use of React Context and the Soundcloud API. In other words, listeners could freely explore the site while listening to an episode without interruption.

The feature I’m most proud of is the deep search and artist metadata pages. A problem I often have with DJ sets is they sometimes obscure (sometimes intentionally) the artists that actually made the music in the set. The Soulection team and I were on the same page in that the spotlight should be on the artists themselves. To achieve this, Soulection Radio automatically creates artist pages for every artist featured in a show, where artists can see which of their tracks have been played as well as which episodes they’ve been featured in.

Outcome

Soulection Radio saw close to 30,000 visits in its first week, prior to even having been publicly announced. The project was overall well received, and was the first in a series of collaborations between Finetooth and Soulection.