Kindness is Magic | Website Visual Design Case Study
Role: UX / Visual DesignerProject Duration: 4 MonthsSkills: Graphic Design, Web Design, Wireframing, Visual Design, Stakeholder Collaboration
Jennifer Cullenbine Pietrasik
Founder of Kindness Is Magic
"Working with Katie was a dream.. she truly listened and created something so much better than I had imagined!"
Problem
Without a digital presence:
- Potential donors and volunteers couldn’t understand the organization or trust it
- Opportunities for fundraising and partnerships were limited
- Community engagement and visibility were effectively nonexistent
Constraints:
- Minimal brand assets (only a logo)
- No user data; new nonprofit with no employees
- Design needed to be developer-friendly and simple to implement
Kindness is Magic, a newly established nonprofit in Milpitas, CA, lacked a website to communicate its mission, showcase initiatives, and inspire donations or volunteer engagement. The organization only had a logo and mission statement.
_______________________________________
Users & Goals
Target Users
- Potential Donors – Want to understand mission, see impact, and donate confidently.
- Volunteers – Seek easy ways to find opportunities and participate.
- Community Partners – Evaluate credibility for collaboration opportunities.
“Before I donate, I want to know exactly who they help and how my money will be used.”
Age: 34
Education: Bachelor’s Degree
Hometown: Seattle, WA
Family: 1 Cat, 1 Dog
Occupation: Marketing Professional
Goals
Frustrations
Primary Goal:
Users want to quickly understand the mission and find a clear way to support the organization.
Time Constraints:
Frustrating User Experience:
Lack of Clear Information:
Secondary Goal:
Learn about programs, feel an emotional connection, and easily contact or follow the organization.
Rachel wants to donate to trustworthy charities, but she’s frustrated by unclear websites.
______________________________________________________________________________________________________________________
Research Approach
Research Objective:
I wanted to understand how nonprofit websites communicate mission effectively and motivate users to donate or volunteer.
Methods:
- Competitive Analysis: Studied nonprofit websites to identify best practices for storytelling, calls-to-action, and visual hierarchy.
- Stakeholder Interview: Discussed the mission, programs, and desired user actions with the founder.
- Observational Review: Analyzed UX patterns that support trust and engagement.
_______________________________________
Key Insights
- Trust is critical – Users need to see credibility and transparency to engage.
- Emotional storytelling motivates action – Visuals and stories about impact help users connect.
- Clear calls-to-action are essential – Users need obvious ways to donate or volunteer.
- Information should be easy to scan – Users prefer concise content with visual cues.
How Insights Shaped Design
Insight
Users need to trust the organization
Emotional storytelling motivates engagement
Users need clear calls-to-action
Information should be easy to scan
Design Response
Highlighted mission, founder story, and visual credibility cues
Used images, icons, and impact-focused storytelling in layouts
Prominent Donate & Volunteer buttons placed throughout the site
Simplified content, headings, and cards to guide attention
_______________________________________
Ideation & Exploration
Early Ideas:
- Explored homepage layouts that balance storytelling with calls-to-action
- Focused on visual hierarchy to guide users from mission → impact → action
Wireframes:
- Low-fidelity sketches of homepage, programs, and action sections
- Emphasis on scanning, information hierarchy, and clarity
Alternate Concepts:
- Donation-focused homepage: Too abrupt; users lacked context
- Storytelling-first homepage: Emotional connection strong, but actions were buried
Final Direction:
- Balanced storytelling with visible calls-to-action
- Mission and impact upfront, actions always accessible
______________________________________
Final Design
Key Screens & User Flow:
- Homepage / Hero Section: Mission statement + primary CTA
- Solves: Explains purpose immediately
- Works: Builds trust and guides action
- Volunteer / Mission Section: Founder story & impact highlights
- Solves: Users need credibility and understanding
- Works: Clear, scannable storytelling
- Donate / Impact Section: Card-based program overviews
- Solves: Users want to see outcomes of support
- Works: Scannable layout shows tangible impact
- Confirmation / Calls-to-Action: Donate & volunteer buttons
- Solves: Users need clear pathways to act
- Works: Prominent, repeatable CTAs across site
- Footer / Contact: Contact info, newsletter signup
- Solves: Users may want to connect or follow
- Works: Increases trust and ongoing engagement
Core Flow: Homepage → Learn Mission → See Impact → Take Action
_______________________________________
Validation & Iteration
Testing:
- 5 potential users (donors & volunteers)
- Usability sessions + stakeholder feedback
What Worked:
- Mission clarity and CTA visibility
- Users could locate and complete donation and volunteer signup flows without assistance during testing.
What Didn’t Work:
- Program descriptions too dense
- Excessive scrolling on mobile
Changes Made:
- Simplified program cards for scanning
- Optimized mobile layout for above-the-fold key content
- Added visual cues to guide attention
_______________________________________
Outcome
- Users could understand mission within 10 seconds
- Clear call-to-action pathways were created for donations and volunteer signups.
- Stakeholders were confident the site builds credibility and trust
Success Metrics (hypothetical):
- 80–90% of users can locate donation/volunteer options without help
- Increased engagement and likelihood of contributing to programs
______________________________________
Reflection & Learnings
What I Learned About Users:
- Users respond positively to clear, scannable storytelling paired with visual cues
- Trust signals are critical for new organizations
What I’d Do Differently Next Time:
- Conduct more iterative testing on mobile earlier in the process
- Explore A/B testing for different homepage storytelling approaches
One Skill I Want to Improve:
- Creating a scalable design system for nonprofits with limited brand assets
Additional Considerations:
- Accessibility: Tested color contrast and font readability for clarity
- Design system: Buttons, cards, and CTAs were standardized for consistency
- Edge cases: Designed for users with limited digital literacy and users using assistive technologies.
- Future Improvements: Front-end implementation by the development team, followed by analytics integration to measure engagement and inform future UX improvements.
Designing for Impact: $9K Saved
This project saved Kindness Is Magic $9,186-- allowing for funds raised to go towards purchasing holiday gifts for underserved families.
Link
Kindness is Magic | Website Visual Design Case Study
Role: UX / Visual DesignerProject Duration: 4 MonthsSkills: Graphic Design, Web Design, Wireframing, Visual Design, Stakeholder Collaboration
Jennifer Cullenbine Pietrasik
Founder of Kindness Is Magic
"Working with Katie was a dream.. she truly listened and created something so much better than I had imagined!"
Problem
Without a digital presence:
- Potential donors and volunteers couldn’t understand the organization or trust it
- Opportunities for fundraising and partnerships were limited
- Community engagement and visibility were effectively nonexistent
Constraints:
- Minimal brand assets (only a logo)
- No user data; new nonprofit with no employees
- Design needed to be developer-friendly and simple to implement
Kindness is Magic, a newly established nonprofit in Milpitas, CA, lacked a website to communicate its mission, showcase initiatives, and inspire donations or volunteer engagement. The organization only had a logo and mission statement.
___________________________________________________________________________________
Users & Goals
Target Users
- Potential Donors – Want to understand mission, see impact, and donate confidently.
- Volunteers – Seek easy ways to find opportunities and participate.
- Community Partners – Evaluate credibility for collaboration opportunities.
“Before I donate, I want to know exactly who they help and how my money will be used.”
Age: 34
Education: Bachelor’s Degree
Hometown: Seattle, WA
Family: 1 Cat, 1 Dog
Occupation: Marketing Professional
Goals
Frustrations
Primary Goal:
Users want to quickly understand the mission and find a clear way to support the organization.
Time Constraints:
Frustrating User Experience:
Lack of Clear Information:
Secondary Goal:
Learn about programs, feel an emotional connection, and easily contact or follow the organization.
Rachel wants to donate to trustworthy charities, but she’s frustrated by unclear websites.
____________________________________________________________________________________
Research Approach
Research Objective:
I wanted to understand how nonprofit websites communicate mission effectively and motivate users to donate or volunteer.
Methods:
- Competitive Analysis: Studied nonprofit websites to identify best practices for storytelling, calls-to-action, and visual hierarchy.
- Stakeholder Interview: Discussed the mission, programs, and desired user actions with the founder.
- Observational Review: Analyzed UX patterns that support trust and engagement.
___________________________________________________________________________________
Key Insights
- Trust is critical – Users need to see credibility and transparency to engage.
- Emotional storytelling motivates action – Visuals and stories about impact help users connect.
- Clear calls-to-action are essential – Users need obvious ways to donate or volunteer.
- Information should be easy to scan – Users prefer concise content with visual cues.
How Insights Shaped Design
Insight
Users need to trust the organization
Emotional storytelling motivates engagement
Users need clear calls-to-action
Information should be easy to scan
Design Response
Highlighted mission, founder story, and visual credibility cues
Used images, icons, and impact-focused storytelling in layouts
Prominent Donate & Volunteer buttons placed throughout the site
Simplified content, headings, and cards to guide attention
____________________________________________________________________________________
Ideation & Exploration
Early Ideas:
- Explored homepage layouts that balance storytelling with calls-to-action
- Focused on visual hierarchy to guide users from mission → impact → action
Wireframes:
- Low-fidelity sketches of homepage, programs, and action sections
- Emphasis on scanning, information hierarchy, and clarity
Alternate Concepts:
- Donation-focused homepage: Too abrupt; users lacked context
- Storytelling-first homepage: Emotional connection strong, but actions were buried
Final Direction:
- Balanced storytelling with visible calls-to-action
- Mission and impact upfront, actions always accessible
____________________________________________________________________________________
Final Design
Key Screens & User Flow:
- Homepage / Hero Section: Mission statement + primary CTA
- Solves: Explains purpose immediately
- Works: Builds trust and guides action
- Volunteer / Mission Section: Founder story & impact highlights
- Solves: Users need credibility and understanding
- Works: Clear, scannable storytelling
- Donate / Impact Section: Card-based program overviews
- Solves: Users want to see outcomes of support
- Works: Scannable layout shows tangible impact
- Confirmation / Calls-to-Action: Donate & volunteer buttons
- Solves: Users need clear pathways to act
- Works: Prominent, repeatable CTAs across site
- Footer / Contact: Contact info, newsletter signup
- Solves: Users may want to connect or follow
- Works: Increases trust and ongoing engagement
Core Flow: Homepage → Learn Mission → See Impact → Take Action
____________________________________________________________________________________
Validation & Iteration
Testing:
- 5 potential users (donors & volunteers)
- Usability sessions + stakeholder feedback
What Worked:
- Mission clarity and CTA visibility
- Users could locate and complete donation and volunteer signup flows without assistance during testing.
What Didn’t Work:
- Program descriptions too dense
- Excessive scrolling on mobile
Changes Made:
- Simplified program cards for scanning
- Optimized mobile layout for above-the-fold key content
- Added visual cues to guide attention
____________________________________________________________________________________
Outcome
- Users could understand mission within 10 seconds
- Clear call-to-action pathways were created for donations and volunteer signups.
- Stakeholders were confident the site builds credibility and trust
Success Metrics (hypothetical):
- 80–90% of users can locate donation/volunteer options without help
- Increased engagement and likelihood of contributing to programs
____________________________________________________________________________________
Reflection & Learnings
What I Learned About Users:
- Users respond positively to clear, scannable storytelling paired with visual cues
- Trust signals are critical for new organizations
What I’d Do Differently Next Time:
- Conduct more iterative testing on mobile earlier in the process
- Explore A/B testing for different homepage storytelling approaches
One Skill I Want to Improve:
- Creating a scalable design system for nonprofits with limited brand assets
Additional Considerations:
- Accessibility: Tested color contrast and font readability for clarity
- Design system: Buttons, cards, and CTAs were standardized for consistency
- Edge cases: Designed for users with limited digital literacy and users using assistive technologies.
- Future Improvements: Front-end implementation by the development team, followed by analytics integration to measure engagement and inform future UX improvements.
Designing for Impact: $9K Saved
This project saved Kindness Is Magic $9,186-- allowing for funds raised to go towards purchasing holiday gifts for underserved families.
Link
Kindness is Magic | Website Visual Design Case Study
Role: UX / Visual DesignerProject Duration: 4 MonthsSkills: Graphic Design, Web Design, Wireframing, Visual Design, Stakeholder Collaboration
Jennifer Cullenbine Pietrasik
Founder of Kindness Is Magic
"Working with Katie was a dream.. she truly listened and created something so much better than I had imagined!"
Problem
Without a digital presence:
- Potential donors and volunteers couldn’t understand the organization or trust it
- Opportunities for fundraising and partnerships were limited
- Community engagement and visibility were effectively nonexistent
Constraints:
- Minimal brand assets (only a logo)
- No user data; new nonprofit with no employees
- Design needed to be developer-friendly and simple to implement
Kindness is Magic, a newly established nonprofit in Milpitas, CA, lacked a website to communicate its mission, showcase initiatives, and inspire donations or volunteer engagement. The organization only had a logo and mission statement.
______________________________________________________________________________________________________________________
Users & Goals
Target Users
- Potential Donors – Want to understand mission, see impact, and donate confidently.
- Volunteers – Seek easy ways to find opportunities and participate.
- Community Partners – Evaluate credibility for collaboration opportunities.
“Before I donate, I want to know exactly who they help and how my money will be used.”
Age: 34
Education: Bachelor’s Degree
Hometown: Seattle, WA
Family: 1 Cat, 1 Dog
Occupation: Marketing Professional
Goals
Frustrations
Primary Goal:
Users want to quickly understand the mission and find a clear way to support the organization.
Time Constraints:
Frustrating User Experience:
Lack of Clear Information:
Secondary Goal:
Learn about programs, feel an emotional connection, and easily contact or follow the organization.
Rachel wants to donate to trustworthy charities, but she’s frustrated by unclear websites.
______________________________________________________________________________________________________________________
Research Approach
Research Objective:
I wanted to understand how nonprofit websites communicate mission effectively and motivate users to donate or volunteer.
Methods:
- Competitive Analysis: Studied nonprofit websites to identify best practices for storytelling, calls-to-action, and visual hierarchy.
- Stakeholder Interview: Discussed the mission, programs, and desired user actions with the founder.
- Observational Review: Analyzed UX patterns that support trust and engagement.
______________________________________________________________________________________________________________________
Key Insights
- Trust is critical – Users need to see credibility and transparency to engage.
- Emotional storytelling motivates action – Visuals and stories about impact help users connect.
- Clear calls-to-action are essential – Users need obvious ways to donate or volunteer.
- Information should be easy to scan – Users prefer concise content with visual cues.
How Insights Shaped Design
Insight
Users need to trust the organization
Emotional storytelling motivates engagement
Users need clear calls-to-action
Information should be easy to scan
Design Response
Highlighted mission, founder story, and visual credibility cues
Used images, icons, and impact-focused storytelling in layouts
Prominent Donate & Volunteer buttons placed throughout the site
Simplified content, headings, and cards to guide attention
______________________________________________________________________________________________________________________
Ideation & Exploration
Early Ideas:
- Explored homepage layouts that balance storytelling with calls-to-action
- Focused on visual hierarchy to guide users from mission → impact → action
Wireframes:
- Low-fidelity sketches of homepage, programs, and action sections
- Emphasis on scanning, information hierarchy, and clarity
Alternate Concepts:
- Donation-focused homepage: Too abrupt; users lacked context
- Storytelling-first homepage: Emotional connection strong, but actions were buried
Final Direction:
- Balanced storytelling with visible calls-to-action
- Mission and impact upfront, actions always accessible
______________________________________________________________________________________________________________________
Final Design
Key Screens & User Flow:
- Homepage / Hero Section: Mission statement + primary CTA
- Solves: Explains purpose immediately
- Works: Builds trust and guides action
- Volunteer / Mission Section: Founder story & impact highlights
- Solves: Users need credibility and understanding
- Works: Clear, scannable storytelling
- Donate / Impact Section: Card-based program overviews
- Solves: Users want to see outcomes of support
- Works: Scannable layout shows tangible impact
- Confirmation / Calls-to-Action: Donate & volunteer buttons
- Solves: Users need clear pathways to act
- Works: Prominent, repeatable CTAs across site
- Footer / Contact: Contact info, newsletter signup
- Solves: Users may want to connect or follow
- Works: Increases trust and ongoing engagement
Core Flow: Homepage → Learn Mission → See Impact → Take Action
______________________________________________________________________________________________________________________
Validation & Iteration
Testing:
- 5 potential users (donors & volunteers)
- Usability sessions + stakeholder feedback
What Worked:
- Mission clarity and CTA visibility
- Users could locate and complete donation and volunteer signup flows without assistance during testing.
What Didn’t Work:
- Program descriptions too dense
- Excessive scrolling on mobile
Changes Made:
- Simplified program cards for scanning
- Optimized mobile layout for above-the-fold key content
- Added visual cues to guide attention
______________________________________________________________________________________________________________________
Outcome
- Users could understand mission within 10 seconds
- Clear call-to-action pathways were created for donations and volunteer signups.
- Stakeholders were confident the site builds credibility and trust
Success Metrics (hypothetical):
- 80–90% of users can locate donation/volunteer options without help
- Increased engagement and likelihood of contributing to programs
______________________________________________________________________________________________________________________
Reflection & Learnings
What I Learned About Users:
- Users respond positively to clear, scannable storytelling paired with visual cues
- Trust signals are critical for new organizations
What I’d Do Differently Next Time:
- Conduct more iterative testing on mobile earlier in the process
- Explore A/B testing for different homepage storytelling approaches
One Skill I Want to Improve:
- Creating a scalable design system for nonprofits with limited brand assets
Additional Considerations:
- Accessibility: Tested color contrast and font readability for clarity
- Design system: Buttons, cards, and CTAs were standardized for consistency
- Edge cases: Designed for users with limited digital literacy and users using assistive technologies.
- Future Improvements: Front-end implementation by the development team, followed by analytics integration to measure engagement and inform future UX improvements.
Designing for Impact: $9K Saved
This project saved Kindness Is Magic $9,186-- allowing for funds raised to go towards purchasing holiday gifts for underserved families.
Link