Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
By TOKY Branding + Design on
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 firms.
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 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. 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.
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.
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 the project grows.
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.
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.
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. In addition to a steady flow of traffic, the site received several design industry awards along with mentions in the national press.
Our partners at TOKY elevated the material by translating it into a visual and interactive experience. It’s as if you’re thinking about the material in extra dimensions.
Joel R. Pruce, University of Dayton Human Rights Center
4:30 average session duration
6 industry awards
Technical specifications
Drupal version:
Drupal 8.x
Key modules/theme/distribution used:
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:
Organizations involved:
Team members:
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
Sectors:
Arts
Community
Media
