Health in Harmony

Health In Harmony is a nonprofit organization dedicated to protecting tropical rainforests to improve human and planetary health.

If we want to address the climate crisis and improve global health, we must invest in preserving the world’s tropical rainforests. They are the lungs of our planet and home to countless species, yet they are disappearing at an alarming rate. Health In Harmony bridges the gap between rainforest conservation and human well-being.

Problem

The existing Health In Harmony website faced several critical challenges:

  • Outdated Design: The site lacked a modern, engaging interface that reflected the innovative nature of HIH’s mission.

  • Poor Communication of Impact: Users struggled to understand the scale and significance of HIH’s initiatives, such as Radical Listening and Rainforest Exchange.

  • Limited Engagement: The navigation was cluttered, and calls to action (CTAs) were unclear, reducing donor conversions and failing to inspire long-term engagement.

 

Product Vision

The goal was to redesign the website to:

  1. Communicate HIH’s mission clearly and compellingly.

  2. Inspire users to take action—whether donating, joining initiatives, or learning more about tropical rainforest conservation.

  3. Create an intuitive user experience that highlights HIH’s impact while simplifying navigation and content management.

Short-term goal: Develop an interactive, visually appealing website on Squarespace that effectively communicates HIH’s mission and supports fundraising efforts.

Long-term goal: Build a platform that fosters deeper engagement with HIH’s initiatives and scales easily for future growth.

 

Outcome

The redesigned website achieved the following:

  • Improved User Engagement: Analytics showed a 35% increased average time on the homepage and higher interaction rates with key pages like "Donate" and "Team."

  • Streamlined Navigation: A simplified menu and improved CTAs guided users seamlessly to donation and initiative pages.

  • Enhanced Content Presentation: Interactive elements, such as a visual timeline of HIH’s initiatives, increased user understanding and trust.

Process Overview

Project plan and responsibilities

 

Design Process

 

  1. Research: competitive analysis, market research, usability testing

  2. Analysis: affinity diagrams, identifying key CTAs, customer journey map, information architecture

  3. Design: sketched mockups, storyboard sketches, high-fidelity wireframes, Squarespace website development

  4. Future Steps: add new marketing campaigns to the website as needed

Our first step was to understand the organization’s existing audience. With five well-defined personas already in place, I worked to ensure the redesigned website addressed their most pressing needs.

I analyzed each persona's needs and distilled their goals into a high-level guiding statement: the website must be a place to learn from, one that is trustworthy, respectful, and where everyone feels heard. This statement captures the core priorities across all personas.

This clear focus on user needs provided the foundation for a user-centered design process, ensuring that every decision aligned with Health In Harmony’s mission and the expectations of its diverse audience.

Before

Before

After

After

Before diving into the redesign process, I conducted a comprehensive audit of Health In Harmony’s existing website to identify initial errors and areas for improvement. This step helped highlight usability issues and content gaps that could be addressed in the new design.

Next, I performed a competitive analysis of other nonprofits in the health and climate sectors. By conducting a detailed SWOT analysis for each competitor, I uncovered patterns of what worked well and what fell short.

Based on these insights, I made several key recommendations tailored to Health In Harmony’s unique needs:

  1. Emulate Transparency: Provide detailed reports on donations and where the money goes to build trust with donors.

  2. Incorporate Interactive Elements: Engage users through visual storytelling tools like timelines or interactive maps to communicate HIH’s impact effectively.

  3. Streamline Navigation: Simplify the website’s structure to help users quickly find the information they need without feeling overwhelmed.

  4. Refine Content Presentation: Reduce text-heavy areas and focus on concise, impactful messaging that aligns with user expectations.

I analyzed market research to understand our key audiences’ motivations for engaging with charities. Insights revealed users often want to engage beyond donations, so I made a note to include a Get Involved section in the information architecture.

Additionally, users were more likely to donate if they saw tangible community impact, emphasizing the importance of highlighting local stories.

I then conducted usability testing with two target users to identify pain points and frustrations while navigating the site and attempting to donate. The key finding was that users aligned with the mission but found the approach unclear.

To address this, I recommended:

  • Using clear, concise language to explain HIH’s mission and connect IPLCs, health, and climate change.

  • Telling stories visually, reducing text.

  • Highlighting Radical Listening and its role.

  • Ensuring the donation page clearly conveys impact and involvement options.

  • Maintaining consistent, visually appealing designs.

These steps ensured the website would better engage users and clearly communicate HIH’s mission.

To ensure the website effectively served all users, I identified the top CTAs for each persona and prioritized them in the information architecture. A major issue with the current website was its overly complex navigation, which often distracted users before they reached the donation page. Simplifying the navigation was critical, but I also planned for scalability to accommodate future initiatives as HIH continues to grow.

Once the information architecture was approved, I outlined the user flow for each persona to achieve their top three CTAs, ensuring the necessary information was present on each page. I then sketched out the site, created low-fidelity wireframes, and collaborated with Sam to refine them into high-fidelity designs.

After final approval, we began building the site in Squarespace, translating our designs into a functional, user-friendly website.

Before

Before

After

After

Insights

 

Challenges

Every UX project comes with its curveballs, and this one hit during delivery crunch time. With just two weeks left until launch, the CEO, despite approving the high-fidelity mockups, decided the website needed to showcase the "big idea" in an interactive way. While interactivity aligned with user research findings, this request introduced major changes, requiring us to conceptualize a vague idea and contract a developer on short notice.

To tackle this, I proposed gathering input from various team members across partnerships, marketing, and data visualization to understand the "big idea" from multiple perspectives. Using these insights, I created a low-fidelity mockup of potential interactive elements. Sam, the graphic designer, transformed these into stunning visuals, and I sourced a developer to implement them quickly. Together, we successfully integrated the interactive features into Squarespace, delivering on the CEO’s vision while staying on track for launch.

 

Key Learnings

One major takeaway from this project was the importance of clearly outlining the approval process at the very start. Since I wasn’t part of the HIH team, I didn’t have a full understanding of the nuances of their internal structure or global collaboration needs. This led to challenges in aligning with stakeholders, as we often received feedback late in the process from team members we hadn’t initially engaged with. For example, there were instances where interactive elements were designed, implemented, and approved, only for someone new to flag factual inaccuracies.

Next time, I’d establish a clear approval workflow upfront, identifying key stakeholders, their roles, and how we’d collaborate across teams. This process would include checkpoints for validation at each stage, ensuring all necessary feedback is gathered before moving forward. By implementing a structured approval process, we can minimize last-minute changes and keep the project timeline on track.

Value of Design

This project was incredibly rewarding, especially having the opportunity to bring the high-fidelity wireframes to life on Squarespace. The value of our design was clear in the transformation of the website into a sleeker, more modern platform that effectively communicated Health In Harmony’s mission.

Our final usability tests provided valuable insights, allowing us to make necessary adjustments and confirm the impact of our redesign. Key wins included:

  • Reducing redundant pages by almost one-third, streamlining navigation and improving the user experience.

  • Achieving a 40% reduction in the time it took users to understand HIH’s mission compared to the original tests.

These results demonstrate the tangible impact of thoughtful, user-centered design in driving clarity, efficiency, and engagement.