The Counter is a nonprofit, independent newsroom investigating the forces shaping how and what America eats. The Counter (previously The New Food Economy) worked with Athletics on a new name, identity, and digital experience to widen its audience beyond industry insiders. The visual identity was inspired by the intersections evident in their reporting, using two distinctly different typefaces and layered imagery to hint at these collisions. For the digital experience, emphasis was placed on using navigation to reinforce The Counter’s mission, as well as to provide a flexible and visual storytelling experience to accommodate brief text-only news to immersive long-form pieces.
While we started the project with renaming and rebranding, the site process started with a phase we call Experience Definition: one one hand, we document the modules/pages/template we need for the site, while on the other hand, exploring sketches and ideas around areas of opportunities for the site or how we might meet the project goals in a more tactical manner (like promoting the newsletter, which can be a tool to drive donations). This gave us a clear picture of what we were designing and building which largely carried through the design process, although several ideas got dropped or simplified as the design progressed to better match client workflow or to focus on content.
Editorial workflow was the biggest driver on our technical approach. We wanted to help The Counter team in creating a rich and flexible content experience that wasn’t cumbersome to use, especially given their small team. Through direct collaboration with The Counter team, we found technical solutions that are quick, flexible, and user friendly. From an editorial workflow perspective, the tools and methods implemented in this project are a great iteration on solutions we’ve implemented in the past.
Visual design was both created in and conveyed to the technology team in Figma, and Visual Studio Code is now our text editor of choice. The front-end uses the standard array of HTML5, SCSS, and JavaScript with the builds handled by webpack. The content management system uses WordPress, adding more flexibility to the Gutenberg editor with the Advanced Custom Fields plugin. The site is hosted with WP Engine. We kept our local and remote environments in sync through WP Engine’s Git integration.
Collaboration played a major role in understanding the needs of the organization and its editorial mission. Through this, we were able to build a level of trust that allowed us to push the boundaries of both our creative and technical ideas. On the visual side, the identity was created with an emphasis on the typography and color system, which can be set by the front-end of the site and come through even in more reserved content moments of the site. On the technical side, a visually focused content creation experience in the CMS enables The Counter to make the full use of the available article modules, which results in a site experience that supports both our objectives.
We often build solutions that are not fully embraced or utilized by client teams after our work together ends, but The Counter team has made full use of our design system and its corresponding implementation. This has allowed them to create more engaging articles and publish more frequently on their new site, as well as embark on new reporting projects. The Counter also has a clear understanding of the underlying system of the site and how it can be extended, which gave us the opportunity to continue working with them post-launch to adjust the new Series functionality and extend the system to be able to rapidly respond to the Coronavirus crisis.
Clients are more savvy about digital than ever before, which allows us to reduce the time required to educate them and get much more quickly to what a digital experience needs to do for the audience and the client. This results in solutions that are more successful at realizing opportunities and addressing challenges. These solutions are also more inclusive, spanning both the audience experience in the front-end and the content creator experience in the CMS. The power of the technology supporting these solutions has also continued to grow exponentially, so things that were a challenge last year are a breeze this year. This allows us to seek out the next challenge and drive the web forward.
