Designing and Building Widgets for Ikhlas.com

I recently worked on a series of widgets for Ikhlas.com, an Islamic lifestyle platform. These widgets are designed to provide users with quick access to essential features like prayer times, recently read surahs, Qada' reminders, and Ibadah motivation — all right from their home screen or dashboard.

🎯 Project Goals

The goal was simple yet impactful:

Present Islamic information in a concise and visually appealing manner.
Design modular widgets that can be reused in both light and dark mode.
Ensure accessibility and quick comprehension of information.
Maintain harmony with the existing Ikhlas design language.

📦 Widget Modules

Here’s a breakdown of the key widgets we designed and built:

1. Prayer Time Widget

Shows the current prayer time, date, and location in a minimal card format.

💡 Challenge: Balancing between compactness and clarity for all five daily prayers.

✅ Solution: Use of clean icons and a focused highlight on the current prayer time.

2. Waktu Solat Widget

Provides an overview of all prayer times for the day including Syuruk.

🎯 Purpose: Ideal for users who want a full schedule at a glance.

👁️ Design Note: Time labels are subtly color-coded and grouped logically.

3. Recently Read Widget

Keeps track of the last few surahs the user read.

📘 Why it matters: Promotes consistency in Quran reading.

🎨 Design Highlight: Each surah tile includes the surah number badge and a clean layout that adapts to space.

4. Qada’ Reminder Widget

Helps users remember missed prayers that need to be made up.

📅 Dynamic: Users can tick off completed Qada’ prayers for the day.

🌒 Dark Mode Ready: All widgets were designed to look seamless in both light and dark themes.

5. Ibadah Motivation Widget

Displays rotating motivational hadith or quotes to encourage extra ibadah like Tahajjud.

🌟 Micro-inspiration: Designed to uplift without overwhelming.

🛠️ Design System Considerations

Spacing & Alignment: We used a 16px internal card spacing and 40px gaps between sections.
Scalability: Cards are designed to be reorderable and stackable based on user preferences.
Visual Hierarchy: Typography weights and icon sizes help guide the user's attention.

🌓 Light & Dark Modes

We designed every widget to be theme-responsive, ensuring that information remains clear and beautiful regardless of the user’s preference.

🤲 Final Thoughts

Designing these widgets was more than just a UI challenge — it was about enhancing spiritual experiences through thoughtful design. By surfacing the right information at the right time, we’re making it easier for users to stay connected to their ibadah throughout the day.

"Good design serves both purpose and peace." – Shahrul