Building the Serial podcast guide in five days: an exercise in product and editorial cross-collaboration magic

Previously, on product/editorial collaboration...

We have a lot of Serial podcast enthusiasts across the company. We dutifully listened each week, shared theories, and debated journalistic ethics. For a few of us though, this wasn't enough. So we built a guide to the podcast to help other listeners keep track of every single person involved in the case. Now that Season One is over, we want to share the story of how this tool came to be because it's pretty illustrative of how so many other things can quickly go from ideas to reality at Vox Media.

Let's not bury the lede: this was 100% a side project for all involved, and came together because our teams have easy and open communication with each other constantly — notably across product and editorial.

Luckily, the timeline of events leading to the creation of our app is easier to untangle than Adnan's confounding cellphone records. It started when it was clear there was enough interest in talking about the podcast that we had to make a dedicated channel for it in Slack. After 30ish enthusiasts hopped in and started sharing their complex theories, it became clear very quickly that we were having a hard time keeping track of the many people mentioned in the podcast.

But Ramla isn't one to identify a problem without also offering a solution.

Meanwhile, Sarah Kliff and Libby Nelson from Vox were coming up with the same idea in a separate offline conversation.

And that's all it took. We met in the office kitchen, recognized right away that we were excited enough to spend some free time building an app, and then we got to work. A lot of things work this way here. Someone has an idea, validates with someone else that it might be good, and instead of letting it float in the ether, they put it on the site. In this case, it was going on Vox.com.

Initial conversations were focused on editorial direction and design of the app itself. After looking through stacks of "character maps" for movies, TV shows, and books, we decided that while a high-touch, creative visualization of how every character in a story is related to the others is neat, it's rarely functional. Instead, we wanted to build something that was a useful tool every time someone listened to the podcast. (Also worth noting: in earlier conversations, we referenced our idea as a "character map" or "character guide." We realized later that this was not an appropriate phrase for our idea, as the murder case involves actual, real individuals. So we scrapped that term from our app.)

We ended up building an episode-by-episode guide of every person mentioned in Serial. As we shared our idea with coworkers, functionality of the app grew organically. Here are a few points to give you a taste of the teamwork and collaboration that went into the building of the app:

• A few members of our editorial team listened to the podcast first thing in the morning each week and painstakingly documented timestamps of name-mentions, along with descriptions of each person. This data was then loaded into a Google Spreadsheet.
• Ramla Mahmood, one of the original co-conspirators on all this, helped us wrap our heads around the whole concept by designing a cool character map that never actually made it into the app. Oh, and then she designed the visual elements for the whole app, including the social share image we're using at the top of this post.
• One of our developers, Brian Anderson, offered to pitch in some of his time to wire up our app with the SoundCloud API, which then allowed us to link each person's "card" to a timestamp, and play the audio beginning at that timestamp.
• Another of our developers, Ryan Mark, helped our main developer Alisha Ramos set up the app on the Vox editorial apps rig, which greatly improved performance (namely, we no longer had to make separate calls to the Google Spreadsheet where we stored our data each time a person loaded an episode).
• After we shipped the app, yet another developer helped us fix a small bug in our SoundCloud code (thanks Eliot Shepard!).
• As with most things here, the app remained in constant iteration after we shipped it. After receiving feedback from people that we were "missing" certain people (we weren't), we realized our design could be clearer and added a "People mentioned in this episode" headline to the app. We also ended up tweaking our mobile experience based on some user feedback.

What's so special about this app is the organic way in which it came into existence and continued to evolve, as well as the amazing, fluid collaboration between and within product and editorial. Here's how Sarah Kliff, Senior Editor at Vox.com and collaborator on the app, summarizes the experience:

"The Serial character guide started on a piece of paper we scribbled a bunch of lines and names and relationships on over lunch one day. And, 5 days later, it was a real, living app on Vox.com. It came together because a group of Serial-obsessives used free time to code the time every character showed up in the episode; I remember doing a lot of mine around 10 p.m. or so one night. One Slack conversation, 12 episodes and countless Mail Chimp (mail...kimp?) jokes later, we have this super cool editorial app that helped me understand way better how things get built at Vox."

If you haven't seen the app yet, check it out.