UX Case Study: Small Appeal

How I designed an online presence of an NGO which helped increase donations for Covid-19 Food Distribution Drive with social proof

Mohammed Abraz
Nova Semita
4 min readAug 6, 2020

--

Main Image
Hero Section — SmallAppeal

Objective

Create a website and strengthen the social proof of the work the NGO has done. Create awareness of the initiatives the NGO has undertaken and improve the flow of funds through donations and CSR engagements.

Overview

As a new NGO, SmallAppeal mainly focuses on educational initiatives and food security. SmallAppeal lacked an online presence where it could display and share the work they had engaged in. This became a pain point when a nationwide lockdown was imposed in March to halt the spread of Covid19 and funds started to dry.

Earlier the NGO representatives would schedule meetings with companies for CSR Funds and use presentations as means of showing proof of work. Another pain point was that individual donors were wary of donating funds as the organization lacked a website. In a world connected by the internet, an online presence is a sense of proof.

My Role

I worked on this project as a lead designer and developer.

The Challenges

  • Designing a website which shows detailed work of the organization
  • Creating clear CTA’s for donation of fund
  • Make the Covid Food Distribution Drive the most important fundraiser.
  • Clarifying Value Propositions of funds and how they are being utilised
  • Creating a monthly subscription model for small donations.

Research and Takeaways

Research and Validation

The most important things in NGO websites is how various stakeholders perceive of the website and if it satisfies the amount of impact the organization has shown through social proof and other forms of metrics.

  • The organization set me up interviews with CSR Heads of different MNCs to help me understand what they look for in an NGO during the vetting process.
  • Interviewed 20 of past individual donors about how they perceived donating funds and what exactly were they looking for when doing it.

Key Takeaways

  • Metrics of fund spendings create a clear understanding if the organization has achieved its goals
  • Testimonials of key people with their company name the organization has worked with
  • Testimonials of students/parents who received support from the organization

Implementation

Low Fidelity Designs

LF Prototypes — SmallAppeal
Early Prototypes exploring the Hero Section
HF Early Prototype — SmallAppeal
Early High Fidelity Prototype of the Hero Section

Main Design Points

  • The Hero Section focuses on the current fundraising drive going on. Designed with changing fundraising drives, right half displays pictures and videos from the ongoing drive. The left half has the main title of the drive and CTA’s with it. Very minimalist and focuses on what needs to be delivered
  • The second section of the page highlights the education work the NGO is engaged in
  • The third section has images of companies the NGO has worked with
  • The fourth section has clear testimonials from people who have worked with the NGO on various projects
  • There are individual fundraising drive pages
  • Every drive page has description, social images, metrics, and links to the respective fundraising drive

High Fidelity Designs

All Pages — SmallAppeal
Home and Fundraising Pages
Fundraising Pages — SmallAppeal
Detailed Fundraising Pages
IP — SmallAppeal
Infographic Components

Results

The website had a tremendous impact on the financials of the NGO. After the site went live the NGO experienced an increase in funds from individual donors.

  • A 48% increase in funds flexibility for the Covid Food Distribution Drive
  • 15 new monthly donor subscriptions in 20 days after the site went live
  • CSR engagement up by 25% after the site went live

Learnings and Impact

When designing websites for organizations which create significant change in society, it is very hard to depict the amount of impact they have brought in the communities they work in.

As I set upon designing and engaging with various stakeholders, understanding what is the thing which the people who the organization works with are looking for, or what people who come through word of mouth are looking for. There is a huge difference between the two.

As my very first project involving UX process as part of my work, I really understood what goes into the experience. User Interviews is one thing I significantly improved on during the process. Designing this website has been a wonderful learning experience.

--

--

Mohammed Abraz
Nova Semita
0 Followers
Writer for

Designer and Surface Level Knowledge Geek