We Care, The
Interactive
Experience
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.
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.
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.
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.
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.
Important
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
Optional
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
Important
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
Optional
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 ExperienceFor 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.
