Ocean Blue Tree

Introduction😀

Ocean Blue Tree (OBT) is a dedicated organization that supports bold initiatives to safeguard our planet’s life source: the ocean. By connecting NGOs and researchers with the resources they need, OBT serves as a bridge between frontline conservation and global impact.

I was reached out to redesign and develop their digital presence—moving them away from a restrictive “DIY” setup to a high-performance, professional platform that reflects their growth and credibility.

The Challenges🎯

Ocean Blue Tree’s original website was built in-house using SquareSpace. While it served as a starting point for their online presence, the organization quickly outgrew its capabilities.

Here are some screenshots of Ocean Blue Tree’s old website:

The client reached out with a clear pain point: “Our current website is outdated. We want a fresh, modern look with improved functionality.”

The client faced three primary pain points with their previous website :

1. Credibility Gap: The outdated design didn’t reflect the nature of the international projects they were funding.
2. Mobile Responsiveness: When in mobile, some images and buttons was cut off, the content was lost when translated from desktop screens to mobile.
3. Accessibility Issue: Headings and paragraphs were hard to read and skim through as the contrast was low when overlaying images.
4. Operational Friction: Adding new projects required manually building entire pages from scratch, leading to inconsistent layouts and wasted time.
5. Invisible Impact: Key metrics and impact reports were not clearly visible, making it difficult for researchers or NGO leaders to quickly find funding opportunities or looking for project collaborations

Target Audience (User Personas)✍️

A great website isn’t just about aesthetics; it’s about solving for the people who use it. I focused the design around two core user personas:

*The name and profile picture of these users have been changed due to privacy reasons

Solutions 🧠

After carefully go through the challenges the client is facing along with considering ways of solving the customer’s painpoints to achieve their goals, a design and development strategy is devised to provide the solutions for the problems.

I took the existing brand colors—deep ocean blues and vibrant teals—and translated them into a modern, minimal UI. We prioritized whitespace, high-quality marine imagery, and clean typography to ensure the content remained the hero.

Here are some key features of the Ocean Blue Tree website:

• Dynamic Project Archive: I developed a custom filtering system by location. Visitors can now interact with the “Project Archive” to see OBT’s global footprint instantly.
• Animated Impact Counters: To celebrate OBT’s wins, I built an “Impact” section on the homepage featuring animated counters that highlight key metrics, immediately building trust with new visitors.
• Project Meta-Data Layout: Each individual project page now features a structured sidebar containing the project leader, duration, and location. This ensures a consistent, professional look across every entry.

A unique part of my process involved creating a Google Doc Template for OBT’s global partners. Since collecting data from various project leaders could be difficult and hard to organize, this template allowed partners to provide information in a structured format, which the OBT team could then easily input into the new, streamlined CMS system that I enhanced with the help of WordPress and Advanced Custom Fields (ACF).

Results 📈

After rounds of feedbacks and consultations, the final product is launched successfully

• Modernize Design: Develop a fresh, visually appealing, and user-friendly design that reflects OBT mission and engages visitors.
• Improve Navigation: Create an intuitive navigation structure that allows users to easily access information about their projects.
• Enhance Content Presentation: Showcase OBT projects, with compelling visuals and narratives to highlight their impact.
• Optimize for Performance: Ensure the website is responsive, fast-loading, and accessible across all devices and browsers.

“Binh provides an excellent service, quick replies and always available. He guided us throughout the entire process… We love the final result!” — Montse, Executive Director, Ocean Blue Tree

The website is currently under my ongoing maintenance, helping the website running smoothly so the client can focus on the other aspect of the organization without having worry about the technical aspect of running the website. My responsibility includes:

• Security and plugin updates.
• Hosting server management.
• Content updates for new projects and partners.

You can visit the website live here: https://oceanbluetree.com/