The Woodrow Wilson Center (WWC) tasked us with an interesting challenge. They shared a pile of data that tracked all kinds of energy, resource, and production figures from China, Canada, and the U.S. dating back to 2007. Our job was to sort through this incredibly detailed and diverse information (some of the data was literally broken down into end-uses like space-heating, refrigeration, clothes drying, etc.) and find a compelling data story that was informative but approachable, all while fitting it into a single-screen interactive.
We decided that our data story would be about energy and resource production and consumption in the three countries, thereby highlighting some of the interesting changes and trends over the past 5-7 years. For example, China’s production of hydro energy rose dramatically between 2011 and 2012, and its imports of coal skyrocketed from 2007 and 2012. Meanwhile, U.S. coal imports have steadily dropped during the same period, just as our production of renewable energy has seen a dramatic rise. Despite whittling down the data that WWC originally delivered, telling this story involved some pretty heavy content management. Our strategists helped the client interpret, organize, and scrub the data to make sure that it flowed into a clean, impactful interactive.
In parallel with our efforts working with WWC to define the data set, we thought about what kind of design and UX would tell this story most effectively. We wanted to paint a big picture overview while providing an interactive way for the user to dive deeper into the data. One of our primary inspirations for displaying dense, comparative data sets in a simple, visually engaging format was the Gapminder World Wealth and Health of Nations interactive, a handy tool for tracking historical data about how things like income and infant mortality rates have shifted in relation to one another in countries around the globe.
In consultation with the client, our color scheme evolved toward gradations of the WWC logo palette, with aquamarine highlights and a few dashes of color that we chose to represent the 3 nations: red (Canada), blue (U.S.), and yellow (China). The result was an experience that prompted the user to recognize and explore the comparative dynamic of the interactive.
We experimented with various UI patterns and icon sets, trying to design the most intuitive drop-down menu system we could while maximizing screen space. We wanted to avoid obscuring any of the key interactive features, while keeping the UX clean and clutter free. We created what we called “Wow! Factors” in the sidebar for each screen to give the user quick, high-level insights into the main takeaway of each data set.
We worked collaboratively with WWC to create a data visualization that is smart, simple, and fun, and we’re proud of the little details that make the interactive special: the national flags, the toggle between total and per capita data, the way the x and y axes shift depending on the scale and units of measure, the incorporation of the Wow! factors, the iconography. A WWC blog post that accompanies the interactive offers additional context with an overview of related climate, global trade, and environmental factors. Free-standing or as a piece of supporting informational media, the interactive offers a compact, versatile, tightly organized data experience.