The Beginning

How it begin
I was looking for daily du’a and azkar app in the Google Play Store, specifically the Hisnul Muslim app. But, all the apps that I could find didn’t meet my requirement. Firstly, the apps don’t include all the Du’a and Azkar from Hisnul Muslim book. Secondly, the apps display the Arabic text of the Du’a and their translation in separate view. Some of them only have the Arabic texts or translations. I want an app which has both the Arabic text and the translation, and they must be displayed together in the same view. Arabic text is important for correct pronunciation and the translation is for the me (or user) to understand their meaning. Finally, some of the apps don’t have the features of bookmark and share to Google+, Facebook, Twitter and etc which I think really useful.

App’s design
I decided I want to develop my own Hisnul Muslim app. The app must have the following:

  • includes all Du’a and Azkar from the Hisnul Muslim book
  • display Du’a in Arabic with its translation and references in the same view
  • bookmark Du’a and Zikr
  • share Du’a and Zikr

Initial sketch of the layout is given. List of Du’a and Azkar is displayed when the app is open. The search bar and the bookmark button are placed at the top.

ui_design

Initial UI Design

The Du’a and Azkar layout (picture on the right) contains the Arabic text followed by its translation and references. At the top left corner of the display, there is a home button that will bring the user back to the layout of Du’a and Azkar list.