Heartfelt - Collective Giving App

Project timeline: 12 weeks (Feb 2024 - Apr 2024)
Tool used: Figma
Target user-base: People who wants to donate and make a fundraiser

Project showcase laptop mockup
Project showcase laptop mockup
Project showcase laptop mockup



Focus Area

Collective giving is the pooling of funds by a group of individuals, put towards a specific, mutually determined cause. Current and past research on collective giving in the US has shown that members give more, give more strategically, and are more civically engaged when they give together (Bearman & Franklin, 2018). Micro-donations (small sums donated by many) can turn small dollars into big impact through vehicles like giving circles, crowdfunding, and more. Giving happens in many collective settings — the home, the workplace, religious institutions, or via identity-based groups or giving circles — but much of this behaviour still happens offline.

How might we supercharge the act of giving together by creating digital products that make collective giving easier and more accessible?

About Heartfelt

Heartfelt is a go-to app for donation, charity, and fundraising. With Heartfelt, users can support the causes they care about with confidence and ease. The platform ensures transparency every step of the way, providing users with real-time updates on how their donations are making a difference. Heartfelt keeps users informed and connected, empowering them to make a meaningful impact on the issues that matter most.



Competitors Analysis

I analyst five competitors. KitaBisa, GoFundMe, GlobalGiving, and crownfunder. This analysis aimed to identify the strengths and weaknesses of each competitor, helping me determine which features to incorporate into my app and which to avoid.

User Interview

I conducted user interviews to understand users' experiences when using collective giving platforms while also seeking to understand user needs and preferences. I interviewed five people. Two people are willing to interview via video call meanwhile the other three are comfortable with a written interview.

Affinity Maps

I organized the interview data using affinity mapping. By doing this, I grouped the information into different categories. From the data, I discovered that users facing the same problem need transparency updates after donating.



01 Problem Statement

Online donation platforms lack the transparency in post-donation communication, leaving donors unaware of the progress and impact that their contributions are making

01 “How Might We” Statement

  • HMW ensure donors get clear updates after they donate online so that they feel informed and engaged?

  • HMW ensure donors feel reassured about the impact of their contributions by offering detailed donation progress reports?

  • HMW develop features that allow donors to track the path and results of their contributions, fostering trust and accountability?

  • HMW make post-donation communication on online platforms more transparent, engaging, and reassuring for donors?

02 Problem Statement

Users would sometimes experience illegitimate fundraising campaigns resulting in many donors not only being scammed, but potentially losing trust towards the act of donating as a whole.

02 “How Might We” Statement

  • HMW develop a system to detect and flag fake fundraising campaigns on online platforms to ensure that donors are not misled?

  • HMW increase transparency in online fundraising to empower users to more easily identify and avoid fake campaigns?

  • HMW educate users about the signs of fake fundraising campaigns and provide them with tools to make informed donation decisions?

  • HMW implement account verification processes for fundraising campaigns on online platforms to prevent the fake campaigns?



01 Potential Features Solution

  • Create a system that automatically sends donors updates via email or in-app notifications. The updates will include summaries of the progress made with their contributions.

  • Implement a feature within the donation platform that allows donors to access detailed progress reports on specific projects they've supported. The reports provide information about the impact of their contributions.

  • Create a "Donation Tracker" feature where users can stay informed about the status of their donations and the results of their contributions in real-time.

02 Potential Features Solution

  • Implement account verification for fundraisers to verify their identities and legitimacy. This could include verifying personal information, contact details, and supporting documentation to ensure that fundraisers are trustworthy.

  • Requiring fundraisers to provide detailed information about their projects, goals, and intended use of funds such as project timelines, budget breakdowns, and progress updates.

  • Provide guidelines, tips, and examples of red flags to look out for when evaluating fundraising.

  • Create reporting mechanisms within online platforms that allow users to report suspicious fundraising campaigns.



Design System

In designing my fundraising app, I chose a vibrant color palette symbolizing various emotions, such as hope, urgency, trust, happiness, energy, and creativity. These colors evoke specific feelings, fostering a positive user experience. For typography, I selected Ubuntu for headings and Manrope for body text, ensuring professionalism and readability. Despite time constraints, I successfully integrated custom illustrations from Freepik and icons from Google Icons to enhance the app's visual appeal and usability.

Home Page

Users will immediately see the urgent causes in any categories and search the causes they want to donate

Clicking on 'Donation' directs users to a page featuring categorized causes they can support.

The 'Auto donation' feature enables users to deposit funds, which are then automatically deducted.

“Fundraising” leads users to a page where they can monitor their fundraising progress, activities, and create new fundraisers.

Donation Categories

The donation page provides users with access to categorized causes, auto donation functionality, and a search feature. Additionally, there's a “Start Fundraising’ button for users interested in fundraising. Users can easily discover causes on this page.

Donation Details

When donors select a cause to donate to, they'll access detailed information about the fundraising campaign. This includes verified fundraiser details, verified patient information, and a breakdown of fund usage. Donors can also read the compelling fundraising story, which highlights the individuals in need, and view accompanying photos or videos. Donors can send prayers and read prayers from other users.

Donation Tracker

The app includes a "Donation Tracker" feature, ensuring that users receive clear updates after they donate online, allowing them to stay informed and engaged with the status of their contributions in real-time.

Fundraiser Account

To build trust among users, the app offers a feature allowing them to review the credibility and activity of fundraiser accounts. Fundraisers can provide detailed bios about their community involvement and share updates on fundraising progress.

Users are allow to follow, message, and email the fundraiser.Encouraging users to connect and communicate easily within the community.



#1 Issue

During testing, I observed that some users initially struggled to find the donation tracker.

#2 Issue

Since the app will be based in Indonesia, where the majority of people speak Bahasa Indonesia and English.

Contact me at



Hadi Putri


Contact me at



Hadi Putri


Contact me at



Hadi Putri