Laguna Ocean Foundation
The Laguna Ocean Foundation is a nonprofit organization committed to protecting and preserving the coastal and marine ecosystems of Laguna Beach through science, education, and community engagement.
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: LOF Mentor
TEAM: 6 students (Design/Developer)
MY ROLE: Lead Developer
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, modern site that clearly communicates the foundation’s mission and drives user action.
Overall improving the accessibility, readability, and user experience.
The original website did not meet user or client needs:
Confusing navigation and page structure
1. No mobile responsiveness
2. Weak visual branding
3. 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.
Problem Statement:
“How might we increase public awareness and engagement around coastal preservation in Laguna Beach, so that the community can better support the health of local marine ecosystems?”
Project Planning & Scoping
Because of our limited timeline, we used our first meeting with the sponsor to clarify goals, priorities and separate core requirements from optional features.
We focused on defining what was essential for launch and what could be considered enhancements.
This helped us scope the project realistically and divide tasks efficiently across our workflow.
An agile workflow proved ideal for this process for prioritizing flexibility.
Project Management Tools - Trello Boarding
I created a Trello board to centralize important resources, manage tasks, and track our progress using a Kanban-style layout.
The board was organized into clear columns:
To-Do
In Progress
Done
Which helped the team stay aligned throughout development. By applying agile planning methods, I streamlined our workflow, improved team communication, and ensured we could adapt quickly to changes.
User Personas
Sarah (Planner Mom)
Main Insight: Sarah reflects struggles with finding quick, accessible trip-planning info for family outings.
Key Traits: Busy, goal-oriented, moderately tech-savvy, prefers mobile use, needs clarity and speed.
App Features:
“Plan Your Trip” section with tide schedules, parking, and accessibility
Mobile-friendly layout
Skimmable content and safety info
Outcome: The redesign helps Sarah plan visits easily from her phone, with all key info in one place, saving time and reducing frustration.
James (Onsite Explorer)
Main Insight: James reflects struggles with navigating disorganized websites while multitasking outdoors.
Key Traits: Highly tech-comfortable, curious, detail-oriented, uses phone actively in the field.
App Features:
Live tide chart embedded in the species guide
Quick species lookup with photos and scientific names
Minimal clicks and fast load times
Outcome: The final design supports James’s real-time needs, offering a seamless mobile research experience during tide pool visits.
Lily (Curious Child)
Main Insight: Lily reflects struggles with non-interactive, overly technical websites that don’t cater to kids.
Key Traits: Low tech-comfort, playful, visual learner, short attention span, enjoys hands-on discovery.
App Features:
Easy-to-understand species gallery with pictures
Kid-friendly
Icon-based navigation
Outcome: The site becomes engaging and educational for Lily, encouraging independent exploration with age-appropriate design.
Diagramming
To better understand user needs and behaviors, I created user flows based on our team’s system scenario. This helped define the website’s core interactions.
These early diagrams guided the site structure and interactions.
Note:
You may notice some redundancies in the initial page structure; this became a concern for our stakeholders once they reviewed our first iteration. It highlighted the need to simplify navigation and consolidate similar content, which led to a key round of refinement in our design process.
Key Design Decisions
Priority #1 : Species Guide
Each page was carefully redesigned with consistent descriptions, mobile-friendly popups, and a cleaner visual hierarchy. Reduced clutter, clarified navigation, and ensured that content was easy to access and understand across both desktop and mobile, making the experience feel seamless and intentional for all users.
Sketches
Desktop View
Mobile View
Priority #4 : Tidepool Locations
I designed the layout, clickdowns, and overall structure of the Tidepool Locations section, while my teammates handled the interactivity and adding the Laguna Tidepool locations that weren’t in the original map. I consolidated scattered content into a single, scannable page with expandable location cards, making it easier to browse. The page is now accessible from both the main navigation and the new Adventure Guide. We also improved the on-screen readability of the map to support user navigation.
Priority #8: Universal Redesign ( A Mid-Project Pivot!)
Midway through the project, our mentor feedback highlighted key structural and usability issues, especially on the homepage and Plan Your Trip section, turning a later priority into the most impactful. Although a full redesign wasn’t planned, I led a streamlined transformation. I revisited user personas and created a new user flow for our main users to better align the site with real user goals. Here’s how I realigned the user flow to meet stakeholder needs:
The original site’s location info was fragmented and hard to navigate.
By centralizing everything into one map-based experience with collapsible cards, we made it faster for mobile users planning visits on the go.
A challenge we ran into was that users didn’t always realize the map was interactive. While the functionality was there, a visual indicator was outside the scope of our technical expertise.
Adding animations or hover cues, like pulsing markers or tooltips, would aid user interaction smoothly!
Summary of Changes
We focused on four key areas:
Design & Accessibility: Ensuring a unified visual style with larger, more readable text across all pages.
Navigation & User Flow: Streamlining the user journey with an improved header, footer, and persona-driven flow
Interactive Features: Including a cleaner, more responsive map, added Google Maps coordinates, and new locations
Content & Layout Improvements: Such as embedding the LOF tidepool chart, refining the species guide, and updating the MPA and FAQ sections.