Al Hadith Website

The Old Experience (2019)

1. The Look: The homepage was essentially a directory. It greeted users with a long, intimidating list of links. The header was crowded with generic buttons like "Download Pdf" and "Advanced Search."
2. The Feeling: It felt administrative. There was no visual hierarchy—Sahih Bukhari looked just as important as a random footer link.
3. Navigation: You had to scan text to find what you wanted.

My Design Solution

1. The New Look: I stripped away the noise. The new homepage is centered around a Global Search Bar, acknowledging that most users come with a specific question in mind.
2. Visual Hierarchy: I introduced Card-Based Navigation. The major Hadith books (Bukhari, Muslim, etc.) are now presented as distinct, clickable cards with icons. This breaks the "wall of text" and makes the page inviting.
3. Aesthetics: I chose a soft, mint-green primary color. It’s calming and modern, moving away from the stark "green" of the past.

The Old Experience

1. The Flow: Clicking "Subjectwise Hadith" took you to a plain list of topics. It was functional but dry. It felt like reading a table of contents in a textbook.
2. Usability: The list was dense. On mobile, tapping the right link would have been a challenge.

My Design Solution

1. The Flow: I reimagined the "Subject-wise" section as a Discovery Engine. Instead of a list, I used a grid layout.
2. Usability: Each subject is now a "pill" or button. This makes them easy to scan and perfect for touch screens. I also grouped them logically, so users can explore topics like "Prayer," "Zakat," or "Character" without feeling overwhelmed.

The Old Experience

1. The Tool: The "Go to a Hadith" feature was buried in a sidebar or expandable section. It required multiple clicks to select a book and then type a number. It felt like filling out a form.
2. Friction: It was disconnected from the main navigation, making it easy to miss for a new user.

My Design Solution

1. The Tool: I elevated this to a primary navigation element. The "Jump to" button is now always visible in the top bar.
2. The Experience: Clicking it opens a clean, focused modal (popup). You select the book and type the number in a distraction-free window. It’s fast, intuitive, and feels like a "power user" feature made accessible to everyone.

The Old Experience

1. Typography: The font was small and generic. The Arabic text and Bengali translation were often squashed together.
2. Personalization: There was no bookmarking feature visible on the Hadith cards. If you found a saying you loved, you had to rely on your browser's bookmarks, which meant saving the entire page, not the specific Hadith. It was a "read-only" experience.

My Design Solution

1. Typography: I prioritized Readability. I selected a modern, highly legible Bengali font and increased the font size significantly. I also gave the Arabic text a distinct, elegant typeface.
2. Card Layout: I treated each Hadith as a separate Card. This visual separation allows the reader to focus on one saying at a time.
3. Seamless Bookmarking: I added a dedicated Bookmark Icon to every single Hadith card.
4. The Interaction: When you click it, you get instant feedback a subtle toast notification confirms "Bookmark Added." You don't need to leave the page or refresh.
5. The Collection: All your saved Hadiths are organized in a dedicated "Bookmarks" page in your profile. This turns the site from a temporary reference tool into a personal spiritual journal where you can curate your own collection of wisdom.

The Old Experience

1. The Tool: Search was a small, basic box tucked away in the header.
2. The Result: It was rigid. If you didn't type the exact keyword in the expected language, you often got zero results. It lacked the nuance needed for a bilingual (Bengali/Arabic) platform.

My Design Solution

1. The Tool: I made search the Hero of the homepage. It’s not just a box; it’s the gateway to the entire platform.
2. Multi-Language Support: I engineered the search to be truly bilingual. Users can search in Bengali (e.g., "নামাজ") or Arabic (e.g., "صلاة") and get accurate, relevant results. This respects the scholarly nature of the content, where users might know the Arabic term but want the Bengali explanation.
3. Advanced Filtering: I added a robust filtering system on the results page. Users can now narrow down their search by specific Hadith Books (e.g., only show results from Sahih Bukhari) or chapters. This turns a broad search into a precise research tool.
4. The Experience: The results page highlights the search terms, making it instantly clear why a specific Hadith was returned. It feels instant, intelligent, and empowering.

The Old Experience

The Focus: A prominent "Download Pdf" link suggested that the site's main value was as a file host. It encouraged users to take the content offline.

My Design Solution

The Focus: I removed the emphasis on bulk downloads. Why? Because the goal is to keep users engaged online. By building a superior reading interface with search, bookmarks, and customization, I made the online experience better than any PDF. The site is no longer just a warehouse; it's a living library.

Redesigning iHadis.com wasn't just a visual update; it was a complete overhaul of the user experience. I moved the platform from a "Digital Library" model to a "Modern App" model.

By focusing on clarity, typography, and personal features like Bookmarking, Quick Jump, Search Functionality, I’ve created a platform that honors the weight of its content while embracing the expectations of modern users. The result is a website that doesn't just store information it invites you to learn.