Over the last year, we’ve seen a wide range of interactives from a variety of news sources and we will continue to see more organizations of all scopes do this type of immersive video and multimedia storytelling.
The Council on Foreign Relations is a think tank, a membership organization, but also a publisher. CFR has won three Emmys for its multimedia series, “Crisis Guides” on Iran, the Global Economy, and Darfur. Its news team of 12 writers, editors and producers continues to innovate in visual storytelling with a new interactive series called “InfoGuides.”
In the past, CFR had created the Crisis Guides with MediaStorm on a one-off basis. Before they started the InfoGuides, they weighed the option of creating these resource-intensive interactives one-by-one as they had done previously, or to build a tool — basically a CMS — to templatize the process.
They went the template route and worked with Phase2 to build the backend tool. By making the bulk of the investment up front, the builder tool allows their writers and editors to create their own InfoGuides without a team of developers and at a much faster rate.
I spoke with Jeremy Sherlick, deputy director of multimedia at CFR, about the decision to build a template and some lessons for smaller and non traditional newsrooms interested in interactive storytelling. And with Josh Caldwell, a former developer at Phase2 who worked on the project, about the tech behind the builder tool.
Let’s talk about the front-end that readers see, the InfoGuide. What purpose does the InfoGuide storyform serve, for CFR and for the reader, that’s better than regular text?
Jeremy Sherlick
JEREMY SHERLICK: “Regular text,” done well, can be the most compelling way to convey information and stories. You never want to think of visual storytelling as a higher or better way of telling a story. If we did that we would fail under the amazing capacity of the human imagination.
The trick is to not treat the written narrative as an end, but rather a beginning. What can be shown to the viewer that either highlights aspects of the narrative or can show something in an image or video that adds a new and emotional layer onto the narrative. It’s really about complementing the narrative and not overtaking it.
With the InfoGuide we are trying to produce a storytelling model that the viewer can sit back with and learn about a subject in a way that cuts through the noise of our day-to-day. It’s meant to be an immersive survey of a given topic.
What’s your advice for other small or non-traditional newsrooms that want to do this type of storytelling?
SHERLICK: Iterate, iterate, iterate. Don’t wait for the perfect thing.
For example, if you want to build timelines just get started — use TimelineJS or another free tool and get good at the workflow and the storytelling. Spend the money later in the process once you’ve proven to yourself and others what it is you want to do.
You’ll have a much better understanding of the medium and the limitations if you treat everything you do not as an end but as a beginning.
The InfoGuides are created using a tool, essentially templatizing the process. So let’s get into the backend of that builder that your news team uses. What were the major decision points in developing the interface?
SHERLICK: Because we’ve been producing feature interactive presentations since 2007 we knew there were certain ways that we were going to cover a story. We were going to have text, video, timelines, maps, graphics, and slideshows. We didn’t want to have to recreate those from scratch over time we wanted to add one to a project. They could be turned into templates or containers that take on a unique life with the content we fill them with.
This was the starting point in our process: to create a builder tool versus custom one-off projects. In the end we knew that we would get more out of having a tool to reuse templates than starting from scratch each time.
The next decision was what vendor to go with. We chose Phase2 because they were known to be a robust development shop and we knew they had the resources to accomplish the task of building a tool.
From there the list of decisions just started to grow. We chose to build modular templates (video, timelines, maps, slideshows, annotated images, etc) that could be used individually or, when combined, could form the foundation of our larger “long-form” interactives.
Another major decision had to do with user interaction and design. Our previous interactive series, Crisis Guides, were presented as successive chapters that the user could click into. This might have been a good way to breakup and organize the information but it was very limiting in the sense that the later chapters were buried and traffic to them dropped off sharply. For our new series of InfoGuides we wanted to present everything on one page. Our goal was to surface as much of the content as possible in a single scrolling experience.
One of the final major decision we had to make was to whether or not to integrate this tool into our current CMS at some level. We decided to develop the tool separately so that we had the maximum amount of development flexibility but to integrate it at key points. These points had to do with security, publishing, and analytics.
InfoGuides can feature inline video, large images with parallax scrolling, interactive maps, and more. What’s under the hood of the backend builder tool used to build these interactives?
Josh Caldwell
JOSH CALDWELL: To create a flexible solution that could live along side CFR’s we started out by building a REST API in PHP which stores the interactive data as JSON.
Once we had the data squared away, we began building out a JavaScript application to handle the rest of the functionality. The front end is interesting because the admin and the view are essentially the same code. For the admin, additional JavaScript is just layered on top to add the admin interface.
AngularJS provides the overall structure for the application. We decided that Angular’s “directive” concept would be a really nice way to encapsulate individual types of functionality as HTML elements. On top of this structure, we chose a variety of libraries (and wrote a few ourselves) to create each of the components of functionality.
Leaflet was our choice for the maps. It provides a really well documented API and is extensible and easy to work with. It also has a nice plugin called Leaflet.draw which provides easy-to-use admin tools.
After examining quite a few timeline libraries, we decided that the best way to get what the team really wanted was to build our own. That brought on its own challenges, but has allowed us to integrate the timeline seamlessly into the application and make it work inside the paradigms of the tool.
We’re also using Bootstrap as a base for the structure and certain functionality, jQuery and a variety of jQuery plugins, Hammer.js, FontAwesome and MediaElement for some custom video action. We’ve also begun to integrate D3 to handle a variety of charting and other data visualization duties.
We tried to take the approach of finding and integrating the best existing solution for each type of functionality. In some cases we found there wasn’t something that would really work, either from a functionality standpoint or because of integration issues, and rolled our own — but this was always a second choice.
The tool represents what we hope is a collection of best-in-class solutions, put together inside a structure which matches CFR’s needs.
The tool represents what we hope is a collection of best-in-class solutions, put together inside a structure which matches CFR’s needs. This approach also makes things very extensible — so ideally there will be many more interactives with a variety of new, interesting and engaging interactions and content.
CFR hired an outside developer to build this interactive template tool. Why did you opt for that route? What are the benefits and disadvantages?
SHERLICK: We don’t have the in-house resources to build a tool of this scale in the way we knew it needed to be built — it had to be done by a vendor. Rather, the decision was should we templatize and build a tool of this nature, or do we produce custom one-off projects that could be done by a smaller team in-house. It was a very hard decision for us. We wanted both.
But again, we knew 80 percent of the presentation types we wanted to use, so we went about building a tool that could keep iterating.
The template approach is not a good idea for those organizations who plan to build once and then hope the template will work for their needs for the next 5 years. You have to be committed updating and iterating or it will stagnate under the weight of technology changes.
Our tool was built with this understanding in mind. We can plan to continue updating with vendors and possible with internal additions to our staffing.
The builder tool is accessible to those who aren’t developers. Why was this an important decision?
SHERLICK: We have an amazing team of writers and multimedia storytellers. But we are not developers. We wanted a tool that we could use easily to turn around a timeline or a map in a very short period of time and have it still be integrated into our website.
Multimedia interactives like Snowfall has been criticized for being resource-intensive and not easily replicable for smaller newsrooms without the time or staff. CFR has a news staff of 12 and has published two InfoGuides now. How long did it take your staff to build these first three?
SHERLICK: As expected, the first InfoGuide took longer because we were scoping the project, going out to bid, engaging in discovery, and then developing the tool. Therefore, the production time for the first InfoGuide on China’s Maritime Disputes took about 7 months to produce.
Our second InfoGuide, this one on Child Marriage, took 3-4 months to produce with future guides scheduled to take about three months each. Now that we have the tool and templates created we are realizing the promise of building the tool. The time it takes to create an InfoGuide should only be dependent on content production and not constrained by design and development. The development time ceases to be a factor in production and we can just paint.
Author’s disclosure: Jeremy is a friend and past colleague of mine at the Council on Foreign Relations. I also worked with Josh while at CFR.
You might also be interested in:
Interacting with your community and providing quality programming while providing the news may seem daunting, but it’s worth it.
Our belief in the brand and the business hasn’t wavered. When you’re a business with a mission, it becomes the only thing that matters.
Our mingles normally draw anywhere from 20 to 40 people. At a recent one, we had the mayor, a bank vice president, several retirees, a young entrepreneur and the owners of the bowling alley hanging out in our office, all chatting with each other and our newspaper staff.
