I came up with this idea when I was thinking about how to convey information to people through interactive infographics, using my technical writing background to create step-by-step documentation. It was also a chance for me to practice drawing graphics using 100% pure HTML/CSS/Javascript.

Audience:  General audience, nature lovers


Tools Used

Sass, Waypoints.js plugin, Codepen.io, Evernote, Adobe Color


Understand & Explore


Internet research was pretty simple for this project, since most how-to articles outlined similar steps. Of course, in true paper-writing fashion, I collected the links to compile into a bibliography. Citing sources is important! 

Define & Ideate

Once I broke down the steps, I sketched a scene for each one, keeping them similar to create visual continuity throughout the tree-planting process. I explained them to people I knew, to make sure the steps made sense. 


Coding time! I realized I could create drafts of each graphic using Codepen.io so I could focus on each one before integrating them into the site.

It was tricky to find a way to activate animations when users scroll to a certain "trigger points" on the screen, so I searched for a plugin and eventually found Waypoints.js. 



I had to make sure the site worked on mobile, that colors were compatible, and that the site was browser compatible. Not perfect, but I had a working site. 


In the research phase, I wish I had time to drive to Osh Kosh and interview someone or watch someone actually plant a tree. 

I discovered how useful Codepen.io was as a learning tool and enjoyed using Sass for the first time. Variables and mixins save so much time and headache. Unfortunately, CSS was still quite a headache, so I wish I could have used a framework to make my life easier. With more time, I also could have found a technical solution to incorporate my original animation design.