Laguna Ocean Foundation

Laguna Ocean Foundation partnered with our UC Irvine capstone team to redesign their educational website focused on Laguna Beach tidepools. The organization centers on environmental education, conservation awareness, and helping visitors safely explore marine ecosystems.

The existing site contained useful information, but the experience felt unfinished, difficult to navigate, and inconsistent across devices. Important content such as species information, tidepool locations, and tide schedules was either hard to locate or lacked visual engagement.

Our team inherited both the previous codebase and existing project materials from an earlier capstone team. That meant balancing redesign work with understanding an established technical structure, and adapting to evolving stakeholder feedback throughout development.

The redesign aimed to create a more engaging experience for educators, families, students, and visitors while improving usability across both desktop and mobile.

The species guide lacked visual hierarchy and mobile usability, making it hard to quickly identify marine life while onsite at the beach. Information about tidepool locations, live tide data, and FAQs was fragmented across the experience, and the desktop interface felt visually incomplete and inconsistent.

The sponsor also emphasized that the platform should feel more modern and educational without overwhelming people with information.

Beyond aesthetics, the challenge was to redesign the platform around real visitor behavior, whether someone was planning a trip in advance or actively exploring the tidepools onsite.

Through stakeholder discussions and persona development, we identified several core audiences: families planning beach trips, educators organizing student activities, students researching marine ecosystems, nature enthusiasts visiting the tidepools, and children exploring marine life.

A major insight was that people arrived with very different goals depending on context. Some needed trip-planning tools before arriving; others needed fast access to species information in real time at the beach. This became the foundation for restructuring the site’s navigation and user flow.

After meeting with stakeholders and reviewing previous project documentation, we established a prioritized set of requirements that guided the redesign.

Rather than redesigning purely for visual polish, the project centered on solving concrete usability and accessibility issues identified through stakeholder feedback and user needs.

One of the biggest structural changes was simplifying navigation into two primary pathways based on what visitors were trying to do.

Separating these flows created a clearer mental model and reduced how much information competed for attention at once. The updated flow became the foundation for our personas, wireframes, and final interface decisions.

The design evolved heavily through sponsor feedback and changing visual direction. We explored multiple homepage layouts, FAQ structures, species guide interfaces, and navigation systems before arriving at the final experience.

The species guide was one of the most heavily iterated parts of the site. We explored different organizational methods, popup interactions, dropdown systems, and visual layouts to improve usability without overwhelming people. Figma served as both a collaborative planning tool and a way to iterate quickly on sponsor critique before implementation.

A major portion of the project involved translating high-fidelity designs into a fully functional React and Next.js website.

A primary focus was the interactive species guide: alphabetized organization, expandable popup cards, better imagery, improved mobile usability, and keyboard event handling for accessibility.

Because the project inherited an existing codebase, development also meant understanding prior architectural decisions while restructuring parts of the frontend to support the redesigned experience. The project became a strong balance between UX thinking and frontend execution.

The updated platform created a clearer separation between trip planning and species exploration while making educational content easier to discover and interact with. It also better aligned with the foundation’s educational mission, creating a more approachable experience for families, students, and beach visitors.

Most importantly, the project transformed the website from an unfinished informational resource into a polished educational platform capable of supporting real visitor experiences.