Optimizing The Design For A Charity’s $385K Project Web Pages (Part 1 of 2)

Transparency Disclaimer: I am a self-taught marketer that has been working remotely in a volunteer position at a non-profit for around 4 years. My full-time job is in Accounts Receivables.

A young girl carries water. Photo by charity Founder, Ariane Kirtley.

I volunteer part-time as a Digital Marketing Manager for the non-profit Amman Imman, an NGO that works in West Africa in the Azawak valley (a remote rural region that spans the countries of Niger and Mali).

Amman Imman supports children and families who, due to climate change, suffer dramatically from water scarcity with WASH programs (Water, and Sanitation, Hygiene), food security, economic security and women’s empowerment programs.

I work remotely in New Jersey, USA interacting mainly with the Associate Director, Debbie Khan, who is located in Maryland, and the Founder Ariane Kirtley, who is located in France.

The Project: The ‘Water is Education’ Borehole-Well

This project is a very big deal for Amman Imman, in more ways than I am even allowed to write in this blog post (for security and other reasons). What I can tell you is that we will be constructing a borehole-well, which is the type of project that’s at the core of what AI does as a non-profit.

In far too simplified terms, think of a borehell-well as really deep solar-powered mechanical well. This borehole-well will provide clean, sustainable water for up to 40,000 animals and people.

Suffice to say, it’s pretty bad-ass.

This project had a difficult birth between the many variables such as budget, funding, logistics, and partnerships. By the time we had a definite yes this is going to happen and I came on board, it was already getting late in the game for marketing.

Our main target audience for fundraising are schools through a program we run called Wells of Love. In particular, it focuses on ages up to high school with some college-age students as well. Because of this, when we reach out to schools to create fundraising campaigns for our projects the time frame is normally within that particular school year.

When we started brainstorming our marketing strategy in January, we knew the project’s total cost would be well over $300K. To the date of this blog post, it is now at $340K Euros or $385 USD.

🙀 No pressure, right?

A villager collecting dirty, muddy water where animals are also contaminating the supply.

Our Goal: Website Design And UX Overhaul

After some discussion, I advised our best course of action should be to redesign their current pages for the project on the website to make them easier to read, navigate, and encourage more call-to-actions.

Why a redesign?

This was the first location for information about the project people would see online, regardless of whatever in-person interaction we had with potential school partners, so it should be a high priority.

My first goal was to do an assessment of the current page setups. At this stage, the current version on the site included two separate pages. An information page about the project and a sign-up page on the platform we use for CRM and fundraising, Salsa.

Amman Imman’s Homepage

The first step I took was evaluating how easily a visitor could find information about the project on the homepage.

Some of the things I looked at were:

  • How clear did we make it where the page lead to?
  • How visible were the location of links and/or CTAs to the page?
  • How quickly could a user find these items?

The project wasn’t mentioned immediately in the first 50% of the page, so I suggested we change the current main slider to depict it, making it the first thing visitors see.

Our actual web development is done via Wordpress by the company Carolina Web Design, so our web developer implemented the new change immediately while I continued to asses the rest of the pages.

This slider uses a photo of Houlaye at school, the 11-year-old girl who is at the center of our project.

Project Information Page

I next suggested we should divide the information for WIE project into two pages.

  1. Project Information Page — our information page where visitors could learn about the project and choose to create a fundraising campaign or donate.
  2. Salsa Sign-up Page — instructional page on the steps to sign-up to start a fundraising campaign. I’ll be writing a 2nd post for this series describing the changes made to this page.

Below is a screenshot of the original project information page:

Here’s an overview of some of my thoughts to the Director after that evaluation:

Problem 1: Too much copy was created for the page, which will loose a visitor's interest quickly.

Solution: I revised the copy to a shorter form that still allowed for all the necessary and import information to be available on the page. This was then further edited and approved by the Director and Founder.

Problem 2: The graphics and photos are used in a similar busy way to the copy, increasing the crowded feel to the page.

Solution: Photos and graphics for the page should be limited to those that complement the topics and break up the copy of the page.

Problem 3: Call-to-Actions are not strategically placed on the page to encourage visitors to the behavior we want them to take.

Solution: Add CTAs to the page to increase traffic to our sign-up pages, as well as various other complementary actions.

Creating Mock-Ups For The New Pages

Taking the three new solutions to the above problems, I sketched mock-ups implementing a shorter copy that was broken up by strategically placed photos and CTAs.

After I had the right order for everything on the page, I moved these sketches to a digital template of the mock-up on Google Drive documents, so that the Director and Founder could review before moving forward with any specific design details.

Background image used for the top of the new redesign.

Designing the graphics, background, color theme, and CTAs

Once approved, I started choosing and editing photos based on the design. I choose photographs among AI’s large collection I felt fit the page well. I also choose colors based on these photos and AI’s brand colors.

I tried to stay away from using our logo colors too much over the page, as we already use them a lot throughout the website. I took a tan from the first photo carrying the water as a background color for elsewhere in the page.

Background Colors: #DFC2A1 steelblue , #2965b4

