Will Harding Avatar

Responsive Podcast Directory

The recent growth in podcasts consumption necessitated a change to some of NPR's oldest code.

BRAND: NPR

ROLE: Product Design

NPR has always been one of, if not the biggest, providers of podcasts. With the expected success of their newest podcast Invisibilia, NPR wanted to update their own podcast directory.

The previous design for the podcast directory was one of the last remaining areas of NPR that was not responsive. So, of course one of the core goals of this project was to make it usable at any size. This also offered an opportunity to improve on the usability of the pages as whole.

Podcast Directory at Small Breakpoint

As I started the project I dug through all the analytics data that we had. One of the most important things I initially learned was that a large majority of our traffic came to program pages rather than the home page and the bounce rates for those pages were very high.

I had a couple hypotheses for why this might be true and attempted to solve for both of them. The biggest being that other than the standard architecture of the page there were no other clear choices of where to go next. To solve for this, I recommended adding links to related podcasts, podcasts of the same topic, and all podcasts from that provider. Another problem with these pages was that most of the podcasts didn't have the ability to listen to audio. Thus, the user was left with two choices, subscribe to the podcast (which was done off site) or leave the page. One of our solutions was to add episodes to the pages where possible (at launch this meant only for NPR podcasts) and give users the ability to vet their interest in the program.

Podcast Program Detail

One of the other challenges of the site was that podcasts provided to NPR's database from our member station often did not include logos. The former designed used a fallback piece of art for all those logos. Unfortunately, maintaining that logic made all those logos look like second class citizens when next to an NPR podcasts. To solve for that I recommended building an aesthetically pleasing logo using CSS.

Station Podcasts

For users who did end up on the home page of the directory, I wanted to make discovery as easy as possible. To solve for this we included some simple browse tactics that lead users to the most populated topics, their local member station's podcasts and the top podcasts as picked by an NPR editor. The other main feature was a type ahead search feature. This search would allow users to search topics, providers and titles and see suggested results after only three characters.

Type Ahead Search