Frontline/PRX Hack Day: Prototyping "A Perfect Terrorist"

Last weekend I was fortunate to take part in the FRONTLINE / PRX colloquium on interactive storytelling, organized by Andrew Golis, Carla Borras, Jake Shapiro, Andrew Kuklewicz and Sam Bailey. The event brought forth practitioners in documentary, journalism, and interactive to discuss new digital directions for FRONTLINE, and public media generally. The highlight for me—unsurprisingly—was the PRX-led hack day that followed. Though I love a stimulating conversation, I belong to the less yak, more hack guild.

All participants prepping the day before the event.

Four projects participated:

+ A Perfect Terrorist, an investigation of “the mysterious circumstances behind David Headley’s rise from heroin dealer and U.S. government informant to plotter of the 2008 attack on Mumbai.”

+ The Wounded Platoon, the story of the “3rd Platoon, Charlie Company, 1st Battalion, 506th Infantry… a group of young men changed by war.”

+ Post Mortem, a look at how death investigations take place in “a dysfunctional system in which there are few standards, little oversight and the mistakes are literally buried.”

+ a group focused on archival applications of Frontline interviews, starting with the recent Economy series.

I was drawn to the “Perfect Terrorist” group, probably because of a fascination with the Mumbai terror attacks. When I passed through Mumbai in late 2009, the Lashkar e Taiba attack made for very interesting conversations with Indian college students.

Tom Jennings, producer of "A Perfect Terrorist" gives a whiteboard run-down of the Collaba neighborhood and the "Kill Zone."

Our group wanted to visualize the complex web of relationships in which the American terrorist David Headley is centered. Headley is the mastermind of the 2009 Mumbai terror attacks—a man who was, in turns, an informant for the DEA and a member of Lashkar e Taiba. Producer Tom Jennings calls him a “perfect terrorist.” He is a complicated figure.

The FRONTLINE piece is outstanding, and the long-form journalism style has distinct advantages. But we wanted to help Tom tell this story in ways that traditional forms can’t afford. Though a documentary runtime must have a beginning, middle, and end, a web-native documentary can let users follow story threads that lead in many directions.

FRONTLINE has generated a ton of material around this story—not just the film, but a series on in-depth blog posts and features. There’s an opportunity for viewers to more deeply explore themes and events in the story, like Headley’s motivation for planning the attack. Just how does someone grow up to become a “perfect terrorist?” How was the attack orchestrated? How can we understand the terror network of 19 accomplices? Who are the victims? What is the aftermath? What are we to make of allegations that Headley was a double agent, and how do we begin to resolve some of the bigger questions raised by the tragedy?

Ideation

We imagined a ton of UX concepts. Among the ideas discussed: a navigable map of the “Kill Zone”; making use of perspective video from surveillance cams; a navigable 3D scene of the same; an attack timeline; a map of relationships; making a viewer clear the “fog of discovery”; and challenging users to ask questions and contribute to a discussion. But though these ideas appeal to the geek in me, they must be developed in service of story, or they’re not worth doing.

After cycling through story, then UX vision, then tech (in the style on which I insist!) we arrived at a pretty interesting concept. It’s a hybrid concept that gets at many of the ideas above.

We drew inspiration from the force-directed graphs in use by Mozilla Collusion and others. Without creating a “force” graph, per se, we wanted to create a visual representation of the “spider web” of relationships that Headley spun. With Headley at the center, we wanted to show the life events that culminated in a perfect terrorist recruiting and directing the 19 attackers, and how this ultimately affected the 166 victims of the attack and their families.

But we also wanted there to be an element of time control. Users should be able to experience this project passively, just by watching—but also actively, by navigating the timeline of events and seeing how the relationships developed.

A mockup prepared by Pietro Gagliano shows our interface ideas.

To do this, we placed Headley as a central “node ” on a vertical timeline. The timeline corresponds to a condensed narration of the entire Headley story. When the user presses play, the narration begins and Headley’s node travels through time. Users can go back and forth in time by scrubbing Headley along the timeline. Because Headley’s is basically a playhead on an audio track, we’ve casually taken to calling this “Playheadley.”

But Headley is also at the center of a time-controlled visualization. As Headley comes into contact with key players in the story, “nodes” are spawned for each person—along with connecting lines of varying levels of elasticity.

By watching this play out passively, you can see Headley’s placement in both the terrorist and informant networks evolve over time. And you can pause the experience at any time to explore a node more deeply. Click on one of the terrorists and the narration will pause. You’ll have the opportunity to explore B-Roll, blog posts, and other elements of the story in a non-linear (but intuitive) fashion.

Each node on the timeline represents an element of the story.

We also discussed how this story map could link to other projects in the same form. So you can imagine a tapestry of FRONTLINE stories connected to each other in this way.

This is an interesting way of mixing time and relationships, telling the story in a way that would be impossible in the traditional form. Check out Pietro’s rapid-fire summary deck for more detail: [PDF]

Hackin' away

Prototype

A protoype was made in six hours and is up on GitHub. It’s made with some custom d3.js voodoo by Devin Chalmers, a simple jQuery powered HTML audio player, and popcorn.js. Because of the short amount of time available for hacking, the project is pretty incomplete. But the repo has semi-functional code for all the individual pieces and is hours away from assembly.

There’s interest in taking this beyond the protoype, which I find tremendously exciting. I think there’s a lot of overlap with The Tillman Story project, and its objectives: to let users explore a much more expansive “surface area” of the story; to let interest drive the user’s experience; to provide additional context to the story; to connect it to journalistic material and conversations in social media; and to accommodate a large number of story threads while keeping the main thread engaging. Both of these projects are pioneering ways of telling non-fiction stories on the web.

A high-five for HTML5

As an open video booster, one thing about the event struck me as particularly fascinating: no-one blinked an eye that this was essentially an HTML5 media hack day. Until recently, this type of event would have been impossible. But thanks to the maturation of HTML media, to libraries like Popcorn, to human readable and hackable source, and to GitHub, these types of events are way more viable. Actually, rapid protoyping with video apps is way more viable—imagine having to coordinate with team members while compiling a Flash or iOS app and merging in functional and stylistic changes from six people on the fly. Very, very difficult. With HTML, we can make changes immediately and with little friction.

HTML5 media rocks. You can also check out the repo for the Wounded Platoon group, another HTML5-based project from the event.

About this entry

You’re currently reading “Frontline/PRX Hack Day: Prototyping "A Perfect Terrorist",” an entry on Ben's blog.

Published:
4.13.12 / 7am
Category:
Connected Documentary, Drumbeat, Filmmaking, Innovation, Knight-Mozilla, MoJo, Mozilla, Software, Web Makers, WebMadeMovies
Tags:


Tweetstream