Work / Islamic App
Islamic App
A mobile app that brings prayer times, Qibla direction, and Quran reading into one calm daily companion.
In short
- Many apps for daily prayer feel crowded: too many features on one screen, and no clear way between them.
- I designed one calm app around three daily actions: check the prayer time, find the Qibla, continue reading.
- Light and dark modes are both fully designed, and how loud a notification is stays the user's choice.
3core daily features
90%usability task success rate
15saverage time to find the Qibla
2months of design work
Overview
Three daily tools in one calm app.
A complete product design for a mobile Islamic app. It combines accurate prayer times with customizable Adhan notifications, a precise Qibla finder, and a Quran reading experience with progress tracking.
Beyond function, the app had to feel calm and respectful, in keeping with the place it has in someone's day.
The problem
Useful features, crowded together.
Many tools, one app
Prayer times, Qibla direction, Quran reading, and notification settings had to fit without overwhelming. Many similar apps feel crowded or visually inconsistent.
Modern and respectful
The interface needed to feel modern, calm, and trustworthy without becoming decorative or distracting.
Two scripts on one screen
In the Quran module, Arabic text and translations need a clear hierarchy and strong readability.
Precision
Prayer times and Qibla direction depend on precision, so the interface has to communicate confidence.
Dark mode also had to be comfortable for night reading without losing legibility.
Research
What people told us.
Before designing, we interviewed people about the apps they already used. Two complaints came up again and again: intrusive ads that interrupted access to the very features people opened the app for, like prayer times and the Qibla finder, and a visual design that felt cluttered and busy.
That set the goal: a minimal, user-friendly app with a seamless experience, and features that align with Islamic principles and values.
Ads in the way
Interruptions at the moment someone needs a prayer time or the Qibla direction.
Cluttered screens
Busy layouts that make simple daily tasks feel heavy.
Accessible to everyone
The app had to work for a wide range of users, including people with disabilities, with support for screen readers and high-contrast modes.
Process
Start from three journeys.
Map the journeys
User flows and journey maps from onboarding to daily use, with the touchpoints and emotions along the way.
Wireframe
Low-fidelity wireframes for layout and structure, then high-fidelity wireframes for the visual design and functionality.
Set the guidelines
Visual design guidelines for colour, typography, and iconography, and UI elements such as buttons and icons that keep the style consistent.
Prototype and simplify
Interactive prototypes to test the key features, and a navigation that puts the essential features first.
Structure
Four tabs, and every tool one tap away.
The bottom navigation holds the whole app: prayers, Qibla, Quran, and settings. Each tab opens on the thing people come for, and anything deeper is one step in.
App architecture
Islam.App
- Intro
- Select location
- Accessibility
- Home
- Prayer times
- Additional information
- Quran
- Search
- Select surah
- Continue reading
- Qibla Finder
- Select location
- Move phone
- Facing Makkah
- Settings
- Each prayer time
- Notification type
- Play voice
- Language
User flows
Home
- Prayer times
- See the next prayer
- Open a prayer
- Choose the notification
- Quran
- Search
- Select a surah
- Read
- Qibla Finder
- Select location
- Move phone
- Facing Makkah
- Settings
- Configurations
- Notification type
- Play voice
- Language
Design system
One blue, soft surfaces, and type for two scripts.
A single blue marks the current prayer, the active tab, and every primary action. Cards are white on a soft grey in light mode and near-black in dark mode. Arabic text is set larger than its translation, so the eye lands on it first.
Core palette
- Primary#1460FC
- Primary light#4C88FC
- Canvas#ECECF0
- Surface#FFFFFF
- Night#1C1C1C
Typography
UrbanistOne typeface for the interface, next to the Arabic script
- Regular
- Medium
- Bold
Fajr · Dhuhr · Asr · Maghrib · Isha
Next prayer in 1 hour 24 minutes
A soft geometric sans with open forms, calm next to Arabic text and clear at small sizes.
Interface
Prayer times, and how loudly to hear them
The home screen draws the day's prayers on an arc, with the next one highlighted and the time remaining. Every prayer has its own notification setting.
Key features
- Disabled, silent, Adhan, or full Adhan
- A countdown to the next prayer
- The Hijri date with a calendar shortcut
A compass that says it plainly
The Qibla finder is a clean compass with one sentence under it: you are facing Makkah, and how far away it is. An AR view is one tab away.
Key features
- Compass and AR modes
- The distance to Makkah
- The current location under the result
Pick up where you stopped
The Quran tab opens with continue reading and a progress bar, above the list of surahs. In the reader, Arabic and translation alternate in cards, and a Last Read button returns to the saved place.
Key features
- Continue reading with progress
- The surah list with search
- A Last Read shortcut in the reader
Light and dark
Comfortable at night, legible at noon.
Dark mode is a full second design. Cards turn near-black, the blue stays the only accent, and contrast is tuned for reading late in the evening.
Outcome
A daily companion that stays out of the way.
The final design delivers its essential tools in a structured, accessible format with a calm visual identity.
The design system can support later additions such as community functions, educational content, or deeper personalization.
What I delivered
- User research
- User flows and journey maps
- App architecture
- Low- and high-fidelity wireframes
- Interactive prototypes
- Interface design in light and dark
Screens
- Prayer times
- Adhan notifications
- Qibla finder
- Quran and reader
- Appearance