Dagbé

means “to do good” in the Fon-Mahi language of central Benin. Dagbé does good by working with rural communities to provide critical services to children who would not otherwise have safe lodging, nutritious meals, healthcare, or the opportunity to attend school. In the communities they serve, their organization is the only resource of its kind for children in crisis.

Prompt

Dagbé wanted a new website to replace the old and to better feature their message. Three other students and I took on the task as an extra project over the course of the school year. Dagbe wanted it to be a one-page scrolling website that they could take over and be able to edit. They also wanted to switch from Paypal to Stripe as their payment system to make it easier for people to make donations directly on the Dagbé site.

Solution Overview

We worked with Sebastian, the founder of Dagbé, to build a website that worked for their organization and which they could subsequently update themselves: www.dagbe.org. It was built as a test site which replaced their existing site when finished. We used HTML and custom CSS to customize a one-page Wordpress template. It was designed using a style guide created by a graphic designer for Dagbé, though we made a number of changes to improve usability and accessibility. Though I worked on many parts of this site, my main focus was the creation of the Donations section of the website, researching SSL certificates and recommending one for purchase, integrating the certificate into the site, researching and setting up the Stripe payment system, and setting up options for donations. I also added alt tags and maintained header hierarchy to all photos to ensure accessibility with screen readers.

What I Learned About

  • Working with Wordpress and customize the layout to fit a style guide.
  • Domain name usage, servers, and making test sites on hidden domain names to leave the original site up while the new is built.
  • I learned a ton about site security and certificates when taking donations, the differences between payment systems, and how to set them up and integrate them into a website.
  • Adding CSS styles to images to create hover effects. Accessibility in terms of images, headers, and pop-ups.

dagbe.org header image

Children's stories section - hovering on each image makes it black-and-white, and clicking brings up a pop-up with the child's story.

How Donations Help section - describes what 4 different amounts of money can by, followed by an opportunity to donate any amount once or set up monthly payments