Tree Canada
Interactive
Landing Page
A persuasive design exploration blending storytelling, animation, and environmental action.
Role: Interaction Designer
Tools: Blender, Framer, Adobe Photoshop
Duration: 3 weeks
Overview
Overview
Overview
Tree Canada is a national non-profit focused on reforestation and urban greening across the country. For this project, I wanted to design a landing page that connects persuasive storytelling with interaction. The idea was to turn simple user actions into something emotional and meaningful. Every hover, click, and scroll would represent a small act of care that inspires people to help nature grow.
Tree Canada is a national non-profit focused on reforestation and urban greening across the country. For this project, I wanted to design a landing page that connects persuasive storytelling with interaction. The idea was to turn simple user actions into something emotional and meaningful. Every hover, click, and scroll would represent a small act of care that inspires people to help nature grow.
Tree Canada is a national non-profit focused on reforestation and urban greening across the country. For this project, I wanted to design a landing page that connects persuasive storytelling with interaction. The idea was to turn simple user actions into something emotional and meaningful. Every hover, click, and scroll would represent a small act of care that inspires people to help nature grow.
Process
Process
Process
I started this project in Figma, building out the layout and figuring out how the story would flow as users scrolled. I wanted each section to feel like a small moment of discovery, moving from awareness to action. Once the structure was in place, I brought my ideas into Blender to create all the graphics and animations, setup the scenes, lighting, and create the plant simulations. After hours of iterating and rendering everything, I built the final interactive landing page using HTML, CSS and JS. This is where everything came together and started to feel alive, combining storytelling, motion, and interaction into one continuous experience.
I started this project in Figma, building out the layout and figuring out how the story would flow as users scrolled. I wanted each section to feel like a small moment of discovery, moving from awareness to action. Once the structure was in place, I brought my ideas into Blender to create all the graphics and animations, setup the scenes, lighting, and create the plant simulations. After hours of iterating and rendering everything, I built the final interactive landing page using HTML, CSS and JS. This is where everything came together and started to feel alive, combining storytelling, motion, and interaction into one continuous experience.
Project Reflection
Project Reflection
Project Reflection
Seeing the final piece come together made me appreciate how interaction design is about more than just usability. It’s about creating moments that stick with people. This project reminded me why I love doing what I do, it's because when it all comes together, design can feel alive.
Final Project URL:
https://ixd1316.phoenix.sheridanc.on.ca/vis_des_landing_page/
This project really changed the way I think about design. At first, I just wanted to make something that looked clean and professional, but as I worked through it, I started to care more about how it felt. I realized that storytelling and motion can shape a user’s experience just as much as layout or color. It’s about guiding someone emotionally, not just visually.
Working across Figma, Blender, and Framer taught me how powerful it is when design and technology meet. Each step had its own challenges. From setting up animations that looked natural, to getting everything to run smoothly on the web. This project helped me to further hone my skills and really showed how smallest tweaks can completely change the feel of an experience.
Seeing the final piece come together made me appreciate how interaction design is about more than just usability. It’s about creating moments that stick with people. This project reminded me why I love doing what I do, it's because when it all comes together, design can feel alive.
This project really changed the way I think about design. At first, I just wanted to make something that looked clean and professional, but as I worked through it, I started to care more about how it felt. I realized that storytelling and motion can shape a user’s experience just as much as layout or color. It’s about guiding someone emotionally, not just visually.
Working across Figma, Blender, and Framer taught me how powerful it is when design and technology meet. Each step had its own challenges. From setting up animations that looked natural, to getting everything to run smoothly on the web. This project helped me to further hone my skills and really showed how smallest tweaks can completely change the feel of an experience.
Tim Ziaziulchyk
Interaction Designer & 3D Artist
© 2025 Tim Ziaziulchyk. All rights reserved.
Designed and built using Framer.