Faunapyr — Species viewer.
Preserving the fauna from the Pyrenees.
Faunapyr is a European Interreg POCTEFA project led by the Aranzadi Science Society, bringing together 16 organizations to protect cross-border ecosystems like the Pyrenees. One of its main goals was to create a public viewer where, for the first time, people could explore sightings of more than 4,000 species from the region.
Building that viewer wasn't straightforward. It had to query a massive dataset quickly, show the results in a way that felt clear and approachable, and comply with strict mapping standards (ETRS89 grids in 10x10 km and 1x1 km cells). To make things even trickier, there was no working API or reference dataset to start from, and the only visual material available was a scrappy guerrilla brand book.
My role was to lead the prototyping effort and support my partner, the main designer, in refining the experience, by polishing key interactions and visuals while working on the prototype. I worked on flows like the time frame selector and the area selection mode, designed iconography for each taxa, and defined the palettes for the choropleth maps. I also took on pieces of the public facing interface, such as the about page and login.
The interactive prototype became central to testing and alignment, while also giving the engineering team a clear reference to build from. It turned what could have been an ambiguous handoff into a solid foundation for the final viewer.
My contribution
Product design, Illustration, Prototyping, Frontend developement.
Collaboration timeline
Late 2019
Interactive prototype
From the beginning, we knew that static mockups wouldn't be enough to capture the kind of interactions this viewer needed. We had to show how it really worked, not just how it looked. The prototype became that medium: a way to demonstrate the potential of the interactions we were proposing, and at the same time give the development team at Aranzadi a clear reference for implementation.
We built it in React, using simulated data and rendering the visualization directly in HTML and CSS. It didn't just cover basic behaviors like zooming and panning, but also the full range of states: navigating the map, selecting taxa, species, areas, and cells (in any combination).
In the end, it felt much closer to a real product than a prototype, and that made it invaluable for both testing and development.