A Technical Case Study: Kevin Smith, SModcast and The Uprising Creative

A couple of days ago, Direct-To-Fan went next level with Kevin Smith. Today we go next level behind-the-scenes with a technical case study presentation from The Uprising Creative’s Jeff Nicholas. Jeff talks about living the dream, getting to work with people he admires, spending money on the right things when developing a killer site, his love for WordPress, Soundcloud and of course Topspin. We can’t thank Jeff and the entire Uprising team enough for the absolutely incredible, smart and elegant approach they took to this project and we’re honored to be working with them.

If you follow us on Twitter or are fans of Topspin Media’s in-depth blog entries like we are, you’ve no doubt read about the new SModcast site we just launched for Kevin Smith. It’s a pretty in-depth mash-up of existing 3rd party services and platforms that we put together to help take the SModcast podcast network, and the new $Modcost subscription service, to the next level – without spending an unnecessary amount of excess money or time.

The bottom line? The message? You don’t need expensive, proprietary software to develop your own web-based membership network. Or any kind of media rich user experience. There are some amazing off-the-shelf solutions that, when combined, can create some pretty rich results. It doesn’t hurt to also have a rabid fan base, great content, and, well, us building it for you. Just sayin’.

Here’s a little bit of the “How” and “What” of the new SModcast.com.

—

(But first, some Kevin Smith love and backstory…)

(click to enlarge)

We’ve been fans of Kevin’s films since Clerks, a movie that has, and always will, rank among our all time favorites. Speaking for myself, Clerks, Chasing Amy, Dogma, Mallrats – these were movies that shaped a lot of my views as a rebellious, inquisitive teenager (along with other non-Kevin Smith films like Suburbia – both the 1983 classic and the completely separate 1996 film with Giovanni Ribisi – SLC Punk, Trainspotting and many others). Films that were all about finding yourself in one way or another and not giving a fuck – it all really appealed to me.

So, needless to say, when Bob Moz at Topspin approached us with the project, we jumped at it. As we continue to grow and evolve as a company, more and more of these opportunities to work with people we really admire or were influenced by keep popping up – it’s pretty amazing and we’re always honored, especially when it comes to something as integral as a band or individual’s visual or web identity.

SModcast Internet Radio (SIR) launched a little while ago as a live internet radio station, developed on the success of the network of podcasts that Kevin and his crew have been building since 2007. It all started with the SModcast podcast and has grown into a network of 25 different podcast channels and over 700 individual episodes.

Over this time, the network had become a sprawling mass of pages and domain names and was very difficult to navigate because of it. Ming did a great job trying to keep up, but it was sort of like the sprawl of a city like LA or London, rather than a planned out grid like NYC. So our initial task was to help tighten everything up and provide some new tools for easy navigation between sections, as well as help make it more manageable by migrating all 700+ podcasts to a flexible and easy to use content management system.

Additionally, fans were asking to pay for the podcasts to help support the network, listen without ads, and listen in better quality. Kevin, Jordan, and his team had come up with the idea of $Modcost, a new subscription-based model for the SModcast network that gave the fans just that – ad-free, higher bit-rate content, as well as access to all kinds of other goodies like exclusive videos, early access to event tickets, etc. This is where Bob from Topspin comes in, providing them the necessary tools to do it, and connecting us all together.

—

(Now for the technical case study…)

The goals here were to help organize the content, make navigating the site and finding content more user friendly and functional, provide the SModCo team a much easier method of managing and posting the content, develop some new tools to help people interact with the content in a much deeper way, and add in the new $Modcost subscription-based premium content.

Additionally, instead of developing $Modcost as a standalone site, we really wanted an integrated experience. One where the way a subscriber browsed the site was no different from a non-subscriber, with one exception – all of the content they were consuming was the premium content they paid for. At the same time, we wanted non-subscribers to know the premium content was at their fingertips, all readily accessible as soon as they subscribed.

Now, add all of this up and you might think, “holy shit, this build must’ve been crazy expensive”. To be fair, it’s not inexpensive to do what we’ve done here, but it also doesn’t have to break the bank.

With SModcast, we were tasked to do it all within a relatively modest budget and an extremely tight timeline. Here’s how we did that.

Basically what we’ve done here is embrace the DIY mentality that Kevin’s career (and our business) is based on, pulling together tools that readily exist and mashing them together in a way that makes them work together far beyond what their creators may have dreamed of. This consists of these core elements:

1) WORDPRESS

The first step was developing a system for organizing the content. One that gave the SModCo team the ability to add new content to the site in minutes instead of hours, provided the ability for all types of user levels to administer individual areas of the site, and one that could continue to grown with them without limits.

