Topic

Our scrollytelling website ‘Greenhouse Gases made visible’ informs and educates about the human-made greenhouse gases. More precisely how CO₂, Methane, Nitrous Dioxide and F-Gases are related to global warming, where they come from and where they go and we explain and visualize the meaning of carbon dioxide equivalent (CO₂eq).

Human made greenhouse gases in a nutshell:

Greenhouse gases are the essence of climate change. They are often mentioned, but not always properly explained. The different characteristics of Carbon Dioxide (CO₂), Methane (CH₄), Nitrous Oxide (N₂O) and F-gases reinforce and speed up climate change in different ways. 
The warming of the earth itself through greenhouse gases is a natural process, without which it would be about 33 degrees Celsius colder. However, too many gases cause the earth to heat up more than would actually be expected from solar radiation.

Sketches & Ideas

We wanted to show what properties the different gases have, for example how they are produced, how harmful they are for climate change and how long they can remain in the atmosphere.

CO₂-Equivalents: In order to be able to compare the global warming potential and how harmful the individual gases are to the climate, they are measured in CO₂-Equivalents (CO₂eq). The climate-damaging effect of carbon dioxide is taken as a benchmark and the other greenhouse gases are related accordingly in parts per million (ppm) CO₂.

Worldwide Comparison: We also want to break down which countries or continents have produced which type and quantity of greenhouse gases in which years and in which sectors. The idea was for the user to be able to compare the differences between different years, sectors, etc. by adjusting a parameter to change the graph.

Later on, we noticed that this complex idea of a worldwide comparison deserves a separate website, wherefore we didn't implement it into our scrollytelling website.

Concept

The final Website is a one pager with a few scrollytelling parts, where information visualizations are animated. The usage of dots is a basis for most of our visualizations, which comes from an early sketch to explain the CO₂-Equivalents. Another main part is the 4-column-layout we are using for the whole website up to the conclusion part. That means we have one column for each gas, a sticky Header shows which gas is represented where on the side and all information about each gas is in this layout.

Style

Process

We started by sketching a lot of ideas for the visualizations and how we could communicate and explain the complexity of the CO₂-Equivalents. Then we built screens and designs in figma. We created the style guide quite early, having 4 colors for each gas, the Roboto Mono for Headers and the Roboto for texts. In the beginning, we did research to write all texts and discussed the layout. We documented all our notes, to dos and the feedback from the presentations in Evernote, to be on the same page and get an overview on what to do next. Finally we started coding the website, using static HTML, CSS and JavaScript. After every coding step we pushed the code to GitHub, from where we also launched the page. In the last 3 weeks of working on the project, we had several design and code iterations to optimize the reading flow.

Final Result

To take a look at the final website, visit https://caroachtrm.github.io/. Note that the website is best displayed in chrome or opera and for the purpose of this project it is non-responsive.

Conclusion

Due to the given topic, we already had a direction in content on which we could focus, which saved us a lot of research time. However, even with this focus, we wanted to fill our website with too much different content and over time we realized that it is important to focus on the main topics while working scientifically and to put an eye on the visual language and concept throughout the project. 

Furthermore we found it very helpful to get frequent feedback from external people in between to improve our website continuously.

We have found that, to work efficiently, each person should focus on one working discipline, either visual elaboration or implementation, including a big number of loops between design, content and development.