Caring Compassionate Hearts & Helping Hands (also known as 2C3H) is a non-profit organization that prioritizes their faith and giving to those in need.

problem statement

The client is not receiving their desired traffic to their website and would like a website redesign to welcome volunteers and donors to their page.

SOLUTION

To improve overall user experience across all devices while conveying compassion, kindness, and empathy.

RESEARCH

tone towards audience

The tone should be friendly, and the content should be welcoming. The whole website should convey a compassionate point of view in all aspects, specifically, photos and content.

message to the audience

The tone should be friendly, and the content should be welcoming. The whole website should convey a compassionate point of view in all aspects, specifically, photos and content.

competitive analysis

Since the client mainly used their Facebook page as a means to connect with their community, competitive analysis was crucial in developing their website.

Direct competitors: Other non-profit organizations that run mobile food pantries and have certain assistance programs and food banks.

Indirect competitors: Non-profits focused on medical supply donations

top 3 objectives

Attract at least 6 new business partners that have similar goals that would align to the Christian organization and potentially add a new partnership tier system.
Increase visibility and attendance at events such as food drives by at least 20% to 30% per year.
Have a ratio of 4:1 attendee to volunteer ratio at each event.

design

INFORMATIONAL ARCHITECTURE (IA)

For this project, there were 14 required pages for the website and a sitemap was to be submitted before prototyping. I’m a visual learner so this sitemap helped me visualize what the navigation should look like and how to organize it effectively.

branding & Style tiles

Although I had creative freedom of changing the branding, I decided to keep the original colors to stay true to the founder’s mission and intentions. I found that most competitors’ websites were using a mix of sans-serif and serif fonts.

prototype

lo-fi / hi-fi prototypes

I created prototypes for all 14 pages required and it provided the structure and organization that this project required. Given that there were a lot of pages to code, having these prototypes finished helped me code more efficiently.

VIEW FINAL DESIGNS

usability

ROUND 1 CRITIQUES

Before the final website was due, my professor allowed us to undergo an optional critique session in order to experience a critique session in the workplace. These were some of the critiques that I received from my professor and classmates.

Consider consistency and layout when it comes to readability. Center-aligned text is much harder to read than left-aligned text.
Containers that have text should have a max width of 2 - 2.5 alphabet lengths.
Utilize WCAG resources to test for color contrast to increase accessibility

Although this was a nerve-wracking experience, I am glad that I decided to receive critiques to make the necessary changes for a more accessible website.

next steps

what’s next?

Publish final design on a domain for viewing.
Test and iterate designs based on feedback.
Reach out to client for potential publishing opportunities.

redesigning a non-profit site for better usability and engagement

overview

background