charity water canva mockup
charity water canva mockup
charity:water
charity:water

This was a project completed for the Global Career Accelerator in partnership with charity:water. The purpose of the project was to connect with college students and encourage them to donate to the cause.


https://zarriepie.github.io/CR-02-charity-water-lp/

Role

Designer, Coder

Role

Designer, Coder

Role

Designer, Coder

Date

May 2025

Date

May 2025

Date

May 2025

Built in

Canva, GitHub

Built in

Canva, GitHub

Built in

Canva, GitHub

the problem

charity:water is a nonprofit that focuses on supplying clean water to communities across the world. However, charity:water struggled to appeal to college students, a group that is often socially aware and eager to leave a mark on the world. I was asked to design a landing page that would appeal to a specific customer persona, and then create a mockup of my landing page using AI-Assisted coding.

customer persona

customer persona of alex, a socially conscious giver
customer persona of alex, a socially conscious giver
customer persona of alex, a socially conscious giver

My customer persona was Alex, a socially conscious giver that tries to do good whenever he can spare the time. As a member of the Gen Z generation, many of his habits are technology-focused, which influences how he donates and how he is engaged.

my role

My role was to design a landing page and then code a mockup. Since one of Alex's fears was wasting money on misleading charities, I created a clear headline and sub headline that would appeal to his desires and reassure him that his money was going to the right place. I also considered his desire to receive updates about his donations.


Know Where Every Dollar Goes — See the Lives You Change

You give. We show the impact. Millions of people still live without clean water, and Charity: Water makes it easy to help through real stories and updates that show exactly how your donation changes lives.


The landing page was made entirely in Canva using charity:water's branding materials and colors.


Next, it was time for the coding part in GitHub. This was the biggest challenge since I had no background of coding, but the purpose was to demonstrate how AI can be utilized to learn new things. Using GitHub Copilot and my brother's advice, I was able to create a clear, mobile-friendly landing page.

what I learned

Many of my previous projects have been based on for-profit companies, so it was new for me to design for a nonprofit company. I had a silly assumption that nonprofits didn't always need a target audience or a customer persona. If someone cared about the cause enough, they would naturally find the company, right? Wrong. Nonprofits use marketing tools and techniques just like everyone else, and often times that marketing can turn someone previously unaware into a loyal supporter.

Create a free website with Framer, the website builder loved by startups, designers and agencies.