Charity Web App UX

UX Design | Visual Design

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. The app also provides a quick and friction free experience for donating and should have familiarity for ease of use. 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. This increases sharing across multiple platforms encouraging more donors.


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 20) to identify their expectations. Charity organisation process of fund collection and campaign is studied to identify pain points.

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.

Information architecture

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.

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.

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.

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.

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.