Skip to content
All work
Fight the New Drug desktop navigation with Learn, Get Help, Get Involved, and Presentations sections.
Fight the New Drug homepage headline: Revealing the harmful effects of porn. Empowering real change.
Ask FTND assistant button.
Fight the New Drug mobile homepage, from its introduction to research cards explaining the issue.
Brain Heart World

Watching should be the easy part.

Watching a documentary on your own and organizing a screening for an entire school are two very different experiences. I designed and built the website for Brain Heart World, Fight the New Drug's three-episode documentary, to support both: straightforward viewing for individuals and a paid licensing experience for schools and other groups, including agreements and gated access to special versions of the film.

Beyond the website itself, I redesigned how viewers unlocked the series, rebuilt video delivery when school networks interfered with playback, and improved reporting to see what happened after someone pressed play.

The Problem & Opportunity

The original plan was to offer a limited period of free viewing before moving the documentary behind a paywall. But once that free window closed, viewing numbers dropped sharply.

I adjusted the existing membership system to allow free account registration, removing the payment requirement while keeping the content gated. It was a quick, practical solution that made the documentary accessible again without rebuilding the site. That kept the original access controls in place, but creating an account was still more friction that process needed.

Other issues surfaced over time: rising streaming costs, playback failures on school networks, and reporting that couldn't reliably show what people did after reaching an episode page.

Experience Design

I designed and built the original WordPress and WooCommerce site, from landing and episode pages to checkout and access controls. I also wrote most of the copy, adapting Fight the New Drug's existing content for the documentary.

Private Viewing

At launch in 2018, private viewing was tied to an account, with WooCommerce membership rules controlling episode access. That same setup supported the initial free period, the shift to paid viewing, and the return to free registration without rebuilding the site.

Public Screenings

For schools and other groups, I built a separate paid licensing process. Custom fields product on the Woocommerce products collected event details that I used to generate PDF agreements, while tailored checkout templates and emails guided organizers through the purchase.

Membership rules dynamically displayed licensed screening materials, including classroom-length and topic-specific edits of the documentary, on the same central Watch page. Organizers could access everything their license included without navigating a separate experience.

Follow-Up & Engagement

I also connected purchase and access information, along with episode playback activity, to ActiveCampaign. This supported emails encouraging viewers to continue through the series, requesting reviews, and later inviting donations.

Screenshot placeholderThe individual viewing path

An episode page and its viewing state. Show where a visitor learns about the episode and starts watching.

Screenshot placeholderThe licensed screening path

Screening purchase, agreement, or licensed-materials access. Use a real or redacted example.

Making Access Easier

Once it was clear that private viewing would remain free, requiring people to create an account was an unnecessary barrier. I removed the page-level membership restrictions from the Watch and individual episode pages, while keeping paid screening access intact.

Instead of blocking the entire page, visitors could see the episode content with a simple email form over a dimmed video thumbnail. Submitting an email set a site-wide cookie, loaded the player, and unlocked all three episodes. The site remembered that access in the same browser for a year, so returning viewers could skip the form entirely.

This gave campaigns a more direct path to the documentary. We could link straight to the episode being promoted, where visitors could learn about it, enter their email, and start watching—all on the same page.

Interaction detail placeholderOne unlock, the whole series

New visitor → episode-page email form → unlocked player. Include the returning-viewer path that bypasses the form.

Video Delivery & Development

Vimeo's streaming costs had climbed with bandwidth usage, so in 2024 I moved the documentary to Bunny.net. The switch dramatically reduced delivery costs, but shortly after, a few licensed screening organizers reported that videos wouldn't play on their school networks.

I first configured a custom domain for Bunny.net's pull zone so streaming URLs used our own domain. That setup also meant giving up Bunny.net's built-in player and analytics, so I built a custom player using Plyr.

I later added Cloudflare as a fallback, giving the player three delivery options in order:

Bunny.net HLS → Cloudflare R2 HLS → Cloudflare R2 MP4

Playback errors or timeouts triggered a switch to the next source, giving the video another route when the primary stream failed.

Consistent filenames across hosting services also let me build a WordPress shortcode that identified each video once and automatically resolved its available streaming sources, rather than managing multiple URLs on every page.

Building the custom player also gave me direct control over playback events. I used these to trigger a review prompt when someone paused after watching more than 80% of an episode, and to send viewing activity to ActiveCampaign for follow-up.

System diagram placeholderThree sources, one player

Show Bunny.net HLS → Cloudflare R2 HLS → Cloudflare R2 MP4, with fallback on playback error or timeout.

Viewing Analytics

A visit to an episode page doesn't tell you whether someone watched—or how far they got.

Instead of relying on the hosting platforms for analytics, I used the custom player to send events into a reporting system built for the documentary. It tracked email unlocks, playback starts, and viewing milestones for each episode. The reporting also distinguished between newly unlocked viewers, returning free viewers, and licensed screening sessions.

This gave us a clearer picture of episode progress and drop-off alongside campaign activity, without treating every unlock as a completed view.

Analytics screenshot placeholderFrom unlock to actual viewing

Use a real report with a defined date range showing plays, viewing milestones, and drop-off by episode or access type.

Results & Impact

The site supported two distinct viewing experiences without complicating either one. Individual viewers could unlock the entire series from any episode page, while licensed organizers had access to their screening materials in one place.

  • More resilient playback. The layered player could automatically switch delivery sources after an error or timeout, giving the documentary another way to play when the primary stream failed.
  • Clearer viewing data. Reporting separated page visits and unlocks from actual plays and viewing progress, giving the team a better picture of episode engagement and drop-off alongside campaign activity.
  • Much lower streaming costs. The former Vimeo contract cost approximately $11,000 per year. At reported usage, Bunny.net and Cloudflare cost about $31 per month, or roughly $372 annualized—97% lower. These figures reflect different usage periods rather than a like-for-like savings comparison, and the new services remain usage-based.

Reflections & Learnings

Just because the original membership system worked didn't mean it was the best experience. We could have kept requiring account registration, but replacing it with a simple email unlock removed unnecessary steps and gave campaigns a direct route to individual episodes. In this case, improving the experience meant removing a requirement I'd built the original viewing experience around.

Connecting the viewing experience, licensing workflow, delivery system, and analytics helped me think about the whole journey rather than treating each piece as a separate problem. Fixing playback, for example, also opened the door to better reporting.

If I revisited the project, I'd automatically unlock episodes for viewers clicking through from our emails, removing one more barrier to watching and helping turn more clicks into actual views.

✳ Let’s make something useful

Got a good
"What if..."?

A role you think I’d fit. A project that needs figuring out. A conversation worth having. I’d love to hear from you.

A rough idea is plenty to start with.