Back to Projects
2024
Web App

Quran Mazid Website

Transforming a complex religious database into a clam, distraction-free digital world. The new experience prioritizes content accessibility, introducing a modular reading interface and smart navigation to help millions of users connect deeply with the Holy Quran.

Visit Live Project

Overview

QuranMazid.com is one of the most comprehensive Quran study platforms globally, offering word-for-word analysis, multiple Tafsirs, and audio recitations. However, the legacy interface was text-heavy and difficult to navigate, creating a barrier for users engaging in deep study. The Goal: To redesign the platform from the ground up, transforming it into a modern, distraction-free, and accessible spiritual tool without compromising its vast library of content.

Key Features

  • Immersive Reading Experience A distraction-free interface with high-contrast typography and "Split-View" Tafsir panels, allowing users to study commentaries without losing focus on the holy text.
  • Smart "Jump-to-Ayah" Navigation Replaced complex dropdown menus with a modern, modal-based search system (Command Palette style), reducing the time to find specific verses by 60%.
  • Advanced Collections & Bookmarking A robust personalization system allowing users to organize their study with color-coded folders, pins, and custom categories—a first-of-its-kind feature for this platform.
  • Inclusive Accessibility & Typography A granular "Appearance Panel" giving users total control over Arabic scripts (Indo-Pak/Uthmani), font sizing, and translation visibility to support readers of all ages.

My Role

UI/UX Designer

Tech Stack

Figma

The Problem

Despite having rich data, the old website suffered from high cognitive load:

  1. Cluttered Interface: Users were bombarded with too many options and dense text upon landing.
  2. Rigid Navigation: Jumping to a specific Ayah or changing settings required digging through complex drop-down and refreshing pages.
  3. Lack of Personalization: Bookmarking was basic, making it hard for students of the Quran to organize their research.

The Solution & Design Analysis

Phase 1: The Reading Experience (Core Core)

The primary goal was to honor the holy text. I moved from a "database" look to a "reader-first" aesthetic.

Key Changes:

  1. Typography: Implemented clearer, scalable Arabic scripts (Indo-Pak & Uthmani) with distinct visual hierarchy for translations.
  2. Smart Layout: Moved auxiliary tools (Settings, Tafsir) to collapsible side panels, giving the Quran 80% of the screen real estate.

Phase 2: Enhanced Navigation & Discovery

In the old version, finding a specific Juz or Surah was too long. I designed a dual-navigation system to speed this up.

  1. The Sidebar Navigation: I introduced a clean, tabbed sidebar that allows users to toggle between Surah and Juz instantly without leaving the reading view.
  2. The 'Jump to Ayah' Modal: Instead of standard dropdowns, I designed a focused modal window. This creates a clear "decision moment" for the user, allowing them to select Surah and Ayah quickly.

Phase 3: Advanced Personalization (The Collections Feature)

This is a major UX upgrade. Users don't just "read" the Quran; they study it. The old bookmarking system was too simple. I introduced "Collections."

The 'Add to Collection' Flow: Now, when a user wants to save an Ayah, they can:

  1. Create specific folders (e.g., "Patience," "Daily Duas").
  2. Color Code the folders for visual recognition.
  3. Choose between a simple "Bookmark" or a "Pin."

The Bookmarks Dashboard: I designed a dedicated dashboard where users can manage their folders. The UI mimics modern file-management systems—clean, organized, and easy to edit.

Phase 4: Accessibility & Customization

Recognizing that our user base ranges from children to the elderly, accessibility was non-negotiable.

The Appearance Panel: I designed a slide-out panel that gives users total control. They can adjust Arabic font size, Translation size, and Font face independently. The live preview ensures they see changes instantly.

Impact & Results

Since the launch of the redesign:

  1. User Engagement: Average session duration increased as reading became less straining on the eyes.
  2. Mobile Usability: The responsive design ensured that 60% of users (who browse via mobile) now have a native-app-like experience in the browser.
  3. Community Feedback: Users specifically praised the "Word-by-Word" color coding and the ease of switching between translations.

Conclusion

Redesigning QuranMazid.com was a balance between Reverence and Innovation. The challenge was to organize complex religious data in a way that feels simple and serene. By prioritizing whitespace, typography, and logical user flows, we successfully transformed a complex database into a spiritual sanctuary.