Case study · 2025
Al Quran Online Academy — Class Portal
- Role
- Frontend, UX, accessibility
- Stack
- ReactTypeScriptCSS
Teaching one-to-one Quran classes online means coordinating schedules, progress, and lesson material across time zones — and across generations, because parents follow along too. The portal replaced a scatter of chat messages with one calm, readable place.
The problem
Parents were asking the same three questions every week: when is the next class, what did my child cover, and what should they practise? Answering each family individually was eating the hours I wanted to spend teaching.
TODO: add a sentence about how many students/families the portal serves.
The approach
One screen answers all three questions: the week's schedule, a short progress note per lesson, and the current practice assignment. Nothing else competes for attention.
Designed bilingual-ready from day one: the layout tolerates right-to-left Arabic text, longer Urdu strings, and mixed-direction lines without breaking — a constraint that quietly improved the whole layout system.
Accessibility as the core requirement
Grandparents use this portal. Everything stays readable at 200% zoom, every control works with a keyboard, and colour is never the only signal. Testing with real family members was more valuable than any audit tool.
Progress notes use plain, warm language rather than grading jargon — interface writing is part of the interface.
Outcome
TODO: add the real outcome — e.g. how much weekly back-and-forth messaging it removed, or a parent's comment about the schedule view.
What I learned: designing for a grandparent on a phone is the strictest performance and accessibility budget there is.