Scrolling Sideways: Reimagining the future of magazine journalism with Esquire magazine
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 pimped-out 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 Media Innovation at Northeastern.
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!