interactive activity for social good — digital fabrication, web development

SeaYou — Visualizing the impacts of climate change through interactivity

SeeYou is an interactive activity that explores a world especially close to home with a singular difference, the sea rises and falls at the viewer’s whim; with it we can see the impact of 4ºC. Designed to encapsulate the environment of coastal cities, a landscape that 37% of the Earth’s population calls home, this piece acts as both a cautionary tale and a virtual experience.

My Role

Digital Fabrication
Development
UX/UI Design
Researcher

Team Members

Me!

Tools

Cinema 4D
Adobe Illustrator
HTML + CSS
Javascript

Timeline

3 Months

Defining the problem

The average person is exposed to over 6,000 advertisements a day; they act as calls to action that range from buying new shoes to signing petitions. This overexposure to media has resulted in general desensitization and as a result, static imagery is often rendered insufficient.

The issue lies in the fact that climate change has continued to cause trauma to the earth and its inhabitants, and if posters no longer cut it, then experiences must. My goal was to create a short interactive activity that would virtually demonstrate the impacts of climate change. This is summarized in the following design problem: 

How might we highlight the realities of climate change to a large audience in an interactive way?

design process overview

Finding a solution

The above framework was used throughout the creation of the final product and was beneficial in selecting the scope and constraints of the project. Upon conducting initial research I discovered that climate change is such a broad concept that a project that discussed the entirety of its impacts was inclined to cause information overload in viewers. This meant I’d have to reduce my scope and delve deeper into a single impact, despite having to appeal to a majority of people.

research

Content selection

While researching all the potential impacts of climate change, I found that many of the impacts could be directly correlated to rising sea levels, and so I felt that this was the strongest argument to make in regard to its wide-reaching implications while simultaneously focusing on a single topic.

Key Insights

  • The Earth’s oceans store over 90% of the additional heat created from climate change.
  • Linked to increased damage from tropical storms.
  • This is some text inside of a div block.
  • Coastal cities possess the highest risk of damage due to their proximity to the sea. These cities are home to almost 40% of the global population.

Now

  • Currently we are at a global temperature increase of 1.5ºC with an estimated sea level rise of up to 8.9 feet by the end of the century.

3º C

  • The rising sea levels start to threaten drinking water, our flora and fauna would suffer.
  • Saltwater would infiltrate freshwater supplies and cause our current water deficit to double.

4º C

  • We could see a sea level rise of beyond 10 metres.
  • The rising sea levels would intensify the lack of freshwater and cause malnutrition to any inhabitants that remained.
Appealing to anyone

Despite being a topic that is often discussed, climate change remains a controversial subject. I knew that as a result I’d have to rely on persuasive technique beyond scientific research and decide what appeals to use when the project is presented to a viewer who is on the fence regarding the subject matter.

Pathos

Refers to an appeal to human emotion, used most effectively as a motivator for an audience.

Ethos

An appeal that relies on the author’s credibility and perceived moral superiority as a persuasive technique.

Logos

An appeal to intellect, as a result it is based off of hard scientific evidence from credible sources.

While this appeal is typically the most effective, it is evidently not enough for some users. I knew that as a result I’d have to use more than just facts in the creation of the final product.

ideation — user personas

Lightbulb!

I came to the realization that given that the fact that almost 40% of the world’s population lives on a coastal city, an appeal to pathos could be introduced through the gradual destruction of a city, in other words, their homes. This would allow me to appeal to the users who are more emotionally driven, meanwhile backing it up with factual evidence would allow me to consolidate the narrative for people who are logic driven.

design — style guide

Match the tone

I felt initially that if my goal was to reflect an image of current coastal cities I would have to use bright, energetic colours and geometric typefaces in order to capture the boldness of a city. It was during my testing phase where several viewers told me that bright colours ruined the immersion of the project as the subject suggested a more sombre tone. In response to this, I developed the below style guide to better reflect the concept of the project.

design — digital fabrication

Modelling reality

I began the modelling process by first illustrating mockups to storyboard the overall experience.

Once I had gotten to this point, I realized that a three dimensional model would create a more immersive experience for the audience. This was my first attempt at using Cinema 4D for a design this complex.

prototype — three.js

Prototyping

I then used three.js to upload the model onto a site and recreated my initial mockup. I realized that tapping on the water didn’t necessarily come naturally when I was testing the prototype. I began brainstorming different interactions that lent themselves to the concept of increasing temperature.

Range Slider

I decided to use a range slider as my main source of input due to its similarity and affordances related to thermometers; increasing the slider’s position suggests an increase in temperature. I recreated the changes that would occur at each temperature increase to showcase how climate change affects the planet over time as well as the consequences of inaction.

iterate — usability test results

Major Changes

Immersion

As mentioned, I gathered users’ opinions on improvements that could be made. The biggest critique was to revise the model to make it more convincing. In response to this, I redesigned the buildings to create a more realistic atmosphere. Something I had to keep in mind throughout this process was simplifying the model enough so that the loading time would be minimized when opened on a webpage.

evaluate — reflect

Penny for my thoughts?

My goal during the creation of this project was to design for change through showcasing the impacts of increasing sea levels on an environment much of the world calls home. While this project was challenging to develop, it highlighted the importance of creating an argument that was applicable to users with varying viewpoints. In the future I’d like to explore incorporating more clickable content in an effort to create an environment the user can virtually explore.

Keep in touch!
If you’d like to connect, or just check on what I’m up to, click any of the links below.

Designed with ♠ by Jasmine Bhogal