MySadaqah

Under construction icon

In-Progress

Someone in my network approached me to build a website for their charity organization, so that donors could easily donate to various causes.


I started it because I felt helpless by the atrocities that were happening to the oppressed around the world, and I knew that this organization had a 100% Donation Policy where every cent would go to the people in need. The target audience was the Muslim population, which is demonstrated by the religious reminders throughout the website on what Islam says about donating.

Important Detail

Figma · WordPress · Web Designer · Web Developer · Google Form · Heroicons · SVGRepo

No Prior Website

Checkmark

Client has set up web hosting

Checkmark

Client has set up account for Donorbox to facilitate the donation process

Checkmark

Made a schedule from the ideation to the launch of the website

Checkmark

Completed Design Style Guide

Checkmark

Completed SEO Primary Keyword

Checkmark

Completed low and high-fidelity wireframe

Checkmark

Interviewed user testers

Checkmark

Made Google Form for Contact page

Client has not provided content

Haven't build the site on WordPress

One of the main challenges of this project was to showcase the organization's credibility, despite its lack of recognition, which necessitated highlighting transparency about donor’s funds and a focus on demonstrating positive impact. During the process, certain requests from the client were not as straightforward. For instance, the client wanted an interactive map that would allow the users to hover on a pinned location (e.g. Palestine), which would prompt a window of information to pop up. This was a new opportunity for me to learn how to code such an element, and I had to search for resources that would assist me. Through research and trial and error, I was able to implement this request.


In the beginning, I began by inquiring about the users’ pain points for donating to a charity online and any desired features they would like to see. I created a Google Form and sent it to some individuals to get a general idea and perhaps notice a recurring pattern. Once we'd discussed the client’s vision of the site, I made the low-fidelity wireframe for mobile, tablet, and laptop, and made sure to get the client’s approval before moving on to interview 5 users with the mobile wireframe.

Sketch of Educational Resources page
Sketch of About Us page
Sketch of Contact Us page
Sketch of Sponsor an Orphan page
Sketch of Causes page
Sketch of Causes page pt.2

From the interviewee feedback, I implemented the most common features, which include having more than one place for login, changing the layout of the table of contents, increasing the visibility of “See Impact”, and taking out Quick Links. After letting the client know of the changes made, I started doing the high-fidelity wireframe. Since the client hasn’t provided content, I filled it with Lorem Ipsum for the time being. I am currently in the process of building that site on WordPress, so that the client can easily modify the content if need be. The charity’s Instagram has been inactive, so per the client’s request, I came up with a caption that could be used to re-populate the account with content, making sure to establish transparency despite the lack of posts from the organization.

Learning Experience & Future Objectives

Throughout this project, being able to express my ideas clearly was a necessity for the project to move forward, as well as being able to problem-solve.

For next time, I would...

Checkmark

ensure that the content is ready early on in the process to ensure a faster launch of the website

Checkmark

take into consideration the time for a client’s response when building the schedule to launch the site

Overall, I’m thankful to be able to contribute to benefit my community. The client is satisfied with the progress of the website thus far, and has suggested that I remain involved in designing his future website.