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
image description
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.
image description
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.
image description
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.

Watch

Explore

MediaMonks

Netflix DARK

TBWAChiatDay LA

Behind The Record

Wild Forest

François Audouy

Zuleika Arroyo

Black Women Too

Sid Lee / DIgital Kitchen

The Joker’s Escape

NBC News

Trans, imprisoned — and trapped

The National AIDS Memorial

World AIDS Day 2020 - A National Conversation -

AKARU

Avoriaz

GSD&M

U.S. Air Force ECHO

Animal

Life At Spotify

Center for Architecture

Visualize NYC 2021

HAUS

Tillamook

360 Design

Zoonomia

Wonderland

Wonderland

Gigarama

Sing, My District

Nightjar

Discovered Wildfoods eComm Experience

Dogstudio

ZOOX

MediaMonks

Maserati MC20

Cheil Worldwide, Inc

Samsung Galaxy S21 5G series

NYC & Company

The Black Experience in NYC

ESPN

ESPN College Football Tracker

Paradowski Creative

The Sheldon Website

Active Theory

CHILE20

Active Theory

Secret Sky 2020

Hook

YouTube Culture & Trends Report

Hook

Local Guides

Hello Design

The Marvelous Mrs. Maisel

Studio Airport

Emergence Magazine

Athletics

New York Review of Books

R/GA

ESPN House of 98

ThoughtMatter

CENTER Photography 2020 Compendium

Turbulent

Turbulent.ca

IntraCollaborative

Newest Americans

Rotate°

Big Green Egg

Wide Eye

WhiteHouse.gov

Swell Creative Group

Everyone In LA: 2020 Homeless Count

firstborn

Exo

GIPHY

GIPHY

Content Pilot LLC

Chambliss. Bahner & Stophel

Hello Monday

Bartlett Summer Show

Work & Co

Vistaprint Masks

Hello Monday

Virgin Hyperloop

Forbes

Forbes 30 Under 30 2021

MIT Open Learning/Center for Advanced Virtuality

In Event of Moon Disaster

MediaMonks

Frontier Development Lab: Solving NASA’s Toughest Challenges with Google Cloud × Intel

Jam3

ComplexLand

Spring/Summer

Stykka

firstborn

The Leary Firefighters Foundation

Elephant

Elephant Website