10 Endangered Species of Brazil

Overview

As one of my final projects during my Interactive Media Designer apprenticeship, we focused on scrollytelling, learning how to tell stories through interactive scrolling animations.

We were free to choose any topic, and I decided to highlight endangered rainforest species from my homeland, as it’s an issue that’s been growing over the years.

Since people naturally feel connected to animals, I built the experience around that emotion, showing how they’re slowly disappearing. The project focuses on 10 species, inspired by the 100 Lost Species concept but scaled to fit the timeframe.

Structuring and Wireframing

The first phase was defining what the experience would include. I started by creating a site structure that mapped out all sections, along with notes on what content would go where and the CTAs, especially since I wanted users to easily find ways to help if they felt motivated to do so.

After that, I moved into wireframing. Since the website was a one-pager, I explored multiple layout variants. I also approached the wireframes like a storyboard, already thinking about how animations would play out and which moments would best deliver the message I wanted to communicate.

User Testing

After selecting my two strongest wireframe options, I conducted user testing to understand how first-time users would experience the information flow, focusing on the static layouts first.

This helped me notice that certain elements worked better in one version than the other. So I continued testing a bit longer and eventually combined the strongest parts of both into a refined direction.

Into Framer

For this project, Framer definitely helped me create the kind of scroll-based animations I had in mind, which is why I chose to build it there.

Since the site uses a lot of high-resolution images, I couldn’t publish it properly without hitting the limits of the free plan. So instead, I uploaded a Vimeo walkthrough so people can still check out the full experience.

Final Screens

I’m very satisfied with the final design. The animations represent well the feeling of fading away, or in this case, slowly disappearing and the rainy rainforest environment is also reflected throughout the website.

Project Takeaways

Even though, in my opinion, scrollytelling isn’t always the best approach for user-centered design, I do believe that when it’s used to tell a proper story and share emotions, it really stands out. When done right, it can create a memorable and impactful experience that goes beyond just visuals.

Made with lots of love (and coffee)

by Arthur Spring

Made with lots of love (and coffee)

by Arthur Spring

Made with lots of love (and coffee)

by Arthur Spring

Location

Zürich, Swiss (08:51 AM)