Athletics

The
Counter

Charitable Organizations / Nominee

Athletics

Charitable Organizations

Nominee

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. - Athletics Team

Q: Can you briefly describe your project and the concept behind it?

A: 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.

Q: Talk about your initial prototypes. How did those ideas chance throughout design and execution?

A: 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.

Q: What influenced your chosen technical approach, and how did it go beyond past methods?

A: 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.

What breakthrough or “a-ha” moment did you experience when concepting or executing this project?

We started the project with a workshop to better understand The Counter team’s audience and impact goals, which trickled down to inform the entire project. This defined the site’s content pillars, as well as areas of exploration and decision-making throughout the process. Later in the project for execution, we were initially having trouble finding a solution for adding any sequence of custom blocks in the content creation experience that wouldn’t be brittle. After becoming very familiar with layout structure, it was easy to visualize mentally how these blocks could open and close the grid structure to keep content dynamic and structured in a manageable way.

Q: What web technologies, tools, or resources did you use to develop this experience?

A: 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.

Q: How did you balance your creative and technical capabilities with the client’s brand?

A: 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.

Q: How did the final product defy your expectations?

A: 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.

Q: Why is this an exciting time to create new digital experiences? How does your team fit into this?

A: 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.

The Counter