More than a podcast feed.
I designed and built the website for Fight the New Drug's Consider Before Consuming podcast in 2019, from its animated introduction to the episode pages and listening experience. As the podcast evolved, my work expanded behind the scenes. I developed a custom audio player and built reporting and tracking tools that gave the team better visibility and control over advertising.
The Problem & Opportunity
A podcast can reach people through plenty of channels, but the website needed to do more than provide another play button: give the show context. It needed to introduce the show's perspective, help people discover individual episodes through search, and give curious listeners somewhere to go next.
The site also needed forms for guest and sponsorship inquiries, while the team needed to prepare and schedule episode pages in advance.
In 2025, we moved audio hosting from Simplecast to RedCircle to support dynamic advertising. That brought two opportunities: a player that felt like part of the website and a way to see which episodes carried which ads, beyond the aggregate totals available at the time.
UX & Interface Design
Introducing the Show
Working within a visual identity created by another designer, I adapted an existing video script into a roughly 30-second introduction to the show's name and mission. I chose the imagery, shaped the pacing, and built the motion with JavaScript and CSS.
Recording of the approximately 30-second mission animation, showing its original pacing, imagery, and motion.
Giving Each Episode a Home
I designed episode pages to be useful whether someone arrived through search or already followed the show. Descriptions and expandable transcripts helped people understand the conversation and find it through search. Related episodes, Fight the New Drug resources, and guest-specific links gave them a way to explore further.
Recording of the approximately 30-second mission animation, showing its original pacing, imagery, and motion.
Visitors could listen on the site, watch video versions on YouTube, or follow the show on Apple Podcasts and Spotify. The website also provided ways to donate and contact the team about guests or sponsorships.
Publishing & Player Integration
In 2025, we moved audio hosting from Simplecast to RedCircle to support dynamic advertising. Its standard player didn't fit the website's design, so I built a custom player with Plyr that did.
I connected it to the podcast's RSS feed, matching each episode page to its audio by episode number, or RedCircle episode ID for bonus episodes. Staff could schedule pages in advance, and the player would load the audio once it appeared in the feed.
WordPress episode page prepared and scheduled → RedCircle episode released → RSS feed updated → custom player matches the episode number and loads audio. Use a real example if possible.
Ad Reporting & Tracking Tools
RedCircle showed aggregate ad totals, but the team also wanted to know which episodes each ad appeared in and when. I built a SvelteKit dashboard backed by Supabase, using tracking URLs to show episode-level placements with filters for ad and date.
Manually assembled tracking URLs had also caused reporting errors, so I built a formatter that generated a ready-to-use RedCircle URL from an ad name.
Results & Impact
For listeners: A place to discover and explore the show. The site brought the show's perspective, episode descriptions, transcripts, playback, and related resources together instead of treating each episode as just another audio embed.
For publishing: A custom player that fit the site's design and automatically loaded episode audio from the RSS feed, letting staff schedule pages without manually updating embeds.
For the team: An episode-level view of ad placements and a more repeatable way to set up tracking URLs.
Reflections & Learnings
Moving to RedCircle didn't mean starting over. The platform handled hosting and ad delivery; I could focus on making those capabilities fit our website and publishing process rather than trying to replace them.