ESPN

ESPN College
Football Tracker

Best Data Visualization / Nominee
ESPN

Best Data Visualization

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

Q: Can you describe your project and the concept behind it? A: 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.
image description

Q: What influenced your chosen technical approach, and how did it go beyond past methods? A: 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.
image description

Q: Tell us about your initial moodboard, wireframe, or prototype. How did things change throughout the process? A: 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.
image description

Q: What web technologies, tools, and resources did you use to develop this? A: 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.


Q: How did you balance your own creative ideas and technical capabilities with a fair representation of the client’s brand? A: 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.

Q: How did the final product meet or exceed your expectations? A: 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.

Q: Why is this an exciting time to create new digital experiences? How does your team fit into this? A: 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.