We love WordPress. You’d be hard-pressed to find a site we’ve done in the past couple of years that doesn’t use it as it’s base. And I bet you can’t tell which is which – that’s the point. Designed originally as a blogging platform, it’s so flexible that the time it takes to turn it into a full-scale content management system (CMS) vs. the time it takes to develop a completely custom CMS is ridiculously less. And the flexibility it offers for future development and integration of open-source tools is undeniable.

So, we developed a completely customized WordPress-based CMS for SModcast – thanks to a bunch of custom code as well as plugins like Fluency Admin, Adminimize, and Magic Fields – complete with a custom drag-and-drop homepage grid to allow SModCo to feature individual podcast channels – as well as any other content they want – in any order of priority they wish. And of course a completely custom front-end theme built from scratch.

We should also mention the RSS Feed capabilities that are automatically integrated into WordPress. Through customization of these feeds, we were able to quickly and easily develop fully automated RSS feeds that deliver the downloads of each podcast directly to an RSS feed subscriber’s inbox. Seems basic these days but you’d be surprised how many people overlook giving their fans the ability to subscribe to what’s going on, drawing them back to the site to find out more.

2) LIBSYN / STITCHER / SOUND MANAGER 2

Up until we stepped in, SModCo had been using Libsyn and Stitcher to run their ad-based live and archive content. The life force of the site if you will. This system was working really well for them, with Libsyn automatically pushing their content to iTunes as well, and their bandwidth costs being nice and low, so we left this in place. Nice and easy streams and downloads from across the site without any fuss.

However all of the players across the site were Flash-based and didn’t work on iOS devices and were dragging down page load times. So, thanks to Sound Manager 2, we were able to build out some great new players, with the addition of a new pop-out player so visitors can easily take the podcasts or live radio streams with them as they continue to browse around the web. All of this using JavaScript and CSS-based controls with HTML5 audio in browsers that support it.

3) TOPSPIN INTEGRATION

Now here’s where it gets really interesting.

Thanks to the Topspin Membership tools, we were able to do this pretty seamlessly. The membership platform acts as a gateway to the premium content on the site. All of the user registration, credit card processing, user accounts, login procedures, and access checks are done through the JavaScript and API-based Topspin tools. No need for difficult to configure payment gateways, merchant accounts, shopping carts, user management platforms, etc. Topspin handles it all, down to the customer service. You just sign-up and instantly have access to the membership tools. In this case, Kevin opted to go for a $4.99 monthly or $37 yearly for subscription. That’s fully customizable inside the Topspin web-app too, and even the recurring billing is handled by their system. And thanks to their built in analytics and reporting, you can get a snapshot of exactly how many subscribers you have, and ultimately how much income you’ve generated, in a matter of seconds.

Additionally, we were able to provide teaser content to non-subscribers in exchange for their email addresses using Topspin’s Email For Media widgets. Even if a listener doesn’t want to subscribe, they can still listen to all of the ad-driven content for free and sign up for the mailing list to hear about news and other events they may be interested in. Building that mailing list is key.

Then, when Kevin decided to do some events down at ComicCon, instead of going through Ticketmaster or some other 3rd party ticketing system with huge fees passed on to the buyer, we integrated Topspin’s Ticketing tools for handle the sales for all of the tickets to the events. The tickets are being sold directly on the SModcast site, giving Kevin’s team complete control over the list of buyers, and then Topspin’s iPhone ticketing app is being used at the events to scan the printed tickets the buyers were emailed by the Topspin system automatically.

Lastly, thanks to Topspin’s physical merchandise sales platform, the API they provide for accessing your products and buy buttons, and the WordPress Plugin we developed for them earlier this year, we were able to quickly and easily integrate Kevin’s SMerchandise store into the site instead of it sitting off on an external service somewhere. The store is completely dynamic, automatically updating it’s products when items are added into the Topspin system. Big thanks to Rob Naples for the great product shots.

To top all of this off, Topspin’s universal cart shows up on all of the site’s pages automatically whenever anything is added. If a visitor wants to buy a $Modcost membership, a t-shirt, and a ticket, they can throw it all in the same cart as they are browsing around the site and then checkout all at once. And those buy buttons can be embedded anywhere – for example, non-subscribers see the premium content links all over the site. If they click on it, a “Register Now!” lightbox pops up to give them the instant ability to register and start listening to the premium content right on the page rather than taking them to another page or site to purchase or complete the transaction.

4) SOUNDCLOUD INTEGRATION, WITH GOBBLER SUPPORT

One of the trickiest elements of any subscription-based setup – or any setup where you want to provide audio or video content to some but not all – is securing that content. Additionally, when you’re talking about 50GB worth of premium content and thousands of subscribers trying to download or stream all of it, you’re faced with some harsh realities about the cost of bandwidth.