Since this project focuses on a specific girl,11-year-old Houlaye, I wanted our new page to highlight that since it made the project more relatable and emotional.

Web page Section 1: The Problem

The first photo is of Houlaye and others traveling to collect water.

Redesign: We made the decision to have an intro header right away with a CTA button to watch our summary video on the project. The header immediately goes into what our problem is.

Why: I wanted the first thing people read to be clearly stating what we’d be talking about on the page before anything else. We hoped the video might be equally moving. We went back and forth if the video should be a thumbnail or a button, but I felt a full thumbnail would be too much space on an already long page.

The photo used also depicts the problem, complementing the copy.

The next paragraph continues to explain the problem. We also have two CTAs below that, one for becoming a partner and another to donate.

Redesign: In this paragraph, I took a statistic of AI’s about the project and made it our main Header.

Why: I used this tactic because I felt it was more impactful than just simply stating something like “Water is Education Borehole-well Project” or similar.

AI’s Water is Education project is fundraising to create a borehole-well for Houlaye, an 11-year-old girl and her community.

Web page Section 2: Meet Houlaye

This section highlight’s Houlaye, the true face of our project.

Redesign: A photo is positioned next to a paragraph that talks about her and what her life is like.

Why: I felt that having photo of the child really spoke to a visitor more than any amount of copy can. I choose a large photo of Houlaye so visitors could really look into the eyes of who this little girl was who has taken on so much responsibility at such a young age.

Since she represented what and why we were doing this project, I wanted her presence on the page to be significant. That is also why I wanted the copy next to the photo to also be her story.

I then added an extra large header here to highlight a statistic before a CTA that suggested visitors click for more information.

Info section to the right of Houlaye’s photo.
A boy with clean water edited in Photoshop.

Web page Section 3: Amman Imman’s solution

The next section of the website talks about our solution for Houlaye, her village, and multiple other communities.

Redesign: I ended up choosing a boy pouring clean water from one of the borehole-wells AI has built in the past. I edited the photo to remove the background and made it transparent, as well as adding a blending layer filter.

Why: Since this section was the answer to the problems we stated at the top of the page, I wanted to use a photo that also depicted that.

Web page Section 4: Amman Imman’s Programs

The third section talked about some of the programs we run in AI and their impact.

Redesign: I made the section our logo colors to tie it into the rest of the website better. I then requested icons next to each category and statistic. I took out all the extra copy written before the statistics since that information was provided on the rest of the page.

Then I changed the categories so that each section had a Header, Sub-Header, and short paragraph to make sure they visually looked consistent.

Finally, I removed the budget info because I felt it was unnecessary extra information cluttering the page. It also was often changing due to the nature of the project.

Why: The original Impact section repeated too much of the same information. and included extra info. Adding icons also give it a quick visual appeal.

Wrapping It All Up

You can take a peek at the current version of this page here, showing all these changes.

We knew we needed to get these pages up and running as soon as possible so we can move on to focusing on overall marketing, a teacher’s conference coming up, and reaching out to schools to fundraise.

Because of this, we only wanted to dedicate so much time to create these new pages. After already dedicated 2–3 weeks on this redesign, we decided to move on for now even if the page wasn’t perfect.

I’m not ashamed to admit, there were absolutely areas I would have liked to spend more time on. However, we had hard choices to make. How much time was truly worth spending on the page?

In the end, I advised we use our analytics to watch the behavior of these new pages and come back in a month or so to reevaluate our CTAs, links, and other important elements and potentially make additional changes some of these statistics were low.

Next, I would move on to creating the sign-up instructional page for the project using our CRM, Salsa. Check back next week to see what my results were.

This is part 1 of a 2 part series detailing my revision of the design and UX of webpages for the project Water is Education, a campaign run by the non-profit Amman Imman.

Follow Amman Imman:

https://www.facebook.com/AmmanImmanWaterisLife | https://twitter.com/ammanimman | https://www.youtube.com/channel/UCP4sS6ys_teupR2JQ8gV7dw | https://www.instagram.com/ammanimman/

Connect with me:

www.twitter.com/missjamiekaren | https://dev.to/jamiekaren | https://www.linkedin.com/in/jamiekaren/

--

--

--

I’m an adventurous soul who loves storytelling, marketing, and technology. I’m a volunteer digital marketing manager for the non-profit Amman Imman.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

RebelCon inspires audience to incorporate Human-Centred Design approach

The Virtual Court: Transformation or Bust……

[PDF] Download T-Squared: Theories and Tactics in Architecture and Design KINDLE_Book by :Samantha…

The Death of the User Manual

How to organize your virtual whiteboard in Miro, Mural, Figma, or Klaxoon ?

10 Best Productivity Tools Listed on BetaPage in September

UX Case Study: Food & Sustainability

5 things to read and see

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jamie Ferrugiaro

Jamie Ferrugiaro

I’m an adventurous soul who loves storytelling, marketing, and technology. I’m a volunteer digital marketing manager for the non-profit Amman Imman.

More from Medium

Algo features update ✺

How I determine good project fit

Eagle — the Best Workspace for an Artist

So what does a Design Producer actually do?