National Zakat Foundation

A Vue.js & Laravel web app to manage charity donations

The National Zakat Foundation (NZF) is a UK based charity that helps Muslims in need by collecting and distributing Zakat payments to a variety of causes. Zakat is a compulsory annual donation that is given by Muslims and is a proportion of their total wealth.

NZF challenged us to increase donations to enable them to help more people. They also wanted to increase the level of control that donors have over how their Zakat is distributed.

Lead time:
10 Weeks
Sector:
Not For Profit
Target Type:
B2C
Website Goal:
Increase donations, Empower donors
Services:
UX Design, Web Design, Vue.js, Laravel, WordPress
Deliverables:
Website, Web App
Scope
  • User experience workshops
  • Adobe XD wireframes
  • Adobe XD designs
  • Comprehensive engagement tracking
  • Eazy Collect & Secure Trading payment gateway integration
  • QA and testing
  • Laravel development
  • Vue.js development
  • WordPress
Resource
  • 2 x UX Designers
  • 1 x Project Manager
  • 1 x Front-end Developer (Vue.js)
  • 2 x Back-end Developer (Laravel)
  • 1 x Quality Assurance Tester
  • 1 x Digital Marketing Specialist

The challenge

To enable NZF to increase donations, we delivered a new WordPress website and donation flow.

The unique way of donating Zakat and the mandatory nature of donations meant that user data needed to be reviewed carefully to build an optimised user flow that would increase donation value.

View site

Zakat calculator

We developed a Zakat calculator to help individuals calculate the Zakat they owe. This tool increases NZF’s visibility in the search engines and increases their brand awareness.

The donation flow

The Zakat calculator seamlessly leads into the donation process and carries the donation values into the donation flow, encouraging the user to donate their Zakat with NZF.

Donation allocation

Donors are able to allocate their donations to the causes that they care about most.

A branded experience

The donation flow has been designed in line with the NZF brand and incorporates interactive elements to provide a superior user experience.

Our approach

We ran a number of workshops to explore the Zakat donation flows with the NZF team. Our goal was to create a useful and seamless donation process that would maximise the value of donations. To do this, our UX team designed a simple user journey with options to round up donation values to whole numbers and add additional donations. We designed the donation flow across a number of key pages to provide a user friendly and manageable donation process.

Managing the user experience

As a compulsory donation, Zakat donor behaviour can greatly vary and the donation flow needed to accommodate for all users. For individuals who want to distribute their own Zakat, the NZF donation flow has been designed to enable donors to give to the causes that they care about most. However a streamlined donation process is available for individuals seeking a swifter donation flow.