Project Overview

NZF Canada (National Zakat Foundation) helps Muslims in Canada calculate and distribute their Zakat, an obligatory form of charitable giving. While working at Stormfors, I developed a custom Zakat calculator for their website.

The objective was twofold:

1. Create a tool that was accurate and accessible for users of all digital skill levels.
2. Deliver a best-in-class experience that would help NZF Canada stand out from competing charities offering similar calculators.

The Challenge

Several challenges had to be addressed for this project:

1. Religious accuracy — The calculator had to follow Islamic guidelines precisely to ensure trust.
2. Live market data — Gold and silver prices, which affect Zakat amounts, change daily. The tool needed to fetch and apply real-time pricing data.
3. User accessibility — Many users were not tech-savvy, so the design had to be simple, approachable, and reassuring.
4. Competitive pressure — Other charities also had calculators, but NZF wanted the most reliable, user-friendly option available.

My Role

I was responsible for delivering the calculator end-to-end:

• Calculator Development – Built the tool directly inside Webflow, extending functionality beyond native limits.
• API Integration via Zapier – Connected the calculator to a live gold and silver price API through Zapier, ensuring real-time accuracy without manual updates.
• Logic & Accuracy – Programmed custom calculation logic in JavaScript to align with Islamic guidelines.
• UX & Accessibility – Designed the flow for maximum clarity, so users of all digital skill levels could calculate Zakat with confidence.
• Competitive Differentiation – Delivered a polished, reliable tool that positioned NZF Canada as a leader among charities.

Services Rendered

• Custom Calculator Development
• API Integration (gold & silver prices via Zapier)
• UX Optimization for Accessibility
• Technical Implementation in Webflow

Tech Stack

• Webflow — Site platform and embed environment
• Custom JavaScript — Core calculation logic and user interaction
• Zapier — Automated API connection for live pricing
• Gold & Silver Price API — Real-time market data for calculations

Process & Approach

1. Requirements Gathering
   • Worked with NZF Canada and Stormfors to define the exact Zakat rules to implement.
   • Clarified inputs, outputs, and UX needs for a wide audience.
2. Building the Calculator
   • Developed a custom calculator inside Webflow.
   • Embedded custom JavaScript to handle all logic and update results dynamically.
3. API Integration
   • Used Zapier to connect Webflow with a gold & silver pricing API.
   • Automated price updates to keep calculations accurate without manual intervention.
4. User Experience Design
   • Structured the form and outputs for maximum clarity.
   • Prioritized accessibility: large inputs, simple copy, and mobile-friendly design.
5. Testing & Refinement
   • Tested edge cases to ensure accuracy across inputs.
   • Simplified flows after reviewing with stakeholders to improve usability.

Outcomes

The Zakat calculator delivered for NZF Canada achieved:

• Religious and financial accuracy — Results aligned with Islamic guidelines and current market rates.
• Accessibility for all users — Clear, simple design made it usable even for those with limited digital experience.
• Competitive differentiation — The polished, reliable tool positioned NZF Canada as offering the best Zakat calculator available in Canada.
• Automation & scalability — With Zapier + API integration, the tool updates automatically, reducing ongoing maintenance.

Reflection

This project highlighted how technology, automation, and design clarity can come together to serve both community trust and organizational strategy.

If I revisited this project, I would:

• Expand accessibility testing with screen readers and keyboard navigation for full WCAG compliance.
• Enhance mobile-first interactions for even smoother use on small screens.
• Implement analytics to measure usage and optimize user flows.