ESPN College Football Tracker

It's a great time to build digital experiences because of the new technical possibilities that are unlocked all the time. It's particularly exciting for us at ESPN, in that we also collaborate with top-notch reporters and editors to give substance and depth to a dynamic visual story.

- ESPN Team

Can you describe your project and the concept behind it?

As college football returned amid the coronavirus pandemic, schools still allowed fans in a limited capacity. Our question: What would cellphone tracking data from three big games tell us about how fans spread out across a region following a game? Our project mapped fan movement to shed light on the subject.

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

We wanted to leverage a mapping library to tell the story in a clear, precise way. Mapbox framework was our choice to do so, and this was our first-ever use of their product in storytelling. It was worth the extra work needed to get acclimated with their structure, knowing it could deliver higher-end visuals for our narrative.

Tell us about your initial moodboard, wireframe, or prototype. How did things change throughout the process?

Our initial moodboard included past Mapbox executions from New York Times, Washington Post and others, along with some other mapping stories we liked. From wireframe to completed project, we built in more small text blocks and specific images, to leave room for additional reporting as well as a clearer narrative for each game.

What web technologies, tools, and resources did you use to develop this?

We gathered large Excel data files, and wrote custom node scripts to boil it down to something a front end could handle. Then we generated JSON files from the data to power our visualizations. We used Handlebars for HTML templating, Scss for better css, Babel to transpile ES6 javascript, Mapbox for mapping, and an asset pipeline. VSCode is our editor of choice. A script queried the US Census API thousands of times for the county codes in our map.

When did you experience a breakthrough or an "a-ha" moment during this project?

One breakthrough moment: when the data was first displayed on the map, it was unnerving because we were still in the midst of the pandemic and could watch the spread happen so fast. While unsettling, it told us that we were telling a story that people would find impactful.

How did you balance your own creative ideas and technical capabilities with a fair representation of the client’s brand?

ESPN is committed to serving sports fans anywhere, any time. To that end, we put a lot of work into ensuring that our design was effective across all screen sizes.

How did the final product meet or exceed your expectations?

The final product met our expectations in the scope and scale of the story we wanted to tell. It exceeded expectations in terms of the data itself — once the three games were plotted, we were shocked at just how far fans travel after a college football game. In particular, the Nebraska crowd was a surprise.

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

It's a great time to build digital experiences because of the new technical possibilities that are unlocked all the time. Mapbox was one example of this, a new world we explored for this piece. It's particularly exciting for us at ESPN, in that we also collaborate with top-notch reporters and editors to give a ton of substance and depth to a dynamic visual story.

See More Projects

World AIDS Day 2020 - A National Conversation -

The National AIDS Memorial

World AIDS Day 2020 - A National Conversation -

View the Project
In Event of Moon Disaster

MIT Open Learning/Center for Advanced Virtuality

In Event of Moon Disaster

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

MediaMonks

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

View the Project