How we used UI/UX to confront the climate crisis

There’s no easy way to talk about the climate crisis. But what if there was a better way to present it?

Why is this about the climate crisis?

When we started this project, we had one goal in mind: to tell a compelling story about an unsettling and difficult subject in a palatable and engaging way. We wanted people to fully immerse into a subject — one that genuinely inspires them to dive deep — all without feeling intimidated.

We had a strong inclination towards climate change because of all the things going on in the world today, it’s the one issue everyone can relate to. It’s a global emergency that transcends our differences as humans — everyone and everything is affected. No sides taken.

Humans. Animals. Microbes. Everything.

And the crisis is only getting worse. Yet, for such a heated issue, most of our reactions still remain lukewarm. How is it possible that we are not all more aware of how the planet is quickly depleting? Then again, who can blame us when the actual problem feels so distant to us?

The climate crisis has always been viewed as this massive problem only politicians and world leaders are eligible to solve. Us regular folks? Totally out of our league. We just don’t feel like we can make a difference because our daily efforts seem so insignificant. And nobody is interested to be a part of a problem they don’t think they can solve. Or at least that’s how we’ve been taught to believe.

It doesn’t help that it is a difficult topic to have a casual conversation over. The doom and gloom vibe doesn’t always sit well over coffee and it’s probably not a good idea to share that depressing picture of a starving polar bear before your main course.

So, we know the climate crisis is never easy to talk about. And the distressing materials we have now hasn’t exactly helped either. But if we’re going to encourage more people to talk about it, then something has to change.

And this is where we asked ourselves…

What if we can change how we present it? And change how we share it?

This portfolio project is designed as a microsite aimed to pique people’s interest and encourage conversation in this dire situation via modern UI design. We wanted to explore the possibility of juxtaposing a deeply pressing issue with an approachable aesthetic, hoping to turn apathy into inspiration and ignorance into knowledge.

Since harsh facts and horrific data hasn’t worked so far, we thought: why not captivate them into absorbing more information instead? We approached this as we do most designs by translating and distilling complicated data into beautiful, digestible forms.

We wanted to cut the fear, the distance, and the helplessness and replace it with hope, relatability, and power so people can start realizing how much more they can actually do for the climate.

Full disclosure though: we are obviously not climate experts and this is purely experimental. We simply wanted to do something that challenged our skillsets while delivering an important, meaningful message. So, to many people’s dismay, this is not an actual website although we believe it should be.

So, what’s our design approach?

Let’s break down our key points:

• Horizontal scrolling
• Parallax
• Geometric + organic shapes
• Style and colour
• Typography

Parallax

Parallax is trendy for a very good reason and we were so excited to experiment because it offered so much room for things to get real crazy. But instead of the usual parallax made of layered images, we decided to take it up a notch and layered flat illustrations. We honestly weren’t sure if it was gonna work (or even be a hit!) but we took a risk to combine them to create something with a sense of depth and realism.

We got many questions asking how our parallax was done on Adobe After Effects and as simplistic as it may sound, it is based on one basic principle: the object/layer closest to you moves the fastest.

Here’s a simple breakdown of our layers:

Top: Background; moves from left to right; slowest layers.
Center: Mid-ground; stays almost always centred; mid speed.
Bottom: Foreground; moves from right to left; fastest layers

You’ll see that when the background and the foreground move at different speeds and directions, it creates this camera panning illusion like it’s turning at 180 degrees.

Geometric + organic shapes

Taking inspiration from our environment, we balanced the contrast between geometric and organic shapes to represent the coexistence of man-made structures and nature. But we had to be careful with how we used them; we had to weave approachability with structure and too much of either will end up with something too stiff or too playful.

For example, one way we’ve subtly incorporated structure into the site is through a fixed grid layout. Everything deliberately follows the invisible grid so the UI looks organized without adding any unnecessary weight.

Even in our visual data, the strong straight lines are contrasted with roughly drawn circles so while the data remains orderly, the page doesn’t lose its friendliness.

The animals are actually a perfect example of this contrast balance. They’re all made of a combination of basic geometric shapes — circles, rectangles, trapeziums — but thoughtfully used and manipulated to keep their natural forms and curves while still holding a strong, distinctive structure.

This balance trickles all the way to our typography selection. You can see they are also contrasted against each other: one is a rounded, energetic sans serif font and the other a classic, elegant serif font — but used together, and they somehow play to each other’s strengths.