DEV Community

loading...
Cover image for Part 1: Planning the NGO's Amman Imman's Webpage Re-Design

Part 1: Planning the NGO's Amman Imman's Webpage Re-Design

Jamie Ferrugiaro
Rutger's Full Stack Bootcamp grad, currently searching for her first junior dev position. I also have a love of adventure, marketing, and art. Profile art by the talented Zoey Masters.
Updated on ・5 min read

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.

I honestly debated with myself about reposting this here (which I originally posted on Medium) because of my inexperience and the non-existent code factor involved in my work on it.

But I recently saw Ali Spittle talk about writing blog posts here during Codelands, and now I feel inspired to write again.

Although I am currently taking a coding Bootcamp at Rutgers University for Full Stack web development, at the time of writing this blog post I had no previous coding experience. You can read about that in this post here:


I volunteer part-time as a volunteer 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?

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.

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:

Look at Original Page Design

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.


And that's a wrap for post one of this series! The next post I will go into my mock ups of the new ideas for the page and the final outcome.

This post, as I said, was originally shared on Medium as one post. But honestly, it's really very long that way so I've decided to split it into a series of posts.

Discussion (6)

Collapse
apstone profile image
Aaron Stone

Jamie, this looks great! Wonderful post, you certainly have this project headed in the right direction. I have always wanted to be involved in a non-profit, is there a way for other developers to donate their time to Amman Imman?

Collapse
jamiekaren profile image
Jamie Ferrugiaro Author

Thank you so much Aaron! I have been meaning to write the 2nd part of this but just haven't had time lately (hopefully soon).

Absolutely! AI is a small, passionate, team and I'm sure they'd be very grateful for anyone willing to offer some help. If you want, you can email me at missjamiekaren@gmail.com and I'll introduce you two. Or you can go ahead and email our Director via debbie@ammanimman.org .

Collapse
nataliecodes profile image
natalie stroud

This is badass. Go Jamie!! :)

Collapse
jamiekaren profile image
Jamie Ferrugiaro Author

Thank you so much Natalie! I'm going to post the actual changes I made next week :). I was hesitant to show this because everything I've done from them was from a self-learning, non-coding standpoint so far. And while it may have improved things, it might not be what a "professional" might come up with. Really struggled with it, but decided thanks to some advice it will only help show my growth!

Collapse
djpandab profile image
Stephen Smith

Good job

Collapse
jamiekaren profile image
Jamie Ferrugiaro Author

Thanks, I appreciate! Another post soon to come next week on the results :).