We Care, The

Project Problem

How can we teach about the threats of climate change in an engaging way?

Project Video Demo

Try the We Care Experience

Project Overview

content_paste Responsibilities

This project was the result of a school project based on familiarizing myself with new JS libraries and tools. For this project, our expectations were to use a new library to create a visualization to teach users about environmental awareness.

I specifically wanted to explore the three.js library and take advantage of 3D tools to create a short experience for users to walk through.

I chose the three.js tool because I was interested in learning more about 3D software as I was just starting to experiment with it at the time. This allowed me to experiment with Cinema 4D, which was new to me before this project.

schedule Constraints

The main expectations for this project were that it had to focus on environmental issues, that it had to link to the 350.org website, and that it had to use a new visual JavaScript library.

Other then those expectations there were the time expectations, I was given about a month to complete this project while maintaining and balancing other classes in the background.

Because of the deadline and the fact that I was using a new 3D tool and an unfamiliar code library, it was important for me to manage my expectations and prioritize MVP (minimum viable product) functionality. Once my MVP was complete, I was then able to add several features that made the product more complete.

group Users & Audience

For my users and audience I wanted this project to be as accessible as possible to users, including a younger age demographic. I wanted the final result of this project to be able to be used as a teaching tool in schools.

To do this I adapted the project to use simple terminology and make use of visual storytelling rather than large amounts of text that could be a barrier for users. I made this decision as I was developing the project and found that the amount of text users were subjected to slowed down and broke up the experience. I decided to modify the project and include only a small amount of text that appeared at the bottom of the screen and linked users to a resource they could use later to learn more.
Try the We Care Experience
UpSkill Logo

User Flow

We care user flow
The user flow for this project, the ultimate goal of the project, should be to help users become interested enough in environmental threats that they choose to learn more about climate threats by visiting a more informative site.

Project Planning

Feature Checklist

To keep track of the features that needed to be included in this project, I created a checklist with a list of features and whether they were important or optional features. This list was helpful in prioritizing different features.

done Planet Spinning With Mouse.
done User input detection
done Objects hide as user clicks on them
done Tracking of elements users have clicked on
done Start and End Screen

done Reset Button
done Globe changes as user finds environmental dangers
done Plane & Clouds flying around globe
close Multiple Stages
close Smoke animating from factories
close Hints for users / tutorial

Solution & Reflection

The "We Care" environmental experience aims to address the problem of educating users about the threats of climate change. Users must rotate and control a spinning planet to find various threats to the climate.

For this project, I decided to focus on a simple UI and use visual storytelling. As users find and click on environmental threats, the mini-planet goes from dark and gloomy to bright and vibrant as trees grow back and the environment repairs itself. This project is memorable for me because I paid a lot of attention to details when it came to creating a smooth experience for the user.

The We Care project tested my ability to develop a concept and see it through to completion, while creating an experience that is meaningful to the user. This project went through many different stages of development that often challenged my coding skills. Despite the obstacles, I'm proud of how the We Care experience turned out because of the project's simple yet powerful storytelling.
Try the We Care ExperienceIpad wecare mockup 2IPad we care mockup text explanationIpad we care mockup