Case study
Ramadan Giving
Designing a trust-first donation and community engagement platform, bridging legacy trust signals with modern donation behaviour to reduce cognitive load, strengthen credibility, and support conversion on mobile.
- Role
- Lead UX/UI Designer · UX Research · Design Strategy · Prototyping
- Timeline
- 4 months
- Tools
- Lovable · Figma · Supabase · Stripe
- Outcome
- Trust-first donation platform
- Philanthropy
- Web App
- AI-Native
- Mobile
Overview
Ramadan Giving is a grassroots, volunteer-led nonprofit with strong real-world impact, but its digital presence wasn't keeping pace. Visitors arrived with high intent and limited context, facing unclear impact communication, fragmented engagement pathways, and friction at every decision point, particularly in the donation flow.
The challenge was to create a digital experience that reduced cognitive load, strengthened credibility, and supported conversion, especially on mobile, while preserving the emotional storytelling essential to a mission-driven nonprofit. The result is a trust-first, scalable platform supporting donations, volunteering, partnerships, and long-term growth.
AI-Assisted Design Approach
This project was intentionally developed using AI-assisted tools as part of exploring modern product workflows. Rather than replacing strategy or design thinking, AI was used to accelerate exploration, pressure-test ideas, and refine messaging clarity, generating alternative layouts, simulating user objections during donation flows, and iterating faster during early prototyping.
All research synthesis, UX decisions, prioritisation, and validation were fully led by me. AI functioned as a collaborative tool, not a decision-maker. This reflects my ability to integrate AI responsibly into real-world UX strategy while maintaining strong human judgement and user-centred thinking.
Problem & UX Research
Visitors often arrived with high intent but limited context. The experience lacked clear explanations of impact, had fragmented engagement pathways, and introduced friction at key decision points, particularly in donation flows. Trust, clarity, and ease of action needed to be established within seconds.
Primary Goals
- Help first-time visitors understand the mission within seconds of landing.
- Make donating feel simple and reassuring, not transactional.
- Show real impact without overwhelming people with data or complexity.
- Create a foundation that could grow with the organisation across future campaigns.
Strategy & Discovery
Before designing, I reviewed the existing experience and similar nonprofit websites to understand where people might struggle. Three patterns stood out and shaped every subsequent design decision.
Key Research Insights
- People hesitated when faced with too many donation choices at once, decision paralysis was measurable at the giving selection screen.
- Important actions were harder to find on mobile, where the majority of first-time visitors arrived.
- Text placed over images was difficult to read in several sections, undermining trust at a moment when credibility was critical.
These insights shaped priorities early and kept the design focused on clarity. Every decision came back to two questions: does this make things clearer for someone visiting for the first time? Does this help build trust? If the answer was no, it was simplified or removed.
Design Process
Home Page
The home page was designed to do three things quickly: explain what Ramadan Giving does, show that it is real and trustworthy, and point people to clear next steps. This meant a short, direct value statement; clear donate and volunteer actions; early impact highlights; and real photos from community events. Most users were able to explain the mission within seconds of landing.
About Page
The About page focused on transparency. It tells the story of how the organisation started, who it serves, and how it operates. Including the founder helped make the organisation feel more personal and grounded rather than abstract, a deliberate trust-building choice for first-time visitors.
Programs and Impact
This section connects donations to real outcomes. Each programme explains who it helps, what is provided, and how people can support it. Impact metrics and short stories were included to make the work feel tangible without overwhelming the user.
Donation Experience
The donation flow was designed to feel calm and reassuring. Instead of presenting many choices at once, the experience guides people step by step. Clear language explains where funds go, and the layout is optimised for mobile to reduce friction. Several users mentioned feeling more confident about donating because they understood exactly what their contribution supported.
Getting Involved
Not everyone is ready or able to donate. The Get Involved section makes it easy to volunteer, collaborate, or reach out with questions. Volunteer expectations are clearly explained so people know what to expect before signing up, reducing drop-off from the volunteer flow.
News and Updates
This page shows that the organisation is active and growing. Short updates share programme highlights, events, and announcements, helping build ongoing trust and transparency over time.
Solution & Key Improvements
The final experience helps people quickly understand Ramadan Giving, trust the organisation, and take action in a way that feels comfortable. Every page was built around the same principle: trust is built through clarity, not complexity.
- Short, direct value statement on the home page communicates the mission within seconds of landing.
- Single, clear primary action per page, donate, volunteer, or learn more, with no competing CTAs.
- Step-by-step donation flow replacing a multi-choice selection that triggered decision paralysis.
- Mobile-optimised layouts and readable typography across all pages and device sizes.
- Real community photography over stock images, reinforcing authenticity throughout.
- Impact metrics connected to specific programmes so donors understand exactly where contributions go.
- Transparent About page with founder story to make the organisation feel grounded and personal.
- Get Involved section with clear volunteer role expectations to reduce pre-commitment uncertainty.
Results
After launching the MVP, I ran usability testing with eight participants unfamiliar with Ramadan Giving. The results consistently validated the trust-first design approach.
- 8
- Usability testing participants, all unfamiliar with Ramadan Giving
- < 30s
- Most participants understood the mission within the first thirty seconds
- 100%
- All participants found at least one way to get involved beyond donating
People consistently described the site as clear, trustworthy, and easy to use. The majority were able to complete or describe a donation without help, direct validation of the step-by-step flow design.
Learnings
Based on usability testing feedback, three targeted improvements were made before final delivery.
- Donation options were clarified to reduce hesitation at the giving selection screen.
- Impact highlights were moved higher on the page and reformatted as graphs, making outcomes scannable before the scroll.
- Volunteer roles and expectations were explained more clearly to reduce uncertainty before sign-up.
This project reinforced that trust is built through clarity, not complexity. When people understand what an organisation does and how their support helps, they are more willing to engage. Designing with empathy, simplicity, and honesty made the biggest difference.
Conclusion
The platform is now ready to support future campaigns, partnerships, and continued growth. It demonstrates that a mission-driven product can be both emotionally resonant and rigorously usable, and that the two goals reinforce rather than oppose each other.
Nonprofit digital experiences fail when they prioritise the organisation's story over the visitor's need for clarity. Ramadan Giving succeeds when a first-time visitor lands, understands the mission, trusts the organisation, and takes action, in under a minute.
Continue exploring
More work that pairs rigor with craft
Open another case study or return to selected work on the homepage.