All work
Case study Music platform

Rapper Radio

Rebuilding a Chance the Rapper platform so independent artists can get seen, heard, and known. And so the team can run it without a developer.

Role
Design & Development
Year
2019
Client
Chance the Rapper · Nice Work
~7s
faster page loads than the previous Firebase build
300+
cities filterable at once — past Webflow's 100-item list limit
0
developers needed for the team to add artists, songs & stations
Overview

Chance the Rapper's team approached me about a project called Rapper Radio, a platform built with one goal: help independent artists gain exposure on the radio and on digital platforms.

The first version was built in-house and helped Chance's "No Problem" reach number one. But as Chance began work on "The Big Day," the team needed to rebuild it with the goal of making it easy to add artists, songs, radio stations, and playlists, while keeping page loads fast despite a huge amount of data.

"Rapper Radio gives you the ability to be seen, heard, and known… Now it serves as a multi-faceted platform where people can request their favorite songs to be heard on playlists and radio stations."

— Chance the Rapper & team
The problem

Great design, slow site.

A second version was already in testing on Firebase. The Nice Work team's design and concept were outstanding but with that much data, performance suffered. Load times were north of 8 seconds.

On top of speed, the team needed the platform to be effortless to maintain: adding new artists, playlists, providers, and radio stations couldn't require an engineer every time. And it all had to ship in a short timeframe.

  • 8s+ load times on a data-heavy site were hurting the experience.
  • No self-serve updates so every content change leaned on a developer.
  • A tight runway to relaunch without losing the original look and feel.
The solution

Rebuild it on Webflow.

I sat down and mapped out the data first. The set was extensive, and once I understood how it all related, it was clear we could build this and meet their time frame. Webflow was the choice for two reasons: its data structure could handle the volume with great performance, and the team could edit and add content themselves.

Rebuilding the original designs was the natural part. The real work was making sure every page pulled the correct data and stayed easy to update. The requirements:

  • A city filter so users find requests where they live so each city can have multiple radio stations.
  • Auto-composed tweets from a station or playlist that pulls the right Twitter handles, song name, and a link back to Rapper Radio.
  • Tabs for each digital platform. Spotify, Apple Music, Amazon Music, Tidal, and Pandora.
  • Rich song pages: album art, artist avatar, a SoundCloud preview, social links, and a dropdown of the artist's other tracks.
  • A share count on every track, used to rank songs across the site.
Under the hood

How it came together

The CMS was central to the whole build. There were eight collections feeding every view, with custom JavaScript filling the gaps Webflow couldn't reach alone.

Map the data into 8 CMS collections

Cities & Stations, Songs (with multi-reference fields per provider), Artists, and a playlist collection for each platform composed the structure that powers every page.

Webflow CMS

Rebuild the original designs, faithfully

Taking Nice Work's concept and reconstructing it in Webflow — the most natural part of the project, and where the speed gains started.

Webflow

Custom JS to break the 100-item limit

Over 300 cities needed to be filterable at once, but Webflow lists cap at 100 items. I wrote custom JavaScript to filter all 300+ without pagination.

JavaScript

Auto-composed, shareable tweets

I combined Webflow's dynamic embeds with social-sharing code I'd written, so sharing a track or playlist composed the right tweet with no developer required to change it.

JavaScriptDynamic embeds

Share counts & rankings

A count increments every time a track is shared, then ranks songs across the site. A small custom app kept counts in sync with the Collection to avoid API rate-limits during high traffic.

JavaScriptWebflow API
The result

Faster, and fully in the team's hands.

The result was a pleased Chance the Rapper, a happy Nice Work team, and a new platform with real performance gains. Compared to the Firebase version, the Webflow build loaded around 7 seconds quicker and the team can update the platform themselves, with a clear path to add future functionality through other no-code tools.

"Matt and Ben are killers."

— Chance the Rapper, on the review call
Visit rapperradio.com