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.
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.
