In 2011, journalist Luke Dittrich set out to walk the 1,933-mile U.S.-Mexico border from the Pacific Ocean to the Gulf of Mexico. Along the way he and his souped-up baby carriage encountered mountains, deserts, and border agents. A contributing editor for Esquire magazine, Dittrich chronicled his grueling journey in a story for the magazine. We’re glad he did, because the resulting story proved to be perfect material for StoryLab, the university course-cum-R&D skunkworks that is part of a sweeping collaboration between Esquire and the Media Innovation program at Northeastern University.
That partnership got its start when Tyler Cabot, Esquire’s newly appointed head of R&D — yep, that’s a thing — and I met over lazy summer cocktails to talk shop. Cabot was looking for a university that could act as a sort of skunkworks, conducting the kind of risky design and media experiments that a national magazine could ill afford. We here at Media Innovation, an experiment in graduate education, were looking to partner with professional news outlets. Within a whisky or two we had concocted the rough outlines of both StoryLab and Storybench. We wanted to contribute to the future of digital storytelling (Hello, StoryLab) but also cover many of the amazing developments in that arena as well (Howdy, Storybench).
We launched the Storybench partnership earlier this month; the site’s first post went live that same day. StoryLab represented a more complicated prospect. About halfway through the fall term, Northeastern instructor David Tamés had assigned Dittrich’s story to an interdisciplinary mix of design, digital media and computer science students. The assignment: Blow up the traditional magazine story, then rebuild it from scratch. The students split into four groups, and presented the results to us right before the holiday break. The results were illuminating, and encouraging.
Group One: Creating a participatory reading experience
Cangqiong Ao, Allie Glushanok, Alex Johnson, Lillian Ross
This group modularized Dittrich’s story into discrete columns presented against a desertscape background that included an image of the border wall. As the user reads along, she scrolls horizontally to reveal more columns. This embeds the text within an infinitely-scrolling page to convey movement and distance. The desertscape moves using an animation process called parallax. Within the text, readers can reveal footnotes and detailed annotations, and vote on user-submitted multimedia. One idea was to color-code embedded links by their democratic ranking. Click here for the live demo.
Group Two: Playing with the iconography of narrative …
Rachel Gianatasio, Moling Guo, Dean Thurston, Megan Rustum
This group employed an interactive timeline alongside a map of the U.S.-Mexico border to convey distance and geography. An icon depicting Dittrich with a baby stroller can be moved along the timeline to reveal different points within his story. Once the user reaches a specific geographic point, a slideshow and textbox appear to highlight an excerpt of Dittrich’s narrative alongside contextual photographs. Click here for the live demo.
This conceptual sketch became the following concept. (Note the use of the baby stroller):
Group Three: Playing the serious game of walking the border …
Jesse Oberstein, Lucas Haber, Tiffany Chao, Adrian Bjune
This team built “Walking the Border: The Game,” a two-dimensional side-scrolling game where the user controls Dittrich as he encounters border guards, sign posts, and other story elements. Much like the story itself, the user can choose where to pitch a tent, whether to talk to a border guard, or decide if Dittrich should take a closer look at a feature (like a mountain range).
Group Four: Using multiple dimensions in designing for narrative …
Korbin Shuffleton, Joshua Olsen, Elise Fung, Nathaniel Hulsey
This group presented an interactive way of reading Dittrich’s story that employed photography and a map along the bottom of the screen to depict progress. They paired high-resolution images from photographer Vance Jacobs with Dittrich’s narrative. Users can scroll vertically to reveal more text and images and click on arrows to move horizontally through different geographic points in the story. Click here for the live demo.
The reader scrolls horizontally through the story, but vertically through individual scenes within the story.
A screenshot from Group Four’s design document, in which they conceptualized their story architecture.
We were all deeply impressed by StoryLab’s beta test. In a few weeks we’ll be jumping right back into the mix with a group of new students and new Esquire stories. This time the students will devote the entire semester to their projects. Look for updates!
Jeff Howe is Assistant Professor of Journalism at Northeastern University, where he runs Media Innovation at Northeastern, an interdisciplinary graduate program in digital storytelling. Howe is a longtime contributing editor at Wired magazine. In a 2006 Wired article he coined the term “crowdsourcing” and later wrote the book, “Crowdsourcing: How the Power of Crowds is Driving the Future of Business.” He is a former Nieman Fellow at Harvard University and has written for the New York Times, the Washington Post, NewYorker.com and many other publications. He lives in Cambridge and is currently co-authoring a book with Joi Ito, the director of the MIT Media Lab.
This piece was initially published on Storybench, a cookbook for digital storytelling. Storybench is a collaboration between Northeastern University’s Media Innovation program, a new graduate degree in digital journalism, and Esquire magazine. Storybench provides an “under the hood” look at the latest and most inventive examples of digital creativity and the tools and innovation behind them. Follow Storybench on Twitter and Facebook.