Risala Haramain Screens

Risalat Al-Haramain is a touch-screen kiosk application deployed on large displays in the Two Holy Mosques in Saudi Arabia. Visitors from around the world pick their language and browse Islamic books, videos and audio. They can read or play the content on the screen, or scan a QR code to take a free digital copy with them. The app supports 40+ languages, works offline from a local SQLite database, and is built with Flutter for desktop.

My role

I owned the redesign of the kiosk's user interface and worked with the team on its scheduled banner system.

- New UI: I rebuilt the three core screens (the language-selection home screen, the content listing screen and the content viewer) from a new Figma design. This included a rotating hero message panel, a redesigned language grid, a direction-aware header and branded QR components.

- RTL and LTR layouts: Every layout mirrors correctly for right-to-left languages such as Arabic, Urdu and Persian as well as left-to-right ones, and is sized for large kiosk displays.

- Centralised theme: I moved the colours into shared tokens so the look stays consistent and is easy to adjust.

- Scheduled banners (team effort): When the kiosk is idle it shows announcements and screensavers driven by scheduling rules: Gregorian or Hijri date ranges, days of the week, fixed time windows, and offsets relative to the five daily prayers for the kiosk's city. I integrated the banner tables and their sync into the local database and built the idle screensaver experience. That includes separate banner sets for the Makkah and Madinah deployments.

- Scheduler reliability: I fixed edge cases in the scheduler, including banners whose time window crosses midnight, zero-duration banners and a timer leak.