National Zakat Foundation

An optimised donation process for a UK charity

The National Zakat Foundation (NZF) is a charity that supports Muslims in need by collecting and distributing Zakat donations. Zakat is an obligatory annual donation where the donation value is determined by an individual’s personal wealth.

Their goal was to provide greater transparency and control to each donor while increasing the average donation value.

Lead time:
10 weeks
Sector:
Charity
Target Type:
B2C
Goal:
Provide a transparent donation process, increase donation value
Services:
UX Design, Vue.js Development, Laravel Development
Our relationship:
NZF also commissioned a new website build with us
Scope
  • User experience workshops
  • Adobe XD wireframes
  • Adobe XD designs
  • Comprehensive engagement tracking
  • Eazy Collect & Secure Trading payment gateway integration
  • Vue.js Development
  • Laravel Development
  • QA and testing
Resource
  • 2 x UX Designers
  • 1 x Project Manager
  • 1 x Front-end Programmer
  • 2 x Back-end Programmers
  • 1 x Quality Assurance Tester
  • 1 x Digital Marketing Specialist

The challenge

The NZF donation process is unique because Zakat donations are compulsory. Consequently, user behaviours are not comparable to other charities. We needed to use NZF’s data to build a new donation flow that empowered donors to give to specific causes while encouraging increased donation values.

View site

Zakat calculator

We rebuilt NZF’s Zakat calculator to make it easier for an individual to calculate their donation value.

Progress bar

A progress bar is visible at all times to encourage users to complete their donation.

Greater control

Donors have the option to direct their donation to the causes they care about most.

Transparency

The donation value and allocation is visible at all times throughout the process to increase transparency.

Our Approach

A number of research workshops were held to gain insight into the Zakat donation process and typical donor behaviours. Our user experience team used this data to create an intuitive donation flow with options to round up donation values along the way. We combined page structure with intelligent use of typography to signpost the user journey and enable rapid progress to the checkout.

We developed the donation flow with a Vue.js frontend and Laravel backend to provide a flexible code base that could be maintained by the NZF team.

 

A flow for every user

The new donation flow is designed to provide greater control to the donor over how their donation will be used. Customer insights showed that this was important to a large number of NZF donors. However finite control is not desired by everyone, that’s why there’s a fast track option available at every step to enable a swift journey through the donation steps.

Related work

Get in touch