← Back to work UX DESIGN & FRONT-END DEVELOPMENT

ZooQuarium Live

A scalable, accessible web platform that centralizes live animal cameras from zoos and aquariums across the United States.

ROLE Designer & Developer
TIMELINE 8 Weeks
TECH STACK HTML5, CSS3, JavaScript, Figma
ZooQuarium Live homepage
THE CATALYST & DATA

The inspiration sparked from a conversation with my partner who mistakenly believed platypuses were extinct. Knowing the San Diego Zoo offered a live platypus cam, I realized there was no central hub for this kind of educational content. I began by compiling and categorizing data from institutions actively involved in wildlife conservation, organizing their live feeds by state and species.

Platypus inspiration and brainstorming
INFORMATION ARCHITECTURE

From storyboards to Figma wireframes, my priority was creating a scalable content structure. The architecture needed to seamlessly accommodate new live cam sources over time without breaking the layout. I established two primary user flows: a species-based directory and a geography-based interactive map.

Figma wireframes for homepage Figma wireframes for map
HUMAN-CENTERED DESIGN

Because the target audience ranges from teachers in a classroom to parents checking in on the local lions at breakfast, the UI had to be highly accessible. I designed a cohesive, nature-inspired visual identity and implemented straightforward filtering options to prevent users from feeling overwhelmed by the volume of content.

High fidelity directory interface
WEB DEVELOPMENT

I built the platform from scratch using HTML5, CSS3, and JavaScript. As I translated wireframes into code, I focused on ensuring the interactive map and directory sorting functioned properly across different screen sizes while maintaining web accessibility standards.

OUTCOME & REFLECTION

ZooQuarium Live demonstrates how a simple interaction can scale into a fully functional product supporting real-world wildlife efforts. It elevates the important missions of existing organizations by streamlining accessibility to educational resources across a range of audiences. In future iterations, I plan to develop advanced filtering options for the interactive map and increase accessibility through a dedicated mobile app experience.