How We Made “Double Charged: Behind The Numbers”

Hello Internet! My name is Lo Bénichou and I am the new Innovation Lab Developer at Youth Radio. I'll take a moment in this post to introduce myself and tell you a bit about a new interactive story segment we built for our newsroom's year-long investigation, Double Charged. My career wasn't always filled with JavaScript, Ruby blocks, or hours of debugging. Before I learned programming, I was a multimedia journalist . I worked for KQED and NPR, and freelanced for a few years. I was constantly hustling to make sure my pitch made it from my mind to the air. I guess doing just that wasn't enough anymore and I felt limited in the way I could tell stories. Growing up, I was always a bit of a techie, fixing things in the house. My dad even asked me to set up our first computer. Now that I think about it, I missed fixing things. One day, I stumbled upon the now famous New York Times’ article called "Snow Fall". I was amazed and began researching more projects like it. That's when I got hooked and said, "that's what I want to do. I want be able to build this." Storytelling was and is undergoing a digital revolution. From "The Austin Music Map" to the interactive documentary "Hollow", journalists have joined forces with coders to push old boundaries and take over the web with mind-blowing interactive content. I wanted to be part of all this change. To get there, I needed to learn new languages and a whole new set of skills. I signed up for a coding bootcamp. After that, my career changed for the better. I am now a "hacker journalist” in the early years of a (hopefully) long career. That’s enough about me. Let's get into the nitty gritty of the Innovation Lab's Double Charged Interactive. The original investigation looked into the fines and fees that juvenile offenders have to pay after being arrested. Even if you are innocent, fees can add up. The aftermath of arrest can take up both time and a lot of money for the families.

Balance

The building process at the Innovation Lab has to be accessible, and it needs to generate high-quality products. I say "accessible" because our work is primarily built by our youth team. Some of our interns have never coded before, and that means teaching them the skills they need to build excellent content that will eventually be published on our website or on other news outlets. We need to strike a balance between youth development and meeting deadlines but while this might seem restrictive and challenging, it is actually a great way to go about building code. We have to keep it simple, and simple code can be a good thing.

Mockups

Our youth team, like any other tech team, started with brainstorming and looking at the data at hand. They wanted to tell individual stories and focus on how quickly fees could add up. We first thought about building a calculator but felt like we would lose some of the storytelling factor. The team then researched similar projects online. The design of NPR's Borderlands definitely inspired us. After that, our youth team combed through transcripts from Youth Radio’s investigation to find all the data we needed to construct a compelling narrative. We then used Balsamiq to draw out these mockups. [caption id="attachment_9188" align="aligncenter" width="635"] The initial wireframes for Double Charged.[/caption] [caption id="attachment_9189" align="aligncenter" width="651"] The initial wireframes for Double Charged.[/caption] The design evolved once we started building and testing our product. We felt like the navigation bar took too much space and moved it to the top. The change also made designing the mobile version a lot easier. And Yes! “Double Charged” works great on mobiles and tablets. I really felt like responsive design was a key component of our curriculum.

Keeping It Simple

The code for NPR's Borderlands involved a level of understanding that our interns didn't have quite yet (Node.js and templates). So I decided to keep it simple and go with your basic HTML, CSS and JavaScript, so that they could participate in the coding process as much as possible. “Double Charged” is a simple website living on Youth Radio's server. We used Bootstrap to structure our layout. The content itself is hard-coded in and no database was needed. I am hoping to introduce databases and a back-end language in the future! We used a jQuery plugin for the slides and some PHP for the contact form. I set up the basic structure for the JavaScript code to function and put in the final touches, but our interns were the driving force behind "Double Charged: Behind The Numbers."

The Results

[caption id="attachment_9190" align="aligncenter" width="787"] Screenshot of the landing page from Double Charged[/caption] [caption id="attachment_9191" align="aligncenter" width="786"] Screenshot of the character's story page from Double Charged[/caption] [caption id="attachment_9192" align="aligncenter" width="784"] Screenshot of the outcomes' page from Double Charged[/caption] While many organizations teach youth how to code, I do believe that coding in itself isn't enough. At Youth Radio's Innovation Lab, we see coding as just another form of media young people can use to produce powerful stories, and we make sure those stories reach real audiences through publication and dissemination. Seeing one's project published and viewed by hundreds of users is gratifying, and I'm hoping that it will push our team to build even better projects as we grow. We launched the interactive on July 8th, 2014. This was our first big launch since we changed our name to the Innovation Lab, and you can check it out here. As lead developer on this project, I collaborated with our youth team: Skylar Briant, Alvaro Magdaleno, and Christina So.