OVERVIEW

Introduction

Deforestation: Our Disappearing Forest is an educational and informative webpage. Users can take a closer look at the drastic causes and effects of deforestation through an interactive 3D space.

Problem

Create an informative WebGL that brings awareness to a current environmental issue. The execution should be both compelling and heavily persuasive.

Challenge

This projects tackles on the environmental crisis of deforestation. The project focuses on visually narrative, revealing the implications of deforestation through a 3D virtual space. The interactive webpage is intended to target any age group as an educational informative piece.

My Roles

UX/UI
Coding
3D Modelling

Tools

WebGL
Cinema4D

Duration

1 month

Watch Project Video:

Paint Points

Understanding the cause

I approached the design process of this project following the rule of three. This 3 step concept will overall help structure the narrative while keeping it simple and engaging.

Divide research in 3 parts
3 Earth models
Narrative is structured into 3 parts
3 modes of persuasion

Paint Points

Understanding the cause

My research was divide by 3 stages, one was researching the state of the world before mass deforestation. The second was finding the causes for deforestation. As I researched, I concluded that there were four major causes. Lastly, I researched what major effects deforestation will cause on the earth in the future.

Ensuring a good user flow

During this stage of the design process, the flowchart was helpful with indicating what interaction and buttons will be implemented in the webpage. This became a visual map of how the code will be organized and how the narrative would be formed.

The narrative has a clear path it takes, starting at the loading screen, and by the end, the user has two options that ultimately lead to the same desired goal.

VISUAL DESIGN

Storyboarding

This storyboard provides a formation of the narrative and demonstrates the movement within the 3D space of the website. It also replaced the need for wireframes since the UI would only include an information box and 3D models.

3D Models

Colour choices were a huge contributor to the user experience. The goals was to impact the users feelings and emotions, so providing a visual example of the changing effect of climate change

FINAL OUTCOME

Results

The final webpage successfully educates viewers about the major causes and effects of global deforestation. It covers issues generated by deforestation such as greenhouse gasses, climate change, rising sea levels, and disappearing arctics. The webpage engages those to interact with a narrative within a 3D space with the use of information boxes as dialogue.

The webpage is designed to keep users engaged, hence the models were both simplified and exaggerated to help support the information provided on the screen. Additionally, text heavy information was also avoided throughout the interactive narrative.

Takeaway

For this project, my primary focus was on crafting a webpage that captivates and persuades viewers, with the aim of leaving a lasting impact. As a designer, I wish to continue to partake in an engaging mission-driven projects that encourage users to make thoughtful and impactful decisions. Through this experience, I discovered the powerful effect that passion for a cause can have on design, leading to outcomes that deliver a compelling user experience capable of driving stronger design decisions.

Continuation

My next goal is to optimize user reach, therefore I would make this webpage more adaptable on a smartphone. The goal would be for users to interact the same way as it is seen on a computer, but organize the UI layout in a way that would be easy to read on a small device, without the loss of the visuals. Additionally, more 3D movements could have been added to increase user engagement.