The Marine Mammal Center: 50th Anniversary Timeline

A UX and UI design project completed in collaboration with Cast Iron Coding for The Marine Mammal Center, a nonprofit ocean health organization based in Sausalito, CA.

The timeline celebrates the Center's 50 years of marine mammal rescue, research, and conservation. The design needed to make a dense body of historical content feel navigable and engaging without overwhelming the user.

The core experience is a vertically scrolling timeline with decade-based jump navigation that stays fixed at the top of the screen as the user scrolls. Event cards highlight in blue as they enter focus, whether through scrolling, a decade link, or keyboard navigation. Multiple images within a single event are displayed in a slider consistent with the Center's existing site design.

The mobile layout removes the connecting line element to maximize space for content, and the decade navigation collapses into a compact row of buttons to meet accessibility standards.