Caring Compassionate
Hearts & Helping Hands
Empowering Compassion Through a Seamless Giving Experience
Programs Used
Figma
HTML5
CSS3
JavaScript
Role
UI/UX Designer, Web Developer
Timeline
April 2024 (2.5 weeks)
Project Overview
Background
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.
Project Goals
To improve overall user experience across all devices while conveying compassion, kindness, and empathy.
Empathize
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 organization aims to create an inclusive and accessible experience for all, ensuring that no one is left behind. With the resources and support provided, they are committed to maintaining services that address the needs of underserved individuals, ensuring that no one goes hungry.
Define
PROBLEM STATEMENT
The client wanted a redesign of their website that welcomes volunteers and sponsors to their page across all devices.
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
The following objectives were set by our client in which I had to keep in mind while going through the design process.
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.
These objectives determined which pages needed to stand out when users visit their website.
Ideate
SITEMAP
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.
Prototype
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.
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.
Test
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.
FINAL PRODUCT
This website was a very rewarding project to complete. It was a lengthy process that I had to complete in a 2.5 week timeframe however it was an experience that I felt that was necessary. I will always be grateful to my web development teacher that provided me with guidance for this project.
