A calmer, clearer site for an online Quran academy Website redesign & development for Online Taleem ul Quran

01 · Context

The problem

Families anywhere in the world needed to understand one-to-one online Quran classes quickly, and be led to the one step that matters: booking a free demo class.

02 · Method

Approach

We rebuilt every page on a new design system and Next.js 16: an animated 'Inside a class' section, an honest comparison table, a timeline that fills as you scroll, one clear call to action, structured data and seven SEO articles.

03 · Decisions

Why we built it this way.

1. D-01

   One action: book a free demo

   Every page leads to the same step. The button sits in the navbar, the hero and the mobile menu, so families never have to look for it.

2. D-02

   An honest comparison, not a sales table

   The academy column only states what the academy already says. The madrasa and home-tutor columns say 'usually' or 'depends', because every option differs.

3. D-03

   A live class built in code

   Stock photos were tried and removed. An animated Tajweed lesson in plain HTML and CSS shows what a class covers, with no image to load.

4. D-04

   Same lead pipeline, calmer form

   Bookings still reach the academy's Google Sheet and inbox with the same keys, so nothing changes behind the desk. Families just pick a weekend demo date.

5. D-05

   Structured data and seven articles

   Organization, Course, FAQ and article schema plus seven guides for families help search engines and AI assistants describe the academy correctly.