Climate Change Guide

An interactive website explaining climate science basics
11 Weeks | Student Project

Objective

Climate science is a complicated and overwhelming topic. How might we make it easy and interesting for more people to learn about climate science so they can make informed choices?

Details

I designed and built a website that breaks down complex jargon into simple concepts aided by visual graphics and motion for better understanding and increased engagement.

Role

Research
Website Design
 & Development
Illustration
Motion

Tools

Figma
Illustrator
After Effects
Webflow
Lottie
Overcoming climate change is the largest challenge we face in the 21st century. Tackling it will take participation from everyone, including individuals, corporations, and governments.

Design

view project online

The climate change guide, What's up with the Climate? is an interactive website filled with illustrations, animation, and information about climate basics. Take a look to see for yourself!
View Climate Change Guide

Social media campaign

A series of Instagram posts were created to market the website by letting viewers know that there are no stupid climate questions and sharing topics or common questions people may be interested in learning more about.

Research

Context

Climate science is a complicated subject and basic concepts are not widely understood. UNESCO reports that only 56% of young adults in the US can articulate what climate change is, and that number is lower in countries with less access to education.
Existing information is often presented in one of two ways: hard-to-read academic journals and lengthy reports or news presented with facts-emitted, exaggerated, and slanted narratives.

Survey Research

To get a better understanding of current views, I surveyed 38 people about their interest in climate science and their perception of the value of climate education and action.
Despite my initial assumptions that people may feel burnt out or weary hearing about climate change, 89% of people surveyed expressed interest in learning more about climate science with a desire for more widespread and easy-to-understand information.
Insight
There is interest and a need for accessible climate information.
Most people agreed that knowledge about the causes of climate change is important. However, there were different responses when I asked what those causes were, suggesting that there is a lot of misinformation and confusion when it comes to climate science.
Insight
It is important to start with the basic concepts and provide resources for more information.
Many expressed that there is a collective need for taking action, however, some had doubts about their impact and felt that individual actions do not make any difference.
Insight
This project should suggest clear actionable steps that individuals can take to make a difference.
“I care about the impact I make on this Earth, and what I leave behind.”

“Are things making a difference? It all seems kinda pointless…”

“It’s important to understand how our day to day activities contribute to it as a whole.”
‍
“If more people had a basic understanding, we could take some sort of action.”
quotes from survey respondents

Additional Research

In America, climate science is often closely linked with partisan politics and has become an issue of identity which influences people's opinions. In addition, psychology informs us that if you make people feel fear, guilt, or a combination of these emotions, they may disengage and avoid or ignore that topic. People may be less likely to make any behavior changes when faced with content that feels alarmist.
Insight
It is important to use neutral language with friendly, non-challenging language that does not rely on scare tactics.

Personas

The Young Activist

Simon, Age 17
About: Simon loves helping other people and wants to make a difference in his local community. However, he is confused about climate change. He knows it is a big deal, and many of his peers are young activists. However, he didn't learn very much about it in school and when he talks to other people about it he finds that he can't articulate what it is or why they should care.
  • Has a short attention span and is a visual learner
  • Is a busy high school student but spends time online on Instagram or TikTok
  • Needs talking points or content he can share online to encourage others to join his cause
"This is our planet. We have to save it, NOW."

The New Mom

Esme, Age 28
About: Esme is a new mom working part-time from home. Having a child has changed her life—suddenly she feels the burden of creating a better future for her son. She has made some lifestyle changes for the environment, like using her own shopping bag, recycling, and trying to buy green products. However, she finds these changes are more expensive and often has to go out of her way for them.
  • Is often tired and busy and unsure if anything she is doing is even making a difference
  • Isn't interested in reading scientific literature with a lot of technical jargon
  • Looks online or on social media for ideas on how to make environmentally friendly lifestyle changes
"These compostable baby wipes are almost twice as expensive - does it even make a difference?"

The Skeptic

Jay, Age 56
About: Jay is a construction manager who values integrity and character above all else. He spends his free time fixing up his car and maintaining his home and property - tasks which give him great satisfaction to do himself. He has always done things his own way (his wife says he is stubborn to a fault). He is skeptical about information shared through popular media sources.
  • Doesn't readily trust or believe people right away and instead prefers to do his own research
  • Does not like to be told what to do or how to feel
  • Suspicious of organizations that may have alternate agendas or political affiliations
"Climate change is part of Earth's natural cycle—nothing we do makes any difference."

summary of key research insights

1
There is interest and a need for accessible climate information.
2
It is important to start with the basic concepts with evidence and provide resources for more information.
3
This project should suggest clear actionable steps that individuals can take to make a difference.
4
It is important to use neutral language with friendly, non-challenging language that does not rely on scare tactics.
Science communication and visualization are essential to bridging the gap between scientific research and the general public's understanding.

Process

1. Developing Content

After researching user needs and compiling information about climate science, I started in Figma with a low fidelity wireframe. Each section was structured to answer a question about the climate. In this way, I could work backwards to develop what the illustration and accompanying text needed to convey before making any design decisions.
Low fidelity wireframe in Figma

2. Designing for content

The next iteration in Figma introduced color, typography, and quick conceptual sketches that I drew in FigJam. This stage proved to be of utmost importance—before spending precious time developing the illustrated animation I was first able to get feedback on the idea and how it was interpreted. I also received feedback that there was room to improve the typography and color palette for the web design.
Medium fidelity wireframe in Figma

3. Illustration

At this point, I had an idea of the animation and needed to build the pieces. I used Adobe Illustrator to create vector illustrations that would later be exported to After Effects. I used a limited color palette to build consistency throughout the website design and illustrations and kept shapes simple so they would be easier to animate.
Illustration in Adobe Illustrator

4. Animation

In After Effects, I animated the illustration, keeping in mind limitations for Lottie.
Animation in Adobe After Effects

5. Refining Design

I developed a type scale based on the golden ratio to establish hierarchy within each section of the website. Poppins was chosen as a modern geometric typeface that was simple and complimented the geometric shapes in the illustrations. I started with a 5-color palette that consisted of a light and dark neutral color, a warm and cool earthy color, and a bright "pop" of color, in this case a bright red that was both eye-catching and alluded to potential consequences of climate change. A few additional shades were added as needed.
Type scale & color palette

6. Putting It All Together

To put it all together in Webflow, I exported the animations as lottie json files using the bodymovin plugin for After Effects. In Webflow, I set up a trigger for each animation to create an interactive experience as the user scrolls through the page.
Putting it together in Webflow

Future roadmap

This project lays the foundation for the design and structure of an online learning resource for climate education. The next steps would involve working with climate scientists to develop more content and dive deeper into topics and user testing for comprehension and engagement.

Post-mortem

What worked well: Because this project relied heavily on visuals for explaining concepts, it was helpful to get feedback from other people during both the conceptual and execution phases of the illustrations and animations. This was critical to prevent oversight or sending the wrong message.
What I'd do better next time: Throughout this project, I learned that motion and interactions need to be carefully considered to spark interest without distracting or overwhelming viewers. In future projects of this nature, I will work toward ensuring that the visuals support the data and enhance it.
Knowledge can empower us to make informed choices in our day-to-day lives, the industries we work in, and the societies we participate in.

You May Like

Branding
Twice Sold Tales
Editorial Design & Illustration
Wild Wonders
Back to Portfolio