Part 1: Planning the NGO's Amman Imman's Webpage Re-Design
Tags: ux, beginners, webdev, codenewbie
Published: 2019-07-25 14:43:52

---
title: Part 1: Planning the NGO's Amman Imman's Webpage Re-Design
published: true
description: My work on redesigning project webpages on a remote team for the non-profit Amman Imman.
cover_image: https://thepracticaldev.s3.amazonaws.com/i/s50gctkfuykwia3b48xf.jpeg
series: Optimizing The Design For A Charity’s $385K Project Web Pages
tags: ux, beginners, webdev, codenewbie
---

*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:*

{% link https://dev.to/jamiekaren/i-joined-a-coding-bootcamp-and-here-s-why-ede %}

<hr>

I volunteer part-time as a volunteer Digital Marketing Manager for the non-profit [__Amman Imman__](https://ammanimman.org/), 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__](https://www.instagram.com/alzharawalking), 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](https://ammanimman.org/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?

![](https://thepracticaldev.s3.amazonaws.com/i/hikdqdadho4w61hurpht.jpeg)

#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.

![](https://thepracticaldev.s3.amazonaws.com/i/xkqwdnhyj53bqhmhc89f.jpeg)

##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](https://thepracticaldev.s3.amazonaws.com/i/yr5vhhosk0n09l7v4zqf.jpg)

## 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.*

<hr>

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.