8tracks

Designing for Explorers (2010-2016)

8tracks is a music-streaming service centered on the creation and sharing of user-curated playlists. Its premise is simple: music fans create playlists of 8 or more songs, then add a title, cover art, description, and tags to describe the genres and moods therein. Listeners find these playlists by browsing and combining those genre, mood, and artist tags, then following the DJs whose taste they like for a steady stream of new mixes.

8tracks launched on 08/08/08, and from that day until my departure 8 years later, our small and dedicated product team - generally 2 backend developers, 1 frontend, 1 dedicated developer for each native mobile app, 1 product manager, and 1 designer - operated on a total of $3.5 million in funding. We built apps for web, iOS, Android, and XBox, and created integrations with SoundCloud, BandCamp, and Sonos.

As of 2016, the service hosted 2.5 million community-created playlists and 2 million monthly active listeners. 8tracks was purchased by BackBeat Inc. a few years later and continues to operate under new management.

Introduction

8tracks: Constraints & Challenges

8tracks operated and paid royalties under the dearly-departed Small Webcaster License, in accordance with the Digital Millennium Copyright Act of 1998. This meant that in order to stay legal, we had to design the product to abide by the following constraints:

  1. Each playlist had to be > 30 minutes in duration (approximately 8 songs worth of content, hence the name 8tracks!)

  2. On-demand listening strictly forbidden (i.e., a listener cannot call up a specific song by a specific artist at will)

  3. Track skips must be limited limited and apportioned according to listening time

  4. A tracklist cannot be displayed to a listener in advance of listening

Given these constraints, our resource limitations, and the endemic challenges of social sites, we were left with an interesting set of design challenges:

  1. Adapt new listeners to the unique nature of the service

  2. Emphasize our greatest strength - human curation

  3. Make parsing a huge database of playlists fast, fun, and easy

  4. Work effectively with the inherent fuzziness of user-controlled playlist tagging

New User Landing Page

Given the imperative of growth in what was an increasingly competitive music streaming landscape, we had to make sure that we met all 4 of those challenges when a new listener landed on the site for the first time. And since the majority of them reached the site via organic search - e.g., querying a search engine for something like “minimal techno mixes” - the logged-out tag page was where we had to do it.

When a new listener arrived, the first order of business was letting them know that whatever they were looking for, we had tons of it. So we led off the page by showing the count of available playlists for that page’s tag, and placed a collapsed search input just to its right to provide an easy way to select a second refining tag without overwhelming the user with our standard, logged-in data-dense tag cloud. This made for an easy, light, and optional first touchpoint with the combinatory 8tracks browsing interface.

Per analytics, we also knew that new user retention was most highly correlated with clicking a play button on their first visit, so we put a big "PLAY ALL" front and center that could get the music going immediately.

For pickier listeners, we gave a condensed look at the depth of the service through a carousel of the most popular playlists featuring the page’s tag, focusing on one mix at a time in order to reduce the noise of the site-standard vertically scrolling list view. Again, the idea was to ease in the new listener, and making clicking “play” as frictionless as possible.

Logged-in Tag Page

For returning listeners, the top level tag page takes its standard form. Beneath the direct input combinatory search UI, we display a tag cloud of the genres, moods, and artists most associated with the top-level tag.

In this case, with “minimal techno” selected, the tag cloud displays all the artist, genre, and mood tags most associated with “minimal techno.”

After selecting a second tag from the cloud, say “ambient,” the search results then display playlists with both tags - “minimal techno” and “ambient” - and the tag cloud updates again to show the artists, genres, and moods most associated with this more aesthetically precise combination. Lastly, the blank search tag is always available to the right of the selected tags to allow the listener freeform entry of any tag they chose.

In this fashion, a curious listener could start from any point of entry and go as narrow or far afield as they like through free-flowing combinations of tags and artists.

Playlist Page

Playlists on 8tracks contain at least 8 songs selected and arranged by the DJ, then categorized via the mood and genre tags we discussed above. The addition of artwork, notes, and a title help to define the playlist's aesthetic, and the track annotation feature allows the DJ to add a running commentary on a song by song basis. Similar playlists and “Collections” curated by other listeners which contain this particular playlist are listed in the sidebar to aid further discovery.

From a designer’s point of view, easily the most fun element of working on 8tracks was the endless stack of incredible user-generated playlist art. So much of the site’s aesthetic and appeal - both to DJs and to listeners - was centered here.

To get as much out of it as possible, and to make each playlist-page as unique and faithful to its creator’s intended vibe as we could, we took a flexible, “content-aware” approach to the palette of each page, sampling colors from each image and using them to construct a blurred gradient for both the music player and various page background elements.

DJ Profile Page

The profile page is pretty simple and relatively pro forma for a community-based site with a Twitter-style unidirectional following model.

It contains a user's name, avatar, bio, and follower/following info, lists of their published playlists, liked playlists, playlist collections, and, most interestingly, favorite tracks.

In the favorite tracks tab, we were able to provide YouTube links along with each song favorited by the DJ, which created a sort of back-door on-demand functionality for listeners who felt like putting their favorite new find on repeat - a bit of an echo to the SoulSeek days of old..

8tracks on Chromecast

My favorite implementation of the content-aware design approach was in the simplified UI and large-format presentation of the 8tracks Chromecast extension.

iOS App

8tracks iOS 3.0 was released in May of 2014. As of December 2015 when I left the company, it had an average 4.5 star rating on the Apple App Store with a lifetime total of over 12,000 individual 5 star ratings.

Here’s a review from The Next Web released on the day of the app’s 2014 release.