Project Overview
Project Overview
Project Overview
Timeline: 10 Weeks
Team: 6 Designers & Front-End Developers
Role: UI/UX Designer (Research · Personas · UI Design · Prototyping), Front-End Developer (Built and styled key components using HTML and CSS), Client Communication (Met regularly with the foundation’s director to refine content strategy and incorporate feedback)
Tools: Figma · Vercel · GitHub · ProCreate · VS Code · Trello · Next.js
🔗 View Live Site | 🔗 View Old Site
The Laguna Ocean Foundation is a nonprofit dedicated to protecting intertidal and coastal ecosystems. Our team was tasked with overhauling their previous website to better serve educators, students, tourists, and conservation enthusiasts. The goal was to modernize the site’s visual design, streamline navigation, and improve responsiveness while preserving the foundation’s mission and credibility.
Timeline: 10 Weeks
Team: 6 Designers & Front-End Developers
Role: UI/UX Designer (Research · Personas · UI Design · Prototyping), Front-End Developer (Built and styled key components using HTML and CSS), Client Communication (Met regularly with the foundation’s director to refine content strategy and incorporate feedback)
Tools: Figma · Vercel · GitHub · ProCreate · VS Code · Trello · Next.js
Old Site: https://laguna-ocean-foundation.vercel.app/
New Site:
The Laguna Ocean Foundation is a nonprofit dedicated to protecting intertidal and coastal ecosystems. Our team was tasked with overhauling their previous website to better serve educators, students, tourists, and conservation enthusiasts. The goal was to modernize the site’s visual design, streamline navigation, and improve responsiveness while preserving the foundation’s mission and credibility.
Timeline: 10 Weeks
Team: 6 Designers & Front-End Developers
Role: UI/UX Designer (Research · Personas · UI Design · Prototyping), Front-End Developer (Built and styled key components using HTML and CSS), Client Communication (Met regularly with the foundation’s director to refine content strategy and incorporate feedback)
Tools: Figma · Vercel · GitHub · ProCreate · VS Code · Trello · Next.js
Old Site: https://laguna-ocean-foundation.vercel.app/
New Site:
The Laguna Ocean Foundation is a nonprofit dedicated to protecting intertidal and coastal ecosystems. Our team was tasked with overhauling their previous website to better serve educators, students, tourists, and conservation enthusiasts. The goal was to modernize the site’s visual design, streamline navigation, and improve responsiveness while preserving the foundation’s mission and credibility.
The Problem
The Problem
The Problem
The original site lacked a clear information hierarchy, was not mobile-responsive, and overwhelmed users with dense text and unstructured navigation. Additionally, many features (like tide charts and species details) were only available via external links or PDFs.
The original site lacked a clear information hierarchy, was not mobile-responsive, and overwhelmed users with dense text and unstructured navigation. Additionally, many features (like tide charts and species details) were only available via external links or PDFs.
The original site lacked a clear information hierarchy, was not mobile-responsive, and overwhelmed users with dense text and unstructured navigation. Additionally, many features (like tide charts and species details) were only available via external links or PDFs.
Goals
Goals
Goals
Improve mobile + desktop responsiveness
Embed live tidepool chart and reduce external links
Improve accessibility and visual consistency
Make the site usable for visitors onsite and future visitors planning trips
Enhance the species guide layout and interaction
Improve mobile + desktop responsiveness
Embed live tidepool chart and reduce external links
Improve accessibility and visual consistency
Make the site usable for visitors onsite and future visitors planning trips
Enhance the species guide layout and interaction
Improve mobile + desktop responsiveness
Embed live tidepool chart and reduce external links
Improve accessibility and visual consistency
Make the site usable for visitors onsite and future visitors planning trips
Enhance the species guide layout and interaction
Meet Sarah and James
Meet Sarah and James
Meet Sarah and James
Design Process
Design Process
Design Process
Research and Planning
We inherited an unfinished site from a previous team and met with the foundation’s director to assess pain points. We conducted a content audit and mapped a new user flow based on our personas.
Research and Planning
We inherited an unfinished site from a previous team and met with the foundation’s director to assess pain points. We conducted a content audit and mapped a new user flow based on our personas.
Research and Planning
We inherited an unfinished site from a previous team and met with the foundation’s director to assess pain points. We conducted a content audit and mapped a new user flow based on our personas.
Wireframing and Prototyping
We refined the structure of the Species Guide, Plan Your Trip, and Locations pages, the three originally flagged for redesign, and used them as the foundation to reimagine the rest of the site.
Wireframing and Prototyping
We refined the structure of the Species Guide, Plan Your Trip, and Locations pages, the three originally flagged for redesign, and used them as the foundation to reimagine the rest of the site.
Wireframing and Prototyping
We refined the structure of the Species Guide, Plan Your Trip, and Locations pages, the three originally flagged for redesign, and used them as the foundation to reimagine the rest of the site.
Although only a few pages were in scope, we extended the redesign across all pages to ensure a consistent, modern, and cohesive user experience.
Although only a few pages were in scope, we extended the redesign across all pages to ensure a consistent, modern, and cohesive user experience.
Although only a few pages were in scope, we extended the redesign across all pages to ensure a consistent, modern, and cohesive user experience.
Before and After
Before and After
Before and After
Home Page
Home Page
Home Page
Before
Before
Before
After
After
After
Plan Your Trip
Plan Your Trip
Plan Your Trip
Before
After
Before
Before
After
After
Locations
Locations
Locations
Before
After
Before
Before
After
After
Species Guide
Species Guide
Species Guide
Before
After
Before
Before
After
After
FAQ Page
FAQ Page
FAQ Page
Before
After
Before
Before
After
After
What began as a visual refresh evolved into a deeper rethinking of structure and interaction. We moved from a fragmented, content-heavy interface to a guided experience that prioritizes clarity, discovery, and ease of use, all grounded in real user needs.
What began as a visual refresh evolved into a deeper rethinking of structure and interaction. We moved from a fragmented, content-heavy interface to a guided experience that prioritizes clarity, discovery, and ease of use, all grounded in real user needs.
What began as a visual refresh evolved into a deeper rethinking of structure and interaction. We moved from a fragmented, content-heavy interface to a guided experience that prioritizes clarity, discovery, and ease of use, all grounded in real user needs.
Website Walkthrough
Website Walkthrough
Website Walkthrough
Watch how users now explore species, plan their visit, and navigate the site across devices.
Watch how users now explore species, plan their visit, and navigate the site across devices.
Watch how users now explore species, plan their visit, and navigate the site across devices.
Responsive Design
Responsive Design
Responsive Design
Our design follows a mobile-first approach, optimized for performance and clarity across all devices.
Our design follows a mobile-first approach, optimized for performance and clarity across all devices.
Clear visual hierarchy, intuitive navigation, and flexible layouts ensure accessibility and usability wherever users access the site.
Clear visual hierarchy, intuitive navigation, and flexible layouts ensure accessibility and usability wherever users access the site.
Clear visual hierarchy, intuitive navigation, and flexible layouts ensure accessibility and usability wherever users access the site.
Key Improvements
Key Improvements
Key Improvements
Fully responsive layout
Embedded tide chart for real-time planning
Clickable map with updated coordinates and access info
Visual consistency across all pages
Interactive and accessible species guide
Fully responsive layout
Embedded tide chart for real-time planning
Clickable map with updated coordinates and access info
Visual consistency across all pages
Interactive and accessible species guide
What I Learned
What I Learned
What I Learned
Redesigning the Laguna Ocean Foundation website challenged me to think holistically about both user needs and stakeholder goals. While we were initially tasked with redesigning just a few key pages, we recognized the opportunity to create a fully cohesive and accessible experience and took initiative to expand the visual system site-wide.
This project sharpened my ability to:
Translate user research and personas into clear design decisions
Advocate for visual and structural consistency across a live product
Design and build responsive layouts with real-world constraints in mind
Communicate effectively with a non-technical client and iterate based on feedback
Balance visual storytelling with usability and performance
Working on a live site with an actual nonprofit partner taught me how to manage stakeholder feedback, work iteratively as a team, and deliver a user-first experience from research to deployment. This case solidified my passion for creating digital experiences that are not only beautiful, but truly functional and impactful.
Redesigning the Laguna Ocean Foundation website challenged me to think holistically about both user needs and stakeholder goals. While we were initially tasked with redesigning just a few key pages, we recognized the opportunity to create a fully cohesive and accessible experience and took initiative to expand the visual system site-wide.
This project sharpened my ability to:
Translate user research and personas into clear design decisions
Advocate for visual and structural consistency across a live product
Design and build responsive layouts with real-world constraints in mind
Communicate effectively with a non-technical client and iterate based on feedback
Balance visual storytelling with usability and performance
Working on a live site with an actual nonprofit partner taught me how to manage stakeholder feedback, work iteratively as a team, and deliver a user-first experience from research to deployment. This case solidified my passion for creating digital experiences that are not only beautiful, but truly functional and impactful.