These two elements led us to our friends at Soundcloud. Let me first say, if you need anything audio related for the web, go talk to Shelley or Lee at Soundcloud. Their app really does make the organization and distribution of audio for the web as painless as possible and they are awesomely talented people.

Thanks to Soundcloud’s ability to host audio securely, their gracious bandwidth and storage limits (unlimited when you purchase their Pro Plus account), and the fabulous API they offer, we were able to host all of the premium audio content with them in a way that keeps it secure and for subscribers only. When a subscriber who’s been verified by the Topspin system clicks a link to stream or download some of the premium audio content on the site, the server authenticates with Soundcloud and delivers the user temporary, expiring streams and/or downloads without any fuss. It just works for the user and doesn’t require a ton of heavy duty code development to secure the content.

Additionally, thanks again to the API, we were able to make actually embedding the Soundcloud-hosted content into the blog posts quick and easy through a custom plugin. It allows Ming, Jordan, and the rest of the SModcast team to select the content from a series of drop-downs when writing a post instead of having to fuss with copy-and-pasting URLs. Just one more little thing that makes managing the content that much easier so they can focus on what they do best – producing the content.

Of course, as Murphy’s Law would have it, we ran into some issues right before launch. A big thanks to the ultra-responsive Soundcloud dev team, as well as Greg from Topspin, in helping find the bugs and figure out a solution.

And an honorable mention to Gobbler who’s app, while still in Beta, is the only one out there that allows for each batch uploading in to the Soundcloud system. Had it not been for them – despite the few bugs we ran into – ingesting 50GB of content into Soundcloud would have been a nightmare.

5) MEDIATEMPLE

Over the past few years we’ve developed a great relationship with MediaTemple. Thanks to their (dv) servers, and the fact that we’re using 3rd party services to serve some of the heaviest content, we’re able to run this media rich, high traffic site at a fraction of the cost of a dedicated server setup. Another win for anyone doing things DIY. And thanks to the exceptional support staff, specifically TJ who’s really gone the extra mile for us, we’ve been able to deal with any issue that’s been thrown our way.

For example, when we initially launched the new SModcast site, it went ape shit and started chewing through the available memory on the server. There was some bad code and some misbehaving plugins that didn’t show up under the development load, but as soon as thousands of visitors started hitting it at once, things started going south quick. TJ helped us figure out the issues from the server side and get things stable by the end of the day – something that would’ve been near impossible otherwise, without taking the site down to fix the problems given the scope of the issues.

6) FACEBOOK COMMENTS

Another great tool we integrated here was Facebook Comments and the Facebook Like and Send buttons. Up until this point, the SModcost site didn’t have a comment system, which really limited the interaction between listeners and the shows, and didn’t provide users with an easy way to share the content on the site. Now, listeners can instantly interact with the archives, and each other, creating a much richer communal experience that also integrates with their Facebook activity streams. Should we have Retweet and Google Plus buttons in there too? Most likely. As with everything on this site, it’s evolving as we determine the actual patterns of it’s users.

7) CHARTBEAT

Another great “under the hood” tool we integrated was Chartbeat, allowing Kevin and the team to get a snapshot of visitors to the site at any given time. This, coupled with the Google Analytics they’d been running, helped us get a really clear picture of the site’s usage in real-time.

And the interesting thing?

We discovered that the site was really taking on the usage / listening patterns of radio. Remember radio? Well, for those of you who don’t, radio had it’s biggest ratings and listenership numbers during drive time in the morning and in the evening.

Kevin’s shows broadcast live almost every day starting at 8am. And after watching the Chartbeat and Google Analytics stats, the biggest spikes in traffic start when the live shows begin airing and continue through the morning, finally leveling off just after lunch time.

So what does that mean? That people are actively listening to the LIVE shows. That internet radio, when done right, actually works. That people still want to hear it as it’s happening because it makes you feel even more connected to it in that moment. But also that it has to be timed right because yes, we all have jobs.

—

Let Kevin’ s career and SModcast be a lesson. You can do anything. I’m not talking about just on the web here. Sure, it helps to get funding, or support, or whatever it is that you think you need to do what you do. But a lot can also be done with a little, as long as you have the ability to go with the flow, use the tools available, and find ways to develop new out of existing/old.

We’re stoked to have worked on the redesign of SModcast and the launch of $Modcost, but this is just the beginning of what you’ll be seeing from us, from SModCo, and from Topspin. Let’s keep pushing it forward.

If you have any questions about the tech used here, or want us to do some web magic for you, feel free to hit us up whoever you can find us. @uprising_create, @jeff_uprising, info@theuprisingcreative.com, or at our Echo Park studio.

- Jeff Nicholas
CEO / Creative Director – The Uprising Creative