The goal of this project was to create an explainer animation that translates the complexity of a rainwater harvesting system into a clear and engaging narrative. The challenge was to communicate sustainable engineering concepts to a non-technical audience while keeping the visuals consistent, approachable, and memorable.
Background
The rainwater harvesting system is located in Building 13 at Tecnológico de Monterrey University, Campus Querétaro, and is part of the School of Architecture, Art and Design (EAAD). The project required turning a physical, academic installation into a visual story that could inform, inspire, and raise awareness about sustainability.
How it Works
Based on the original engineering diagrams, I built a simplified visual system that highlights the four key steps in the rainwater cycle:
- Capture – Rainwater flows through the system’s surface collectors.
- Filter – The water is directed through filters to ensure quality.
- Store – Clean water is stored safely for reuse.
- Reuse – Ready for gardening, cleaning, or other sustainable applications.
This modular breakdown helped define the motion language and ensured each stage was visually distinct and easy to understand.
Inspiration
For the visual style, I drew inspiration from isometric artwork like Eboy’s cityscapes, which achieve clarity and depth through minimal forms. I experimented with the new native 3D features in After Effects, which provided more advanced control than the traditional 2.5D workflow while keeping the animation lightweight and consistent.
Initially, I considered developing a look closer to pixel art, but after running some tests I found it too visually distracting. Instead, I decided to pursue this alternative approach, which better supported the project’s clarity and overall aesthetic.
From Inspiration to Concept Sketch
Once I defined the isometric direction, I moved into Procreate to create early sketches that translated the technical installation into approachable visual geometry. This step allowed me to explore perspective, hierarchy, and how different components of the system would connect before moving into motion.
Style Frames
I developed several style frames to explore different possibilities for the project’s visual language—testing variations in color palette, geometric abstraction, and narrative clarity. Among these explorations, the frame presented here proved to be the closest to the intended direction. Its simplicity works effectively within the limitations of After Effects’ native 3D features, while still supporting the storytelling goals with clarity and consistency.
Individual animated elements
The animation was designed as a modular system. Each element—raindrops, filters, tanks, pipes, and flow indicators—was animated individually. This approach allowed flexibility, reuse across different parts of the explainer, and ensured visual consistency in the motion principles applied.
