Client Project
How We Increased Donation Frequency from 2.5x to 4x
What is AdventureMinds?
AdventureMinds is a nonprofit organization focused on social-emotional learning (SEL) through movement-based experiences. It helps children build confidence, resilience, and emotional awareness through physical activities, immersive programs, and community-driven initiatives.
The Nonprofit Challenge
Beyond aesthetics, the organization faced critical business challenges: low donation conversion rates and difficult navigation for primary audiences parents seeking programs and educators looking for SEL resources.
<2%
Donation Conversion
68%
Bounce Rate
The Challenge
Problem Statement
AdventureMinds' previous website suffered from fundamental UX issues that hindered its ability to connect with parents, educators, and donors. The platform needed a complete overhaul to effectively communicate its mission and drive conversions.
Weak Visual Hierarchy
Content Overload
Inconsistent Spacing &
Typography
Mixed font styles and irregular spacing
created a disjointed, unprofessional
appearance.
Low CTA Visibility
Poor Mobile Readability
Limited Emotional Storytelling
Objectives
Goals & Objectives
The redesign focused on six key areas to transform the user experience and drive
meaningful results for the organization.
Improve Readability
01
Increase Conversions
02
Strengthen Brand Identity
03
Improve Accessibility
04
Simplify Navigation
05
Emotional Connection
Use imagery and storytelling to create
meaningful connections with visitors.
06
The Transformation
Before vs After
A side-by-side comparison showing the dramatic improvements across key pages
and user flows.
BEFORE
Problem:
Generic headline with weak messaging hierarchy and unclear primary action reduced clarity of purpose.
AFTER
Improvement:
Clear, human-centered headline, stronger content hierarchy and defined CTAs guide users toward key actions quickly.
BEFORE
Problem:
Donation flow was hidden behind a separate page, making the process feel disconnected and adding friction to taking action.
AFTER
Improvement:
Added a donation funnel below the hero section with simplified options, clearer hierarchy and impact-driven messaging to encourage quick action.
BEFORE
Problem:
Generic headline and weak storytelling made the SEL page feel unclear and less engaging.
AFTER
Improvement:
Introduced clearer messaging, stronger narrative framing and improved visual hierarchy to better communicate the purpose of SEL.
BEFORE
Problem:
Text-heavy layout with vague messaging made the content hard to scan and reduced clarity of key benefits.
AFTER
Improvement:
Structured content into clear sections with visual hierarchy, concise messaging and highlight cards to improve readability and understanding.
Approach
Design Strategy
Four strategic pillars guided the redesign, ensuring every decision served both user
needs and business goals.
Visual Hierarchy
Clear Information Architecture
Clear heading scale (H1–H6)
Strong CTA emphasis with lime accent
Section separation using whitespace
F-pattern reading flow optimization
Accessibility Improvements
WCAG 2.1 AA Compliance
Higher contrast ratios (4.5:1 minimum)
Larger text sizes (16px base)
Improved button visibility
Keyboard navigation support
Conversion Optimization
Data-Driven Design Decisions
Sticky donate button on scroll
Clear donation tiers with impact
Simplified contact form (3 fields)
Social proof and trust signals
Brand Consistency
Unified Design Language
Unified color palette (lime + forest)
Consistent component styling
Reusable card systems
Iconography guidelines
Design System
UI System Highlights
A comprehensive design system ensuring consistency and scalability across all
touchpoints.
Button Styles
Primary CTA
Secondary
Card Components
After-School Clubs
Engaging activities for ages 5-12
$50
Funds one session
Typography Scale
H1 Heading
Satoshi Bold, 48-64px
H2 Heading
Satoshi Bold, 32-40px
H3 Subheading
Satoshi SemiBold, 20-24px
Body text using Inter Regular for optimal readability across all devices.
Color Palette
Lime Accent
#C8FF2E
Forest Dark
#0B1C1C
Off-White
#F6F7F6
Text Primary
#111C1C
Icon Usage
Donation
Community
Programs
Events
All icons use a 2px stroke width with rounded caps, maintaining consistency across
the interface.
Deliverables
Key Screens Showcase
A complete redesign of all major pages, each optimized for its specific purpose and
user journey.
User Flow
Donation Flow Breakdown
A streamlined 4-step donation process designed to minimize friction and maximize
conversion.
Donation Type
Choose between one-time or monthly
recurring donation
One-time gift option
Monthly sustainer program
Annual membership
01
Amount Selection
Select from preset tiers or enter a
custom amount
$25, $50, $100, $250, $500 tiers
Custom amount input
Suggested default
02
Impact Preview
See exactly how your donation makes
a difference
Real-time impact calculator
Specific program funding
Transparency metrics
03
Secure Payment
Complete donation with trusted
payment processors
Credit card / PayPal
SSL encryption
Tax receipt auto-send
04
Reduced Friction
Streamlined from 9 steps to 4, removing unnecessary
form fields and decisions.
Visual Trust Signals
Clear Hierarchy
Outcomes
Results & Expected Impact
Projected improvements based on usability testing, heuristic evaluation, and industry
benchmarks for nonprofit websites.
Readability Score
Before
62/100
After
94/100
+52%
Flesch Reading Ease improvement
CTA Visibility
Before
23%
After
89%
+287%
First-fold CTA detection rate
Bounce Risk
Before
High
After
Low
-45%
Projected bounce rate reduction
Trust Perception
Before
3.2/5
After
4.7/5
+47%
User trust survey score
Emotional Engagement
Before
4.1/5
After
4.8/5
+17%
Storytelling effectiveness rating
Accessibility Score
Before
71/100
After
96/100
+35%
WCAG 2.1 AA compliance score
2.5x - 4x
Donation Increase
40-60%
Inquiry Uplift
85%
Overall
Improvement
Reflection
Learnings & Reflection
Key insights gained throughout the redesign process that will inform future projects.
Visual hierarchy, interaction design, and clear content work together to help users quickly understand purpose and take action.
AK
Aazam Khan
UI/UX Designer
Thank You
Designing with purpose to
support education, movement,
and community growth.
This case study represents my commitment to creating meaningful digital
experiences that drive real-world impact for organizations making a
difference.