Savage Lovecast Animated Hero

Greetings from the land of googling NSFW keywords for work!

A few years ago we launched the web application for Dan Savage’s Savage Lovecast podcast for The Stranger, “Seattle’s only newspaper.” Since that initial launch we’ve released a few rounds of updates but the app was due for a more substantial refresh, (on both the design and development side).

Kickoff: Establishing their goals

  • Update site
  • Switch payment systems
  • UI redesign

As part of general housekeeping, we upgraded the technical underpinnings of the app to the “latest and greatest.” We also changed payment providers. With the UI redesign I dove head first into understanding the competition, the app market, content strategy and SEO best practices, which paved the way to presenting a list of features, both in scope and out of scope.

Savage Lovecast Features

We narrowed down the feature set to what could be completed in this phase and created epics of how we thought we might best break down the work. And thus started the journey of me having the most shocking public facing computer screen Substantial has ever seen.

As we all know the very lovely Dan Savage can be a bit risqué with his content on all of his public media. Because of this, I had a strong desire to push the envelope a bit and create assets that are playful and fitting for his many NSFW topics.

Savage Lovecast has two versions of their podcast; Micro (the free version) and Magnum (the longer, subscription based, ad-free version). With the two episode options there was an opportunity to differentiate the two, an idea supported by the competitive analysis. Naturally, I couldn’t resist branding them.

Micro vs. Magnum Branding

The Stranger team loved them! But we all were wondering if it should feel more inclusive? So a larger discussion in our design review involved throwing out other sex toy objects that I could incorporate. Some incredible quotes from that session:

“What if it was more of a vibrator than a condom?”

“Add an electric wire?”

“Electric wire?! How old are you?!”

“Maybe it should be a butt plug! …Everyone has a butt.”

Somewhere amongst these verbal gold nuggets animating the Magnum icon was mentioned and my eyes LIT UP, with my creative flood gates opened up. There was no stopping me.

Magnum Branding Animation

I began playing around with layouts that would ultimately become the final redesign of the web app. I started with the homepage and began colorblocking the areas where specific content could live. This led to multiple layout versions and evolved to the final design.

Home Page Evolution

Savage Lovecast Wireframes

As more of the web app was being designed and built out I felt that the Micro/Magnum brand could be extended even further to include cheeky illustrations that would not only be sprinkled across the site, but would push the NSFW envelope even more. When I say I wanted to push the envelope, I mean I was going to go until they tell me I’ve gone too far! Because really, WHERE IS THE LINE?!

Savage Lovecast Illustrations

Between the in-depth discovery phase, the updated backend, the redesign, and build, the entire internal team had a lot of passion and pride for the project. We found ourselves regularly giggling at the designs and illustrations that were created, which kept the overall morale high and I feel like that’s all anyone could really ask for within a project. Sex toys and innuendoes.