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 research and benchmarking, 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, since they're giving without receiving anything tangible in return. Worth breaking into 1-2 personas depending on your research, e.g.:
-
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, and 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. Worth breaking into 1-2 personas depending on digital experience, e.g.:
-
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
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 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 (DonateKarte, Hope Welfare Trust, Hope Found) to understand how trust and transparency are typically built into giving, 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 browse products by project and 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 save some tokens and is faster to get the results. Than was cicle of little adjustment of the main flow after feedback, and on the UI (specially 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 everything 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 Marked Flows
As a user I wanna quickly see all projects, select the ones I wanna donate and easily proceed to check out
.png)
Look and Feel
With the flows defined, I moved into visual design — translating the wireframes into high-fidelity mockups and interactive prototypes that reflect the tone, clarity, and trust the dashboard needs to convey.
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
Starting from the three main colors provided by the project owner, I built a full color system that ensures consistency across pages while helping users better understand navigation and the hierarchy of elements throughout the platform.
Here is a List of some initial system presentations made with the help of Figma:
Color , Typography , Grid , Icon, Shadow
Next steps
Beyond the delivered design, there are features, system decisions, and open questions still to be explored. These are the next steps that would take this product from a strong solution to a fully scalable one.
Problem
As an Analyst, I wanna be able to see the same layout but black for comfort reasons
Scope
We want to add dark mode view :
-
new color range
-
accessibility check
.png)
Problem
As an Analyst, I wanna be able to see the same layout but black for comfort reasons
Scope
We want to add dark mode view :
-
new color range
-
accessibility check
Black mode
Starting from the three main colors provided by the project owner, I built a full color system that ensures consistency across pages while helping users better understand navigation and the hierarchy of elements throughout the platform.
Accessibility
Starting from the three main colors provided by the project owner, I built a full color system that ensures consistency across pages while helping users better understand navigation and the hierarchy of elements throughout the platform.
System tokens
Starting from the three main colors provided by the project owner, I built a full color system that ensures consistency across pages while helping users better understand navigation and the hierarchy of elements throughout the platform.
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 project with no budget nor time. It was used specially for exploration, ideation and branding, but is challenging to know where to stop. I didn't use it for deliveries dough cause was hallucinating and adding extra information that what not supposed to be in MVP
-
Figma Make can not be embedded (ATM) but the link to the portotype was enough to deliver the first idea of the navigation
-
I did a short user feedback among friends but felt was not enough for quantity data and take solid decisions.
LEARNINGS:
-
Is worth to prompt first with claude to curate the results without so much token usage.
-
we need to be special carefull with mobile prompt. Because I didn't think of it, I needed a bunch of iterations after that cost me several times all token consumption
-
Ecommerce topic was not new to me but donation base project was. So I needed to investigate first some diferent concepts to understand the best choice for us.
-
One of the biggest challenges was creating a B2B and B2c interface. Even dough we start MVP just with B2B with 2 projects self managed projects, we are already thinking on 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:
-
Doing design challenges while working demands a lot of discipline and planning ahead.
-
Overall a great challenge, can’t wait to know your opinion…