Charity Web App UX

UX Design | Visual Design

Problem Statement

The project brief is to design a platform that connects non profit organizations or Charitable Organizations seeking donations, to Donors who wish to donate to non-profits. The app facilitates the discovery of a donation campaign by non profits and allows donor to know more about a campaign before donating. Since most donors don't donate regularly through an installed mobile app, the proposed application is a web experience that is responsive and accessible in mobile.


Most of donors in India are small time, irregular charity givers making small contributions motivated by the cause. A interview survey of donation habits is done to understand donor motivations. Primary research is done with donors (sample of 5) to identify their expectations. Charity organisation process of fund collection and campaign is studied to identify pain points in the current system.

Donor Motivations
- Contribute for a cause / issue that the donor relates to through experiences and believes
- Wants to make an social impact through small contribution
- donate to campaigns in which the donor feels his contribution makes a difference with clear achievable goals
- Willingness to donate for causes related to belief systems
- Like to know the impact of donation
- Small amount donors does not regularly donate as a habit
- Word of mouth from social circles increases their trust on organisation and so willingness to donate
- does not spend time researching about the NGO
Pain points
- Donor is unsure to trust the charity organisation?
- Cannot track the impact of the donations
- Does not know where the donated money will be utilised for

Design Scope

To Design a web platform through which donors can easily discover donation campaigns by non profits and know more about a campaign. The app should provide a quick and friction free experience for donating and have familiarity for ease of use. The donor is donating to procure the items needed for a cause. On donation, the item is procured and shipped to charity organisation for distribution by retail platforms like amazon, flipkart etc. The donor experience features are easy and quick campaign discovery, listing tangible items the donors can contribute in buying, familiar donation process and knowing more about succesful campaigns to build donor trust.

Easy discovery of relevant social campaigns to donate
Provide familiar and quick donating experience for donors
Allow sharing of campaigns with friends to increase word of mouth
Increase donor trust to donate again by providing campaign updates
Information architecture
Information architecture

Landing page content

The landing page content should quickly pitch Charito for the first time visitors and build early trust to explore campaigns. I decided to feature information in a manner that makes most sense to our visitors starting from what is charito / to showcase some campaigns and impact stories. mobile wireframes and flows

Proposed User flow

Wireframes and user flows for both mobile and web experience is made as shown. The item specific donation check-out flow is created similar to a online e-commerce cart flow for familiarity.

mobile wireframes and flows
desktop wireframes

UI Design

The UI is intended to be clear and clutter free for quick and easy information retrieval.

Landing page - Charito Pitch and overview

The landing page is designed to showcase the campaigns running, how charito work and showcase few of the success stories. This helps the user to know what charito is for and quickly build trust scrolling through the content.

Quick Campaigns Discovery

Campaign exploration is done quickly by scrolling through campaign cards that shows a brief overview of the project along with percentage campaign goal reached already through donations. Category filters are given to find projects that is relevant cause which the donor relates to.

Campaign details and Donating

The donation flow is made familiar with any online commerce flow with clear needed items individually which the donor can pick in quantity and donate for procurement. Sharing of a campaign is made easier with share call to action as most of donations are through word of mouth. The charity organisation can upload videos and explanations pitching the campaign and its social impact.

Donation Impact and building donortrust

Donor trust can be built through sending reguular campaign updates which the donor has supported. Sending monthly newsletter of impact stories and showing impact of the campaign can increase donor trust and willingness to donate more. It can also be done through email notifications and updates.

Web Responsive UI

The UI design is done for desktop experience as shown with different campaign card layouts and visual layout to show more information. The visual UI elements for both mobile and desktop are made consistent.

Prototype / Testing

A figma prototype is created and tested with few donor users for discovery of campaigns and ease of donation flow. It is observed that the users understood the donation flow with less on-boarding as the experience of item specific donations is designed similar to online shopping experience.


Working on an individual concept project with a time constraint and research / testing was challenging. The research done is limited and can be extended to address more use cases and scenarios. More features can be added around Peer sharing of campaigns as donors gain trust to donate from peer recommendations and social proofs.