Cinereach

Archiving a decade of independent films, and facilitating a design process.

Context

Cinereach is a nonprofit organization in NYC that supports and produces innovative filmmaking through a variety of means. Their marketing team approached me for UX consulting and development in a redesign of their flagship website and film archive.

The Challenges

  • Redesign and modernize an outdated, slow-performing website
  • Create an archive with powerful search and sorting tools for a massive library of films with multiple taxonomies
  • Improve tools to manage grant application information
  • Develop a new site on a secure and maintainable open-source platform

Research

I first reviewed analytics and generated sitemaps to get a better understanding of the site's changes over time.

The site had grown and evolved, and many critical urls were changing in the future, so we made clear plans for growth, migrating past content, and creating flexible structures for new content with regards to SEO for the new build.

Connecting the Dots

I developed a sitemap that articulated every possible user pathway and showed urls, content structure, and development notes on each view node, so that any stakeholder or future creative partner could quickly understand the user-facing and technical architectures in tandem.

The Prototype—an express lane to approval

I built a responsive, coded prototype to showcase the user flow and layout across devices: resulting in an accellerated design process and saving time for the internal team.

Building & Documenting Management Tools

They needed a suite of tools to easily edit their custom data for films: this required extensive editing of the Wordpress core. We needed to plan for this content upfront because the migration of the film archive data was far too big for manual entry, and we needed to map the old fields for a CSV export.

Relational Taxonomies

Each film had 3 custom taxonomies to generate archives.

  • Status - The availability of the release
  • Type - Non Fiction Fiction or Hybrid
  • Year - The year the film was released, which required special attention to navigate WordPress' default Year taxonomy.
    
    <div class="film-thumbnail">
      <?php
        get_template_part(
        'template-parts/module','thumbnailbg'
        );
      ?>;
    </div>
    
    

Component-Based Architecture

I employed DRY and atomic principles to the build, using repeatable snippets to increase performance and clarify the structure for future developers.

Desktop Film Detail Layout
Mobile Film Detail Layout

The Final Product

View the site: cinereach.org.

Partners

  • Reva Goldberg, Head of Communications
  • Theresa Berens, Graphic Designer

Services

  • UX Consulting
  • Systems Design
  • Front End Development
  • Wordpress Development
  • Security Research & Consulting

Year

2015