Get in touch
Back to work

Case study - Mobile app

TheNoor, a Muslim lifestyle app built around daily habits.

An all-in-one Islamic lifestyle app bundling prayer times and Qiblah direction, Qur'an reading, an AI-assisted memorization checker, and mood-based wellness, with a membership tier that layers in auto-donation, Takaful insurance, and marketplace perks.

Role
UI/UX Designer
Timeline
Oct 2022 - Jan 2025
Platform
iOS, Android
Client
Noor Luminous Sdn Bhd

The context

One app, five very different jobs to do.

Most Muslim lifestyle apps pick a lane: a prayer utility, or a Qur'an reader, or a donation platform. TheNoor tried to be a daily home screen habit instead, prayer tracking, Qur'an practice, emotional wellbeing, and a paid membership tier all living in one product, without any single feature getting lost among the others.

TheNoor home dashboard with a prayer countdown, live radio, and daily prayer tracker

What I designed

Six areas, one shared design language.

From the home dashboard through to the paid membership tier, every feature reuses the same cards, colour system, and pink-accented dark mode, so a user moving between prayer tools and the Qur'an reader never feels like they've left the app.

01 - Home dashboard

A dashboard that earns daily opens.

The home screen leads with a live countdown to the next prayer, then layers in a 24/7 live radio player, a daily prayer tracker, a sadaqah donation card, and a rotating hadith card, so there's always a reason to open the app beyond checking the time.

TheNoor home dashboard with next-prayer countdown and profile membership status
TheNoor home dashboard prompting the user to upgrade to Pro

02 - Prayer & Qiblah

A full month of prayer times, and a compass that finds Mecca.

Beyond the day's five prayers, a dedicated timetable scrolls through the full month at a glance. A separate Qiblah compass gives an exact bearing to Mecca along with nearby mosques, for the moments a countdown alone isn't enough.

TheNoor monthly prayer timetable next to a Qiblah direction compass showing 292.5 degrees

03 - Qur'an reader

Reading, translation, and tajweed in one view.

Every ayah pairs the Arabic text with an English translation and a reciter's audio track. A tajweed mode color-codes each articulation rule directly over the script, turning a feature usually buried in settings into something visible on the very first read.

TheNoor Qur'an reader with word-by-word tajweed colour coding and an audio reciter player

04 - Hifz SmartChecker

An AI listener for memorization practice.

Hifz SmartChecker listens to a live recitation, detects which surah and ayah is being read, and scores accuracy and completeness against the source text, flagging missed, extra, or incorrect words. Every attempt is saved to a history log, so improvement is something a user can actually see over time, not just feel.

TheNoor Hifz SmartChecker screen showing live recitation accuracy scoring
TheNoor Hifz SmartChecker history log of past recitation attempts

05 - Mood & wellbeing

A mood check-in, not another to-do list.

A simple daily prompt, how are you feeling, happy, anxious, stressed, lonely, angry, or sad, surfaces a matched verse for comfort rather than a generic affirmation. Verses can be saved to a personal favorites list, filterable by the mood that led there.

TheNoor mood check-in screen asking how are you today with six mood options
TheNoor favorite verses list filterable by mood

06 - NoorPro membership

A membership that bundles more than app features.

NoorPro isn't just an unlock switch for premium screens. Monthly or annual plans fold in add-ons most apps would treat as separate products entirely: auto-donation, Takaful insurance coverage, and merchant perks across the NoorCommerce marketplace, all priced and itemized before checkout so the final total is never a surprise.

TheNoor Pro membership plan screen with monthly and annual pricing and included perks
TheNoor membership summary screen itemizing subscription, donation, and Takaful coverage

Outcome

A lifestyle app measured by daily return visits, not downloads.

TheNoor's hardest design problem was never any single screen, it was making prayer tools, Qur'an practice, mental wellbeing, and a paid membership feel like one coherent habit instead of five bolted-together features. Keeping every area on the same visual language, and giving each one its own clear reason to open the app that day, was what held it together.

Next case study
RiverLens →
Get in touch