Ferguson Voices | A Moral Courage Project

Ferguson Voices is a joint project from PROOF and the University of Dayton Human Rights Center. Originally envisioned as a physical, traveling installation that marries audio with photography, TOKY saw an opportunity to create a one-of-a-kind digital experience. Ferguson Voices tells the story of the people of Ferguson, Missouri, before, during, and after Michael Brown, a young black man, was shot and killed by a white police officer in August, 2014.

TOKY specializes in digital and print work for architecture, engineering, and construction firms; high-end real estate development destinations; arts and cultural organizations; private schools and universities; and professional services.

Why Drupal was chosen: 

Drupal is TOKY’s go-to CMS for any content architecture that isn't a typical blog. We never know how a site might evolve over time and using Drupal from the beginning ensures a solid foundation to build on with future iterations — whatever they may be.

This project in particular was a perfect opportunity for us to build a decoupled Drupal site with React.js as the front-end. We leaned heavily on the fantastic demo application by Sebastian Siemssen as a baseline to work from. (Many thanks, Sebastian!) Using Drupal as a content service for the React.js front-end allowed us to quickly build out a great editorial experience with very little custom code required. This meant we could spend more time focusing on the front-end of the site.

Describe the project (goals, requirements and outcome): 

The primary goal of the project was to create a seamless audio and visual experience that would draw visitors into the Ferguson Voices project and lead to the accompanying podcast.

GOAL: Invest Time Wisely & Efficiently, Without Sacrificing Creativity

Since this was a project for a nonprofit organization, we wanted to bring to life something that would be creative and impactful, but we also knew that efficiency would be key. Drupal and its intuitive features were key to helping us enact our vision. We were able to deliver a site with top-tier SEO best practices built-in via isomorphic rendering, contributed modules like Simple Sitemap, and custom route handling inside the Express middleware.

GOAL: Create an Evolving Experience, Much Like the Story of Ferguson

We wanted to create a CMS that was strong enough to hold up over time, but simple enough for less technologically inclined people to use and subsequently train new users to utilize as this project grows.

Drupal Back-end
With the Configuration menu completely removed for Site Editors and the Structure drop-down with just one link, the available options are greatly reduced, making it easy to add and update content quickly.

GOAL: Tell a Story in an Organic Way

The story of Ferguson doesn’t have a concise beginning, middle, or end. Neither do the stories of the individuals featured. We wanted to allow users to explore and listen at their own pace and in their own way. The universal circular navigation structure allow for both linear and an organic experience, while conceptually mimicking the story of Ferguson and the physical exhibition itself. To better mirror the circular desktop navigation on mobile devices we used links with route: for the Act Overview and Featured Voices menu links where landing pages don't actually exist so they would render without an anchor tag.

GOAL: Create a One-of-a-Kind Experience

Originally, PROOF and the University of Dayton thought the exhibit might translate into a simple blog. We knew it had the potential to be so much more, and Drupal helped us create something truly unique by structuring the content as a five-part story that is also mapped out on a Google Map in order to give physical context.

Development Process

In terms of development, this project took two months to complete. TOKY used agile project management and had milestones every week to review and test specific components of the site. The site has been tested in the latest versions of Chrome, Firefox, Safari, Chrome for Android, iOS Safari, Microsoft Edge, and Internet Explorer version 11.

Outcome

With new podcast episodes added regularly, repeat visits are encouraged and content remains fresh.
Notable metrics in the first 30 days post-launch:

  • Nearly 600 active users
  • 37% bounce rate (below industry standard)
  • Average session duration of 4:30 (significantly higher than industry standard)
Organizations involved: 
Modules/Themes/Distributions
Why these modules/theme/distribution were chosen: 

Media

For prepackaged and intuitive media file management we used the Lightning distribution by Acquia. Additionally, the site relies on the Media Entity Audio and Media Entity Video modules for locally-hosted MP3 and MP4 files. Each Story and Act has a single intro audio file and the home page has two intro videos. Since the front-end is hosted on Heroku and the Drupal back-end is on Pantheon, we needed to render all media files with absolute URLs instead of relative URLs via the CDN module to account for the two different domains.

Architecture

The GraphQL module (along with the Core, Content, Menu, Query Map Entity, and Views submodules) facilitates the interaction between the React.js front-end and the Drupal back-end through persisted queries. The GraphQL module helpfully provides an Explorer submodule which made writing GraphQL requests much easier during development. We used the DraggableViews module for updating the order of the Stories and Acts around the circular navigation seen throughout the site and also the previous/next functionality on those individual nodes. Using this module as opposed to creating a menu aided in the automatic inclusion of all published Stories and Acts into the navigation as well as preventing any parent/child relationships that may arise from using a regular menu. Lastly, we used the Simple Sitemap module to generate a sitemap.xml file that is merely passed through the React.js front-end for search engine crawlers.

Editorial Experience

We strive to build sites with the lowest number of options required for the site editors when entering content. To do this we did the following:

  • Remove the WYSIWYG editor format select field with the Better Formats module
  • Limit the number of menus that a site editor can modify with the Menu Admin per Menu module
  • Minimize the number of assignable roles that a site editor can assign to users (primarily to keep the Administrator role protected)

In order to improve the UI for adding geocoordinates on the map view, we used the Geolocation module's Geocoding and Map widget so Stories and Events could easily be placed in the correct location.

Developer Experience

In order to have different configurations for our local, testing, staging, and production environments we used the Configuration Split module for enabling/disabling the Devel module and different settings for system logging and performance. The Admin Toolbar module is also a must-have for us when working on any Drupal site (the drop-down menus reduce the number of clicks for all user roles).

Community contributions: 

TOKY maintains the Drupal 8 Media Entity Video module for sites like this one with locally hosted video files. We also participated in the following issues related to this project:

Project team: 

Eric Thoelke, Executive Creative Director
Jay David, Interactive Creative Director
Geoff Story, Creative Director
Samuel Bell, Interactive Account Manager
Rob Hutti, Designer
Daniel Korte, Developer
Kelly Smith, User Experience Designer

Team members: 
Ferguson Voices | Home Page
Ferguson Voices | Map
Ferguson Voices | Story Page
Ferguson Voices | Story Page - More Info