ImpactHumanity
Helping underserved families in the community
Project Overview
ImpactHumanity website is a non-profit organization dedicated to empowering youth in underserved families. As the lead UI Designer, my primary responsibility was to fix any broken links and ensured a seamless navigation experience for users. Additionally, I replaced stock images with authentic visuals that accurately represented the organization and the communities they serve.
Problem
ImpactHumanity's website lacks sufficient call-to-action buttons on the homepage, no sign up for volunteering, and contains inaccurate information and stock photos that do not align with the organization's values.
Solution
The website redesign aims to address these issues by adding prominent call-to-action buttons, creating a seamless user experience for volunteers to sign up, and ensuring that the content and visuals accurately represent ImpactHumanity's values and goals.
My Role
UI Designer
Web Developer
Timeline on Redesign
8 weeks
Tools Used
Design Thinking Process
Discover
What is ImpactHumanity
ImpactHumanity provides Educational Enrichment for youth growing up in single-parent homes and Parental Empowerment for their parents. We equip and guide our underserved families with the resources and tools to build a foundation of Generational Wealth within their community!
Target Audience
Potential Volunteers
Community Partners
Donors
Parents and Guardians
Surveys
Quantitative Research
Fifteen participants were provided with the opportunity to navigate the original ImpactHumanity website. Following their interaction with the website, a survey was administered to gather their overall impressions and to assess areas for potential enhancements.
.png)
Users visit non-profit organization websites
.png)
Prefer using .org instead of .info
.png)
Use Cash App over PayPal
.png)
Believe it's important to have high-quality photos on the website.
.png)
Are likely to revisit the website for updates
Qualitative Research
Four out of the fifteen participants were selected for interviews to gain a comprehensive understanding of their interactions with the website.
Sample questions:
-
In your opinion, how well does the current website reflect the mission and values of ImpactHumanity? Are there any aspects you think should be highlighted more effectively?
-
Can you recall any instances where you were prompted to take action (e.g., sign up for volunteering, make a donation) on the current website? How clear were these calls-to-action?
-
What content or information do you think is missing from the current website that would be valuable to you or other users?
-
When you think of Cash App, what associations or perceptions come to mind? Do you associate it more with personal transactions, business transactions, or both?
-
How comfortable are you with using Cash App as a payment method for making donations or transactions? What are your perceptions and feelings towards using Cash App in this context?
-
How would you feel about the ImpactHumanity website offering a variety of payment methods, including Cash App, to cater to a wider range of donor preferences? What benefits do you foresee in having this flexibility?
Key Insights from Research
Familiarity with Cash App:
Most users are well-acquainted with Cash App and regularly incorporate it into their daily transactions. This familiarity largely revolves around personal transactions, primarily involving known individuals within their personal network.
Limited Usage for Non-Profit Transactions:
Users typically employ Cash App for personal transactions rather than for interactions with businesses or non-profit organizations. The prevailing sentiment is one of caution and hesitancy when it comes to using Cash App for purposes involving donations or non-profit activities.
Domain Associations for Trust:
In the context of domain extensions, users tend to associate the .org extension with greater credibility and trustworthiness. This association is particularly strong when considering non-profit organizations, where users expect the .org extension to signify a legitimate and reputable entity.
Define
Personas
Empathy Map
Anna Miller
Says
-
"I want to make a meaningful impact through my donations."
-
"I wish it was easier to find information about the organization's mission and impact."
-
"I want a hassle-free and convenient donation process."
Does
-
Researches non-profit organizations and their impact before making a donation.
-
Seeks out transparency reports and financial information to evaluate an organization's credibility.
-
Shares information about causes and organizations she supports with her social circle.
-
Donates regularly to causes she is passionate about.
-
May abandon the donation process if it is complicated or time-consuming.
.png)
Thinks
-
"I hope my contributions are making a difference in the lives of those in need."
-
"I want to trust that my donations are being utilized effectively."
-
"I need more information to feel confident about donating to this organization."
-
"I hope the donation process is straightforward and secure."
Feels
-
Empathy and compassion towards those in need.
-
A sense of fulfillment and purpose when she contributes to causes she cares about.
Frustration when she encounters complex or unclear donation processes. -
Doubt and hesitation when there is a lack of transparency or information about an organization.
-
Satisfaction and trust when she receives updates about the impact of her donations.
Harry Evans
Says
-
"I want to make a difference in the lives of underprivileged children."
-
"I enjoy engaging in hands-on activities and interacting with kids."
-
"I value volunteer opportunities that provide flexibility with my work schedule."
-
"I want to connect with like-minded individuals who share my passion for helping children."
Thinks
-
"I hope my volunteer efforts positively impact the children's lives."
-
"I wonder if there are more opportunities to support underprivileged kids in my community."
-
"I want to find volunteer positions that align with my skills and interests."
-
"I need a sense of fulfillment and purpose in my volunteer work."
.png)
Does
-
Actively seeks out volunteer opportunities focused on helping underprivileged children.
-
Mentors, tutors, or organizes recreational activities for kids in need.
-
Networks with other volunteers and attends community events related to his cause.
-
Balances his volunteer commitments with his full-time job as a software engineer.
Feels
-
"Empathy and compassion towards underprivileged children.
-
Fulfillment and purpose when engaging in meaningful volunteer work.
-
Frustration when volunteer opportunities are scarce or don't align with his interests.
-
Appreciation and satisfaction when his efforts are recognized and valued.
-
A sense of belonging and connection when he interacts with like-minded individuals.
Ideate
Brainstorming Session
Review of Existing Features and Identifying Needs:
We discussed the strengths and weaknesses of the existing website, addressing pain points and areas that needed improvement. Additionally, we identified new features and content that would be crucial to enhance the overall user experience and better serve the target audience.
Rebranding Strategy:
As part of the redesign, we delved into the rebranding aspect of the website. The client expressed the desire to update page titles and domain names to better align with the organization's mission and vision. We brainstormed potential names that would resonate with the target audience and evoke a sense of community and empowerment.
Strategic Placement of Call-to-Action Buttons:
We identified key pages where call-to-action buttons could be added or improved, such as volunteer sign-up forms, donation pages, and program enrollment sections.
Leveraging Authentic Images from the Organization:
To enhance the visual appeal and authenticity of the website, we emphasized the importance of using high-quality photos sourced directly from ImpactHumanity.
Payment Method for Donations:
We explored different payment options, considering credit card payments, PayPal, and other online payment methods. The goal is to provide donors with a seamless donation experience while ensuring the security of their financial information.
Affinity Map
Problem Statements
Based on personas.
For Anna (the donor):
"The problem is that Anna encounters difficulty in finding meaningful ways to contribute and navigate the ImpactHumanity website due to a lack of call-to-action buttons and inaccurate information. This results in frustration, reduced engagement, and missed donation opportunities."
For Harry (the volunteer):
"The problem is that Harry faces challenges in finding suitable volunteer opportunities to support underprivileged children in his community. There is a lack of clear pathways to sign up for volunteering, hindering his ability to make a positive impact and connect with like-minded individuals through the ImpactHumanity website."
Site Map
Information Architecture
Design Principles
Color Palette
#833556
#556670
#ED008C
Logo
ImpactHumanity symbolizes extending a supportive hand to youths who lack the same level of assistance as their peers, aiming to enrich their lives.
Pink embodies feelings of tranquility, kindness, and hope.
Blue evokes sentiments of trust, calmness, and integrity.
Burgundy signifies sophistication and elegance.
Typography
Aa - Regular
Aa - Bold
Poppins
Prototype
Low Fidelty Wireframe
Homepage - Hero Section
The main goal for users is to give them a chance to sign up to volunteer.
Users are taken to the “About Us” page when they learn more about ImpactHumanity.
“Let’s Start With The Why” gives users a sneak peak into ImpactHumanity’s mission.
“Invest In Our Future” will encourage users to donate. Next will be the Cashapp link
User will learn who are the current board members of ImpactHumanity.
Our Impact page shows the impact they have made on the community and gives users an opportunity to volunteer.
Users will see what ImpactHumanity has done for the community in the “Gallery”
Mockups
Old Website
New Website Mockup
Test
Performance Testing
To ensure a seamless and satisfying user experience on the redesigned ImpactHumanity website, we conducted performance testing as an integral part of our development process.
Layout Evaluation:
The website's layout is the foundation of user interaction. Performance testing allowed us to assess how quickly the website loaded and if the layout elements appeared as intended.
Image Optimization:
Images play a pivotal role in user engagement. Ensuring that the website maintained a balance between visual appeal and swift performance. Optimized images are crucial for providing a seamless user experience.
Donation Process Assessment:
The donation process is a critical user journey on a non-profit website. Aiming to provide a smooth and efficient process that encourages users to contribute to ImpactHumanity's causes.
Volunteer Sign-Up Testing:
Signing up to volunteer is another key action on the website. Performance testing enabled us to ensure that the sign-up process was efficient, user-friendly, and glitch-free.
Key Insights from Testing
Some users were a bit hesitant when it comes to using Cashapp for donations. They associate it with personal transactions.
"Volunteer" should have its own separate page, due to their multiple volunteer postions.
A/B Testing
Regarding the hero sections, certain concerns arose about text visibility across both mobile and desktop versions. To determine which version had a more positive impact on users, A/B testing was employed.
This design enhances the website's visibility on both mobile and desktop versions, while also offering users a preview of the organization's essence
Implementing Feedback
Mobile Version
It was observed that certain layouts didn't transition smoothly from desktop to mobile versions. A particularly significant instance was the layout for the volunteer section on the "Our Impact" page.
On mobile versions, all that can be seen is the blur effect.
By altering the layout, users can now view the entire image, which prominently displays ImpactHumanity's logo.
Establishing Clear Direction for “Our Impact” Page
Several users have pointed out the resemblance between the "About Us" page and the "Our Impact" page, causing confusion in distinguishing between the two. To address this, it was essential to distinctly define the missions of these two pages.
The "About Us" page provides users with insights into the organization's values and mission.
On the other hand, the "Our Impact" page showcases the community's transformation through the organization's initiatives and the tangible outcomes achieved.
We relocated our mission, vision, and values to the "About Us" page, as this section is most fitting for delving into what the organization stands for.
Moreover, the "Our Impact" page now highlights the events organized by ImpactHumanity, showcasing the concrete outcomes the organization has achieved.
Next Steps
Now that ImpactHumanity is live. Some future plans have been in discussion with the stakeholder.
Impactful Updates
A blog feature that can share resources and inspiration to youths.
Switching from Cashapp
Options for accepting donations include PayPal or utilizing Wix's secure checkout.
Impact Store
Merchandise that represents the organization can be sold to the public.
MORE PROJECTS
