VIVA Vaquita Awareness Website
Developed an educational website focused on the critically endangered vaquita. The project combines research, narrative structure, and animated elements to raise awareness. Emphasis was on clear communication and visual flow.
Client:
Concept for VIVA Vaquita
Category:
NGO & Conservation Awareness
My Role:
Interactive Designer & Front-End Developer
Building interactive digital storytelling that can elevate conservation messaging
The Vaquita is the world’s most endangered marine mammal, with fewer than 10 individuals remaining. For this concept, I set out to create an interactive, scroll-based narrative that educates users about the crisis in a way that feels engaging, emotional, and accessible. Unlike traditional static awareness pages, this project uses animation, movement, and a story-driven flow to immerse users in the urgency of the Vaquita’s situation.
It highlights:
The potential of lightweight web prototypes in awareness campaigns.
How interactivity can help users absorb information more meaningfully.
A flexible structure that NGOs could integrate directly into their platforms.
This Vaquita website concept can serve as both an educational tool and a demonstration of how narrative-driven design can be applied to environmental advocacy.
Process: Wireframes & Animations
To create a smooth and cohesive visual flow, I broke the narrative into sequential segments that activate as the user scrolls. Each section is powered by JavaScript scroll triggers, ensuring the pacing of the story feels intentional and controlled. All copy and animation behavior were stored in a JSON object, which made it easier to update text, adjust transitions, and keep logic separate from visual styling. This structure also helped reduce repetitive code and allowed for quicker testing and iteration throughout development.
The interactive site was built using HTML, CSS, and JavaScript as the foundation, supported by MAMP for live browser testing. Antigravity played a key role in helping troubleshoot logic problems, refine animation flow, and streamline interactions during development. I hosted the final project on GitHub Pages for accessible public deployment. Every transition, fade effect, and layered movement in the experience was coded with a focus on maintaining clarity and performance.
Final Result: Interactive Website
The completed prototype includes:
A fully coded, scroll-driven interactive storyline.
JSON-structured content for efficient editing.
A minimal, atmospheric design centered on the Vaquita.
Browser-based functionality suitable for NGOs, educators, or awareness campaigns.
Lightweight code that performs smoothly without additional libraries.
The site demonstrates how even small, simple interactions can create a deeper emotional impact when paired with meaningful environmental storytelling.
