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
  • Clarify grant application information
  • Develop a new site on a secure and maintainable open-source platform

Research

The team had recurring calls and emails from filmmakers who couldn't find key information about applying for support. I reviewed their analytics and generated sitemaps to get a better understanding of the site's changes over time.

As the site had grown and evolved, many critical urls had changed, but weren't mapping correctly. A simple set of 301 redirects was a huge first step in improving the user experience. This might seem obvious, but for a departmentalized nonprofit without a dedicated web team, it was an easy oversight. I emphasized planning for growth, migrating past content, and creating flexible structures for new content with regards to SEO as major considerations for the new build.

Pieces of a Whole

The team's initial sitemap didn't articulate the flow of content between views or the organizational systems for the films archive (a grid). They had plans to sort films by date, type, director, themes, and more, but no explanation for these sorting methods for their stakeholders.

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 Feedback Loop

At the beginning of the project, the in-house marketing team was stuck in a twilight zone. They were revising strategy and producing beautiful mockups—but every solution was getting rejected again and again.

This was for two primary reasons: first, the executive team could not interpret the overall content structure and responsiveness from the standalone mockups. Second, they had trouble prioritizing their concerns because their use-cases and subsequent flows were not clearly defined.

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 saved billable hours for the internal team.

A note on motion

Early on, the executive team pushed visual impact and heavy brand illustration. As soon as we showed motion in prototypes, the requests for complex illustrations reduced, and the simple layouts of the site evoked responses of elegance instead of dullness.

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

2014