Section Logo
Go BackGo Forward

slideshow

Interactive Annual 19:
Tablets/Handheld Devices

Healing Histories

Launch Live Site

“A great idea. And the site stepped out of the way so the stories could be told.”
—Perry Fair

“An elegant site, beautifully designed to maximize the impact of images and videos and to work in both desktop and tablet format. It’s a great example of how quality design and attention to detail are essential in communicating a message and engaging an audience.” —Sophie Henry


Overview: This interactive documentary for the W.K. Kellogg Foundation tells the story of community-building and social recovery post-Katrina in Central City, New Orleans. The first in a series of projects that showcases authentic stories of communities across the country working to heal racial divides, it also illustrates the future of digital storytelling. The rich, user-driven, interactive experience—a mix of content and media types—allows visitors to choose their own path while uncovering the stories of Central City and its residents. Rather than passively presenting facts, it offers an opportunity to explore personal stories that shed light on racism.

  • • The site was in production for four months.
  • • The project utilizes HTML5's audio and video capabilities as well as CSS3 and object-oriented JavaScript. Built with Ruby on Rails, there is no CMS.
  • • Stories are broken up by theme and character, all accessible at any point in the experience by using the drawer at the bottom of each page.

Comments by Sean Klassen, Andy McIntosh and Matt FaJohn

What was the most challenging aspect of the project? “We knew they were interested in threading together bits and pieces of content to craft a story, but none of the content had been produced yet. It was a challenge to know exactly what to design for, so we tried to stay flexible and adapt the project to changes based on the footage that was gathered. We went through a series of hypothetical scenarios and then iterated from there as the real content started coming together.”

Did you learn anything new during the process? “We started this project thinking that using an MVC framework would be overkill, but we went ahead and built it on top of Backbone as a teaching/learning exercise. It turns out there's no way we could have managed the complexities of the various application states without it. The entire site is deep-linkable and each 'slide' has hooks for being enabled and disabled during transitions and paused and resumed when the navigation is hidden and revealed. Coming up with our own system for all that without a solid base like Backbone would have been troublesome; bootstrapping with it also gave us the opportunity to focus on some other handy utilities that we've since used on other projects.””

Credits

Sean Klassen, lead designer
Amil Husain/Sean Klassen, creative directors
Matt FaJohn, strategy
Dean Boyer/Keith Driessen/Andy McIntosh, developers
Joey Bullock/Lauren Klein, producers
Legwork Studio (Denver, CO), project design and development
Weber Shandwick, ad agency
W.K. Kellogg Foundation, client


SHARE THIS  
  
Facebook  Twitter  LinkedIn