Hidayah
Project Overview
Hidayah is an all-in-one Islamic companion app designed to help Muslims read, learn, worship, and develop stronger daily spiritual habits.
The app combines the Holy Qur’an, prayer times, Qibla direction, Qaida learning, daily Duas, digital Tasbeeh, and step-by-step Islamic guides within one simple and accessible experience.
The goal was to create a peaceful, modern, and easy-to-use platform for users of different ages and levels of Islamic knowledge.
The Challenge
Many Islamic tools are spread across multiple apps or presented through crowded and complicated interfaces. Hidayah needed to bring worship, Qur’an reading, and Islamic learning together without overwhelming users.
Another important challenge was supporting English, Arabic, and Urdu content while maintaining readability, respect, and visual consistency.
Our Approach
We designed Hidayah around three core principles:
- Simple: Essential features should be easy to find and use.
- Peaceful: The interface should create a calm and focused spiritual experience.
- Accessible: Content should support different ages, languages, and learning levels.
A clear navigation system, consistent card-based layout, and focused feature screens make the app’s extensive functionality easy to understand and use.
Home Experience
The home screen provides a personalised overview of the user’s day, including the Islamic date, location, upcoming prayer, remaining time, and complete prayer schedule.
Quick-access cards connect users with:
- The Holy Qur’an
- Prayer Times
- Qaida
- Daily Duas
- Qibla Finder
- Digital Tasbeeh
- Namaz Guide
- Wudu Guide
- Hajj Guide
- Umrah Guide
The Holy Qur’an
The Qur’an experience was designed for comfortable reading and listening. Users can browse by Surah or Juz, search for a Surah, save bookmarks, and continue from their previous reading position.
Each Ayah includes:
- Arabic Qur’anic text
- Urdu translation
- Audio recitation controls
- Bookmarking and sharing
- Reading and audio preferences
Clear typography and generous spacing help users focus on the Qur’anic content without unnecessary distractions.
Qaida Learning
The Qaida section helps beginners recognise and pronounce Arabic letters. Interactive alphabet cards and audio playback provide clear visual and spoken guidance, making the experience suitable for both children and adults.
Prayer Times
Location-based prayer times provide a complete daily schedule for Fajr, Sunrise, Dhuhr, Asr, Maghrib, and Isha.
The app highlights the next prayer, its starting time, and the remaining time. Users can also manage prayer settings and notifications.
Daily Duas
Daily Duas are organised into practical categories:
- Morning
- Evening
- Sleep
- Prayer
- Protection
- Everyday remembrance
Each Dua can include Arabic text, transliteration, Urdu translation, and audio playback to support understanding, pronunciation, and memorisation.
Digital Tasbeeh
The digital Tasbeeh offers a focused way to complete daily Dhikr. Users can select a remembrance, set a target, track their count and completed rounds, and reset their progress.
A circular progress indicator provides clear visual feedback while keeping attention on the act of remembrance.
Qibla Finder
The Qibla Finder uses the user’s location and device compass to guide them towards the Kaaba.
It displays the current heading, required Qibla angle, distance from the Kaaba, and simple rotation instructions for an easy direction-finding experience.
Spiritual Guides
Hidayah provides structured, step-by-step guidance for essential Islamic practices:
- Namaz Guide
- Wudu Guide
- Qaida Learning
- Hajj Guide
- Umrah Guide
These guides support beginners, younger users, and anyone who wants to refresh their understanding of Islamic practices.
Information Architecture
The main navigation is divided into five focused areas:
- Today: Prayer information and essential daily tools.
- Learn: Qaida and Islamic learning guides.
- Qur’an: Reading, listening, search, and bookmarks.
- Coach: Guided learning and spiritual assistance.
- Settings: Language, audio, notifications, and personalisation.
Visual Design
Soft mint backgrounds, rich teal gradients, white surfaces, and subtle shadows create a calm and welcoming atmosphere.
Rounded cards and generous spacing make the interface feel approachable. Dark navy typography ensures readability, while teal highlights guide users towards important actions.
Islamic-inspired 3D icons add warmth and make individual features easier to recognise.
Design System
A scalable design system was developed to maintain consistency across the app. It includes:
- Colour and typography styles
- Arabic, Urdu, and English text hierarchy
- Cards and content containers
- Buttons and interactive controls
- Navigation components
- Audio playback controls
- Progress indicators
- Selection states
- Islamic feature iconography
Accessibility
Large touch targets, clear labels, readable cards, strong text contrast, and familiar interaction patterns make the app easier to use.
Special attention was given to Arabic and Urdu typography to ensure religious content remains respectful, legible, and visually balanced.
The Outcome
Hidayah brings a wide range of Islamic tools into one cohesive and peaceful mobile experience.
Users can read and listen to the Holy Qur’an, follow prayer times, learn Qaida, recite Duas, count Dhikr, find the Qibla, and understand essential Islamic practices—all within one app.
Its scalable design system provides a strong foundation for future learning tools, personalisation options, and spiritual features.