This is a case study of my capstone project for my course at Dribbble.

Disclaimer: I am not affiliated with this NGO in any way. This case study is solely for the purposes of my course. All images are taken from their website.

Purpose

A redesign of a local NGO's website to help improve user experience and help people get the information they need.

Origin Story

In the 2022 elections in the Philippines, I volunteered for an organization that supported my local candidate. It was a fun and meaningful experience. Now, the same candidate has launched an NGO called Angat Buhay. Curious to learn more, I searched online for their website. However, on my first attempt, I found that it lacked the information I was seeking, so I quickly left the website.

Then during my Dribbble course, our mentor announced that we would be completing a capstone project. We were given a list of potential projects or could choose one of our own. My only requirement was that the project had to be for an NGO, as I wanted to use my skills to make a positive impact. I thought of Angat Buhay's website and believed I could improve the user experience. After doing some research, I discovered that the NGO had launched a new website. I immediately conducted interviews to determine the pain points of users.

Here are the key points I uncovered:

• Many people are unaware that Angat Buhay has a website.

• Other pages on the site appear to be duplicates of the homepage.

• There are color contrast issues.

• Titles and descriptions are not clearly defined.

• CTA buttons lack a sense of urgency.

What's in it for Angat Buhay?

Opportunity:

• Increase engagement on the website by informing visitors of the organization's advocacy pillars, vision, mission, and ways for volunteers to get involved.

Solution:

• Improve the user experience by creating a homepage that quickly summarizes what the organization does and who they are. Display photos in an orderly manner that users will enjoy browsing.

Value added and quick wins:

I was behind schedule to complete this project, so I had to figure out a way to conduct my research and gather supporting data to improve the website. I conducted an analysis of their current website to identify areas that could be improved.

Here are the wireframes for the homepage. The goal is to provide concise information about each page, so that users can gain a fundamental understanding of what the NGO does.

And here's the design. I also added my design decisions below this gallery.

Design decisions

My case study for this capstone project has concluded, although usability testing is still required to determine if the design will be effective. If time permits, I will update this case study with the results of the testing.

Thank you for reading!