Target Audience: Everyday donors, NGOs
Tools: Figma , Figma Make , Claude
Project launching: 2027
Due date: 1 month
Brief
.png)
Goal
Design a platform where users can donate products directly to foundations and people in need, instead of money. This creates a system where generosity is transparent and traceable, while also channeling that support into local markets and small producers, strengthening local economies with every donation.
Problem
Technical: Traditional donation platforms ask users to give money, but many donors don't fully trust where that money ends up or how it's used. There's a gap between the intention to help and the visibility of the impact.
Trust: Users need to know exactly what they're giving, who receives it, and that it reaches the right hands, without their generosity getting lost in administrative overhead.
Scope
Build a flow that lets users browse verified needs from foundations, select or purchase specific products (not cash), and track that their donation was received and used as intended. Identify opportunities to build trust through transparency, tracking, and storytelling.
Reference Material
The project owner came in with a clear direction already defined: a specific color palette, a logo, and two selected projects to serve as the foundation for launching and testing the MVP.
Deliverables
Development of an MVP with the necessary first flows and a high-fidelity prototype, covering the core journey from browsing foundation needs to donating a product and supporting local markets.
Device
Desktop and mobile
Process
Research
Before beginning the design process, there was a lot to discover: understanding the donor's needs, the market, and how local producers could fit into the flow. Due to time and resource constraints for user research at this stage, I used AI to support building a foundation for informed hypotheses.
Personas
Sofia, The Donor
I want to know my donation is actually reaching someone, not disappearing into an organization's overhead
Helena, The NGO administrator
I've never used a platform like this before I need it to guide me step by step so I don't make mistakes
There are two potential user types worth defining, even though the flow itself serves one of them directly:
Primary user: The Donor
The person browsing projects and donating products. Their trust and confidence directly shape whether they complete a donation. We can break into 1-2 personas:
First-time/casual donor,
that wants to give something meaningful but is unfamiliar with the platform. This user needs trust signals to feel confident before completing a donation, such as transparency about where products go, a tax-deductible receipt, and reassurance that "100% of your donation goes directly to this project."
Repeat/committed donor,
that already trusts the platform and understands how it works. This user wants speed and efficiency, needing quick browsing, filters, personalised information based on past donations, a fast checkout, and may want to support multiple projects or products at once.
Secondary user: The Foundation/NGO
Not a direct user of the donation flow, but they input the information that powers the whole experience: project details, NGO details, products needed, and quantities required. This side of the platform needs manager tools, data analysis, and campaign management features, since the site is built for accountability toward both the donor and the foundation. We can break into 1-2 personas :
Experienced foundation manager,
that is comfortable with digital tools and platforms. This user wants efficiency and control, needing fast ways to introduce projects, upload products, and track campaign performance.
First-time foundation manager,
That is new to digital fundraising tools. This user needs step-by-step guidance to introduce a project correctly, prioritizing simplicity and reassurance over advanced features.
Needs and Pain Points
Nico, First Time Donor
"I want to be guided in a way I am sure in the end I finish the process and the foundation got the products"
Hajime, The First Time NGO
I need help to load all need information about the association and the products to make sure the page is ready to the final users
With the primary and secondary users defined, the next step was to understand their needs and pain points. Due to the lack of funding and time for real user interviews at this stage, I used Claude to simulate user perspectives and surface likely needs and frustrations, building a foundation to validate later with real users once resources allow.
The Donor
First-time/casual donor
-
Doesn't know if their donation actually reaches the people who need it
-
Feels disconnected from the impact of giving money vs. giving something tangible
-
Unsure whether the platform or foundation is legitimate and trustworthy
-
Overwhelmed by too many project choices without clear guidance on where help is most needed
Repeat/committed donor
- Wants to donate again quickly, but has to re-browse everything from scratch
-
Lacks visibility into the ongoing impact of past donations
-
Wants to support multiple projects at once, but the flow isn't optimized for that
-
No personalized suggestions based on causes they've supported before
The Foundation/NGO
Experienced foundation manager
-
Needs to manage multiple projects and campaigns efficiently, but lacks bulk tools or dashboards
-
Wants data and analytics to track campaign performance and donor engagement
-
Struggles to keep product needs and quantities updated in real time across projects
First-time foundation manager
-
Unfamiliar with digital platforms, so setting up a project feels intimidating
-
Needs guidance to correctly describe project needs, products, and quantities
-
Risks of making errors (wrong info, unclear project descriptions) without built-in validation or step-by-step support
-
May give up entirely without enough hand-holding, missing out on potential donations
Benchmarking
To address the needs and pain points identified above, I looked at two types of benchmarks: donation platforms with similar flows to understand how trustfull and transparency are typically built (DonateKarte, Hope Welfare Trust, Hope Found), and marketplace platforms (Amazon, Zalando, OTTO, eBay) to understand how product browsing, selection, and checkout experiences are designed at scale. Combining both helped shape a flow that feels as familiar as shopping, but as meaningful as giving.
Mapping Main Hypotheses
.png)
After exploring both donor and foundation needs, the next step was to map and prioritize the assumptions, transforming them into hypotheses ranked by effort and impact. This stage was done together with the front-end engineer and the project owner, bringing technical and business perspectives into the prioritization.
Main user stories from the donor
-
As a user, I need to see clear trust signals (transparency, tax receipt, "100% goes to project"), so I feel confident donating for the first time.
-
As a user, I need to filter products by category, so I can quickly find what I want to contribute to.
-
As a user, I need to see the progress of a project's needs, so I understand the impact and urgency of my donation.
-
As a user, I need to donate to multiple projects or products in one flow, so I don't have to repeat the process each time.
-
As a user, I need personalized suggestions based on past donations, so it's fast and easy to give again.
Main user stories from the foundation/NGO
-
As a foundation manager, I need to easily create and update a project's needs, so donors always see accurate, real-time information.
-
As an experienced manager, I need dashboards and analytics, so I can track campaign performance and donor engagement.
-
As a first-time manager, I need step-by-step guidance when creating a project, so I don't make mistakes or feel overwhelmed.
-
As a foundation manager, I need validation and clear structure when entering product details, so the information stays consistent and trustworthy for donors.
-
As a foundation manager, I need visibility into how local markets or vendors are contributing, so I can strengthen those relationships over time
Ideation & Flows
With the main hypotheses mapped out, the next step was to ideate the main pages and flows. Creating wireframes and user journeys helped translate the donation and marketplace research into a clear, scalable structure. I also used Figma Make to speed up the process.
AI Ideation
I imported all the project information into Claude to originate the perfect prompt to use in Figma Make. This way, I saved tokens and got faster good results. Then it was a cycle of little adjustment of the main flow after feedback, and on the UI (especially on mobile breakpoint), speeding up the transition from ideas to tangible screens.
See Prototype here
MVP
The main hypotheses still covered a broad scope, more than what could realistically be delivered in the first version. The next step was to narrow it down into a focused MVP, defining what would launch first and settling clear iteration cycles for what comes next.
Wireframes & main flows
With the MVP defined, the next step was to wireframe the main flows, cleaning the design down to just what we decided to implement in this first version. Creating wireframes and user journeys helped translate the donation and marketplace research into a clear, scalable structure. I also used Figma Make to speed up the process.
Below you can see some of the Mapped Flows
As a user, I want to quickly browse all projects, select the ones I want to donate to, and easily proceed to checkout.
.png)
.png)
Look and Feel
With the flows defined, I moved into visual design, translating the wireframes into high-fidelity mockups that reflect the tone, clarity, and trust the platform needs to convey.
See Prototype here
Happy path Video
Seeing the interactions in motion tells a different story than static screens. This walkthrough shows the end-to-end main happy path, from discovering a project to completing a contribution, bringing the key decisions and transitions to life.
See Prototype here
Design System & Accessibility
To move into high-fidelity wireframes, I needed to develop the design system from the start, so it would be easy to iterate and apply global changes across typography, colors, icons, and components. Accessibility was considered throughout, ensuring proper color contrast, readable typography, and clear interactive states, so the platform stays usable and trustworthy for as many donors as possible.
Libraries
With the brand foundations in place, I built out a full set of design libraries, ensuring consistency, scalability, and accessibility across every page of the platform.
Here is a List of some initial system presentations made with the help of Figma:
Color , Typography , Grid , Icon, Shadow
Accessibility Check
Accessibility checks were carried out on the design system during the build. Colors adjustments, typography spacing, however, a full audit will be needed once the platform is live — testing on the real, built product is where true validation happens. This will include automated tools like WAVE to check contrast and WCAG compliance, as well as manual testing for keyboard navigation and screen readers like VoiceOver.
Next steps
Every project reveals as much about what comes next as it does about what's been built. These are the ideas and directions that emerged throughout the process, features, improvements, and open questions that would shape the next phase of the product.
As a user, I want to be able to create my own projects so I can rally donations around a cause I care about.
.png)
Conclusion
Every project leaves you with more than just a delivered design; it leaves you with sharper instincts, clearer blind spots, and a better sense of what you'd do differently next time. This section captures exactly that: the improvements I'd make to the process, the learnings that came from diving into an unfamiliar domain, and the broader reflections that shaped this challenge from start to finish.
IMPROVEMENTS:
-
AI was a great help for such a project with no budget or time. It was used especially for exploration, ideation, and branding, but it's challenging to know where to stop. I didn't use it for deliveries, though, because it was adding extra information that was not supposed to be in MVP
-
Figma Make can not be embedded (ATM), but the link to the prototype was enough to deliver the first idea of the navigation
-
I did a short user feedback among friends, but I felt it was not enough for quantitative data and to make solid decisions.
LEARNINGS:
-
I ran out of tokens pretty quickly, so it was worth prompting first with Claude to curate the results.
-
We need to be especially careful with the mobile prompt. Because I didn't think of it, I needed a bunch of iterations after that, which cost me several times all the token consumption
-
The e-commerce topic was not new to me, but the donation-based project was. So I needed to investigate first some different concepts to understand the best choice for us.
-
One of the biggest challenges was creating a B2B and B2C interface. Even though we started MVP just with B2B with 2 self-managed projects, we are already thinking about the structure to include B2C in the near future:
B2C (Business-to-Consumer)
-
The donor-facing side: individual users browsing projects, choosing products, and donating. This is a consumer-facing e-commerce-like experience (Home, Project List, Product Detail, Cart, Checkout).
B2B (Business-to-Business)
-
The foundation/NGO-facing side: organizations using the platform to list projects, manage product needs, and track donations/campaigns. These are institutional users, not individual consumers.
-
markets/vendors are also onboarded as product suppliers, that's a second B2B relationship.
CONCLUSIONS:
-
Working on a passion project within real constraints, no budget, no team, limited time, forced every decision to count. It was a reminder that design doesn't need perfect conditions, just clear priorities.
-
This is just the beginning. There's a full B2C experience, a project manager flow, and an NGO onboarding still to build , and I'm excited to keep going.
-
Designing something you genuinely believe in changes how you work. This project pushed me technically and creatively, and I'd love to hear what you think.