Christopher Rankin

Projects

An Eastside Education

June 2015

interface design, HTML, CSS, JavaScript, Jekyll

An Eastside Education is a documentary project that tells the story of Austin’s Eastside Memorial High School's struggles to maintain accountability standards. The seven-part video documentary series tells the story of one semester as teachers, students, parents, and administrators fight to prevent their school’s closure.

The video documentary is presented through a custom-built website which provides additional content — in-depth narrative copy, photos, infographics, and links to external resources — that provides additional context and background to the story.

The design and structure of the Eastside site was inspired by the NPR Planet Money Makes a T-Shirt site. Since the site wouldn't be updated once it launched, I decided to use Jekyll, a static site generator, which would permit me to easily reuse code over each of the seven chapters of the story. The site was focused on tablet and desktop experience although all episodes are viewable and readable on phones. As the site is content rich with a large video and illustrated article on each page, providing users navigation clues to help read through each chapter and the site as a whole was a priority. After the page loads, the navigation is minimized at the bottom of the browser. As the user scrolls down, text instructions appear to show the available options. And the navigation slides into view when the user reachers the end of the chapter. The site gives the user an interactive storytelling experience providing the options of a traditional narrative path or a browsable, nonlinear experience.