Laguna Ocean Foundation

We partnered with the nonprofit Laguna Ocean Foundation to improve their website experience through thoughtful design, supporting their mission of coastal preservation through discovery, education, and community outreach.

Overview

Over 10 weeks, we redesigned their digital presence, improving clarity, branding, accessibility, and engagement through a full end-to-end process encompassing design, development, and project management.

TIMELINE: 10 weeks
TOOLS: Figma, React.js, Trello
PLATFORM: Mobile & Desktop

CLIENT: Nonprofit Stakeholder
TEAM: 6 students (Design/Developer)
MY ROLE: Lead Developer

Website Redesign

We redesigned the Laguna Ocean Foundation website to solve issues with usability, accessibility, and outdated visuals.

Our approach was multifaceted, incorporating:

  • User research, competitive analysis, personas, and iterative prototyping all grounded in real stakeholder input.

    • Through multiple design and agile development cycles, we created a responsive site that communicates the foundation’s mission.

Inherited Website →

The original website:

∙ Wasn’t optimized for both mobile and desktop devices.

∙ Had weak visual branding.

∙ Displayed a lack of clarity in content and calls to action.

Client Needs: The foundation needed a site that would reflect their mission, attract donors/volunteers, and work across devices.

Project Planning & Scoping

Project Management Tools - Trello Boarding

I created a Trello board to centralize important resources and track our progress using a Kanban-style layout based on our stakeholder priorities.

Problem Statement:

"How might we redesign the Laguna Ocean Foundation’s website to better support user needs, increase accessibility, and foster deeper digital engagement with coastal preservation efforts?”

User Personas

Diagramming

Pictured here is a UI flow outlining core screens and user interactions, followed by a support copy diagram that visualizes the user journey across roles and touchpoints.

Task flows were then developed to map specific user actions within the app.

Sketches & Storyboards

Focusing on mobile-first, I used user stories, sketches, and wireframes to map out core interactions on smaller screens. This process helped prioritize essential content and guided design decisions that improved clarity, usability, and flow.

Storyboard

Low Fidelity

Wireframes

Visual Research

We performed a design exploration of zoo and wildlife websites and found common patterns that informed our approach. We found that these sites emphasized:

  • Clear, unobstructed photos to capture attention.

  • High-contrast, readable text to support accessibility for younger users.

  • Simple layouts with minimal distractions Interactive elements (like tabs or filters) to organize information intuitively.

Key Design Decisions

Species Guide Layout

We explored two layout options for the species guide: one that emphasized elegance and visual refinement, and another that prioritized clarity and ease of reading. We chose the latter for its better accessibility and ability to accommodate the varied colors, textures, and compositions of the photos.

Interactive Map Integration

The original site’s location info was fragmented and hard to navigate.

  • By choosing to centralize everything into one map-based experience with collapsible cards, we made it faster for mobile users planning visits while they’re on the go!

Universal Redesign ( A Mid-Project Pivot!)

Midway through the project, we identified overlapping and repetitive user flows, particularly in the homepage and Plan Your Trip section. Choosing to improve clarity and usability, I revisited user personas and mapped out high level user journeys to guide a more focused, goal-oriented experience.

Page Flow of L.O.F

The page flow follows a clear, branched structure that guides users through key content.

Main User Flows

1. Adventure Guide: Users start by planning a visit, then have the choice to explore tidepool charts, interactive maps, and location tabs to choose where to go. From there, they can access event info, safety tips, and directions.

2. Species Guide: Users enter through the Species Guide, browse categories or search visually, then click on species cards for more info. The layout prioritizes readability and supports all types of users, from casual explorers to educators.

Launched Site →

Summary of Changes

We focused on four key areas:

Design & Accessibility: Ensuring a unified visual style.

Navigation & User Flow: Streamlining the user journey with an improved persona-driven flow.

Interactive Features: Including a responsive map and coordinates.

Content & Layout Improvements: Redesigning the species guide and updating information.

Reflection & Growth

  • Challenge #1

    One of the biggest challenges was the lack of direct access to key stakeholders. Our mentor acted as a liaison to a larger, "invisible" team, which sometimes led to misaligned expectations and last-minute shifts in direction.

    Impact: This introduced avoidable rework late in the project. If we had direct communication early on, we could have clarified goals and reduced iteration fatigue, resulting in a more efficient and focused design process.

  • Challenge #2

    Since this was a nonprofit, it was important to balance functionality with long-term impact. I would have liked to lean further into strategic thinking, not just aesthetics, by proposing scalable features that increase user engagement, like community photo uploads, shared species logs, or donor-oriented calls to action.

    Impact: While we succeeded in modernizing the UI, the site could have done more to foster community involvement and recurring traffic. Bringing in more business-oriented solutions could improve outreach and support future growth.

  • Challenge #3

    Given the tight timeline, we prioritized clarity, responsiveness, and structural fixes over expanding features. This was the right call for scope control, but we initially imagined more dynamic interactions and richer content modules.

    Impact: The redesign is clean and functional, but lacks the "wow" factor or interactivity that could further elevate user engagement. More time would have allowed us to test and implement these elements, potentially improving both user retention and organizational visibility.

Here’s what I learned!

    • As one of the main developers, I took on a larger portion of the technical workload, which meant navigating real-world friction, like pushing and pulling code.

    • Managing merge conflicts, syncing changes, and helping my teammates implement features pushed me to improve my communication.

    • Working with a nonprofit and receiving stakeholder feedback through an intermediary introduced added complexity.

    • I had to learn how to stay flexible since the project had more swirl and pivots than expected, unclear stakeholder input, shifting requirements, and time constraints.

    • We didn't follow a perfectly linear method, since we started with the existing website as our baseline. This meant we had to rapidly iterate based on stakeholder feedback, user personas, and technical limitations.

    • I took inspiration from child-friendly platforms like San Diego and Los Angeles Zoo websites as well as National Geographic Kids, which prioritize clarity, color, and intuitive navigation without overwhelming users.

    • I leaned into my project management strengths to keep design decisions organized and traceable. Each step focused on reducing visual clutter, emphasizing structure, and implementing core UX principles.

    • Even when the process was chaotic, I tried to keep the user experience clean, balancing aesthetics with practical functionality.

    • This project taught me a lot about refining the user experience, managing tasks, and adapting quickly when goals shifted.

    • My team contributed to features like the FAQ page and the interactive map design tasks along the way, and together, we responded to feedback with flexibility and focus, ultimately creating a site that’s clear, accessible, and more aligned with real user needs.

    • This experience sharpened how I prioritize projects through uncertainty, and reminded me that messy processes often lead to the most meaningful outcomes!

See something you like? Say hello! I’d love to chat.