The brief

Youth Islamic Studies is a part-time Islamic institute in Pickering, Ontario, serving high school students, university students, and working professionals. It had real programs, real teachers, and waitlists, but no way for a new family to find it, evaluate it, or enroll. With classroom space capped at 24 students, serving more students meant live online cohorts, which made the site the institute's front door: where a new family discovers the programs, meets the teachers, and registers.

Design language

Tokens first, pages second. Three colour styles and a two-typeface system built as Framer styles before any layout, so every page inherits the system and a rebrand is a token edit.

Deep green ink and gold on ivory, Lora for headings, Inter for body and UI. Generous whitespace, no decorative iconography, and Arabic set with full diacritics (Qurʾān, Ḥifẓ, ʿaqīdah), because typographic care is itself a credibility signal to this audience.

Components under constraint

Instead of stock imagery, I designed credential-led text cards that foreground scholarly lineage, which this audience weighs more heavily than faces. The constraint produced a better component than the default.

One template, six programs

Six program pages run off a single CMS-driven design. Fields for schedule, pricing, format, and registration, with conditional visibility so empty fields collapse instead of shipping blank labels. A schedule change is a field edit, not a rebuild.

A team of one does not design pages. It designs the system that produces the pages.

The transformation

Built on a template chassis (Greenleaf), chosen deliberately: one week and one designer meant keeping the template's proven page structure and directing every hour at what a template cannot provide. The brand system replaced its visual identity entirely; the CMS architecture replaced its static content model; the content was written from zero. Structure was the one thing worth buying.

Shipped

Live in seven days: DNS migrated without dropping institutional email, registration and waitlist forms live for every program, the support page live, and an eight-article editorial series staged. Baseline at launch: 5 programs at or near capacity from word of mouth alone. Registrations, waitlist conversion, and online cohort enrollment are being tracked through the fall 2026 intake, and this page updates when the numbers are real.

Reflection

One week bought speed at the cost of validation: the site launched on research and heuristics, not usability testing, and the registration flow is the first thing under test now that it carries traffic. A single perspective is a single point of failure, so the next sessions run with prospective parents, the audience I resemble least. What I would keep every time: tokens before pages, and collections before pages.

The Impact

Live in seven days, solo: brand system, CMS architecture, six program pages, content, and launch operations, including a DNS migration that never dropped institutional email. Not a concept, not a prototype. A real institution's front door, open and enrolling.

The baseline tells the story the site exists to change: five programs at or near capacity from word of mouth alone, before any web presence existed. Registrations, waitlist conversion, and online cohort enrollment are now being tracked through the fall 2026 intake, and this page will update when the numbers are real.

A team of one does not design pages. It designs the system that produces the pages, and then it ships.