Pillars and Prayers
This proposed mobile application was made in attempt for Muslim individuals to access information to help track their prayers and fasting as well as enhance their daily Islamic practices.
The main flow focus of this project was allowing users to be able to see the daily prayers’ timings with hopes to track their progress along with provide features within the app to strengthen their practice overtime.
*This project was done as a personal project and has not been shipped
Duration: January 2023-Feburary 2023
Project background
Business Research
Getting to know the Business
With Ramadan 2023 quickly approaching, I thought this would be the perfect time to design an app that allows Muslims to track their daily prayers with hopes of staying consistent throughout the entire month.
As a Muslim who looks forward to Ramadan, I was excited to start designing this app. However there were various steps needed to be taken in order to help me better understand the business, competitors, and most importantly the users before I could dive into its design aspect.
As a practicing Muslim, I decided to design this app because I often find myself looking for ways to help me keep track of my daily prayers along with resources to provide me with accurate times for each prayer. In addition, I’m always on the lookout for Islamic apps that can help me track my fasts and personal goals for Ramadan. Hence feeling confident that I could create an app to provide such purpose for fellow Muslims.
However, just because I had personal opinions on what should be within the app - such as adding a daily prayer tracker - that didn’t mean I knew exactly what other Islamic apps were providing…At the end of the day, everyone has different goals when it comes to practicing their faith.
When it comes to finding the right Islamic app, one can spend endless time scrolling through the App Store to match with the one that best suits their lifestyle. While one may offer the option to track your prayers another might provide duas to recite for every occasion, while a third one will give the option to use it to perform dhikr. With each app providing different aspects of Islamic practices many users expressed how exhausting it is to go back and forth between apps to complete a simple task.
Keeping that in mind, the goal of this app would allow Muslims to not only be able to track their daily prayers but also enhance their practice and expand their knowledge about Islamic matters.
For the purpose of this project, you may assume that features to track daily prayers, duas and surahs are fully functional.
Competitive audit
Before starting the design process, I had conducted a competitive audit to better understand similar apps currently on the market and companies behind them. Each of the products that competitors offered was evaluated on their visual design, prayer tracking feature, additional practicing features, and it’s user flow. A few key competitors identified were:
1. Muslim Pro App - a US-based mobile app identified as a direct competitor. Marking itself as the most accurate prayer time and athan app for prayer, Muslim Pro also offers a full site of features to help Muslims practice their religion more purposefully. It takes advantage of including the Quran fully translated along with providing a streaming service where users can stream Muslim-focused films and TV series.
2. Everyday Muslim - a US-based mobile app identified as a direct competitor. Everyday Muslim presents itself to be an all in one Islamic app offers daily prayer times, a Qibla locator, and daily Duas/Dhikr. The app’s main goal is to help users stay on track and perform their daily prayers on time through it’s tracking features.
3. Pillars: Prayer Times and Qibla - a US-based mobile app identified as an indirect competitor. Pillars markets itself to be an ad-free app to help users track their daily prayers and locate the Qibla for easy praying. Due to it being a newly built app, the features included are very limited in comparison to the other apps when it comes it expanding beyond just being an app to track prayers.
The overall takeaways from the competitive audit for each mobile app are as follows:
Mobile App Strengths Weaknesses
Muslim Pro App +Provides main features on home screen - Will tap out abruptly while using one of the features
+Easy to find key info - Have to buy subscription in order to access the app ad free
Everyday Muslim +Strong brand identity, including colors, font, style, motion, & imagery - Prayer times and locations are not as accurate and/or inaccurate
+Home screen is well balanced with information provided - Only language available is English
Pillars: Prayer Times & Qibla +Takes users directly to desired screens - Only feature provided is to track prayers
+Mensuration (pause) button for women to ensure proper tracking - Doesn't offer much within app other than prayer times
Namaz App: Learn Salah Prayer +Key info is present for target audience - Too many details and information provided hard to focus on tasks
+Provides breakdown of prayers in roman Arabic followed by English translation - Doesn't provide options to track prayers or timings
USER RESEARCH
Prior to getting into the design aspect of this project, it was important for me to be able to know what exactly the target users would want from such an app. Thus I had gone around asking Muslims, of all practicing levels, about their current experience with similar apps they were using, including any issues or improvements they had towards the apps.
After gathering information, it was clear the following issues were common amongst all users:
Too many ads within the app
Switching between apps to access and/or track certain practices of Islam (i.e praying, fasting, reading Quran etc.)
No sense of flow within the apps
After analyzing such issues, I was certain for what the users were looking for providing me with a better understanding of what to include within the design aspect of my app.
While most people interviewed, found they would be thrilled of an all in one Islamic mobile app, some are deterred from it as they are afraid that it might be overwhelming and complex, making it difficult to access the resource and information provided. Having to struggle between apps to access Islamic resources and/or wait for ads to play through to complete one task, users worry this app will be like the rest, where they’ll download it with high hopes only to be disappointed. Nonetheless, upon interviewing and discussing the concerns, I was able to divide the selected participants into two primary groups.
GROUP #1: People wanting to track their daily prayers
These individuals experience difficulties in knowing when it’s time to pray the daily 5 prayers. This group is made up of established Muslim adults (18+) living a hectic schedule balancing work, life and ongoing personal events. They would like to be able to be notified of each prayer time with the intention to schedule their daily tasks and events around the prayers ensuring to not miss or delay any of them.
PERSONAS
Upon conducting and grouping the interviews, I created personas to better represent the two identified groups above. Though these are only two examples, there are many more that could have also been created to address the issues faced when using such apps.
PERSONA #1: AYESHA SHAFI
Ayesha is a practicing Muslim who works as a Business Analyst for Microsoft. Living a busy life balancing work and planning for her wedding, Ayesha finds lately she hasn’t been as consistent with her daily prayers as she once was. She either caught up in meetings or will sometimes not realize it’s time to pray. This causes her to miss 1-2 of her daily 5 prayers or not pray them on time due to not knowing when they occur.
PERSONA #2: OMAR DIAZ
Omar is a recent revert who will be partaking in his first Ramadan this year. As a newly practicing Muslim, Omar is having a hard time finding resources to ensure he can track his daily prayers and know when it’s time for suhoor and iftar. With a busy work life as a Project Manager for a new startup, Omar fears he will miss out on the true experience of Ramadan and won’t be able to know when it’s time to eat or pray.
GROUP #2: People wanting to expand their Islamic knowledge and practice
These individuals experience difficulties in searching for substantive information and resources to enhance their Islamic practice. This group varies in age and backgrounds, generally being newly reverted Muslims. They would like to see an application which can be used as source for all things Muslim, including access to daily duas, prayer times, and a way to track their fasts during Ramadan.
“I wish I could plan my days around the daily 5 prayers”
“I hope I’m able to break my fast properly”
LOW-FIDELITY DESIGN
For the initial design, I wanted to provide a simple sequence of events best suited for users. Upon opening the app, naturally users will land on the home screen where they are presented with various daily Islamic practices and resources. In addition, users will also be able to see the current prayer and their daily prayer tracker, along with a new Deed of the Day and Quranic verse each day they open the app.
With the main focus of this app being able to access prayer times and Islamic practices, I knew I wanted the flow of this prototype to include tracking daily prayers and a feature users to access during Ramadan to follow their monthly progress.
Other features within the app include, daily duas, Qibla locator, Dhikr, the Hijra calendar, and excerpts from the Quran. All of which can be accessed directly from the home screen once the app is open.
TRACKING DAILY PRAYERS
Once users select “Prayers” from the home screen, they are directed towards a new screen which provides access to a check list the user’s prayers for the current day as well as a monthly calendar.
Each time a user checks off a prayer it indicates they have prayed that certain prayer for the day. Once all 5 daily prayers are completed the calendar will update the status of that day to green confirming user has completed all their prayers. For those who don’t complete all or only some of the prayers, the calendar will update the status of day to red. Allowing users to track their monthly progress with their prayers as they check off the ones they completed each day.
There is also an option for users fasting (outside of Ramadan) to track their fasts throughout the month, should they want to.
RAMADAN FEATURE
During the month of Ramadan, users can track their progress within the app. Once they select “Ramadan” from the homepage, they will directed to a screen where they are able to track their fasts similar to tracking daily prayers. In addition, users are also able to track their daily Quran reading and tahjud prayer.
The feature also includes the timings for both Suhoor and Iftar along with the duas to recite for both in Arabic and Roman English, making it easier for users such as newly reverted Muslims to properly practice throughout the month.
The feature also allows for users to track the number of days fasted, missed, and left throughout the month for easy following.
UX research study
With the prototype finished, I was ready to put this product to the test with real potential users and receive their feedback. Ensuring to gather feedback from every stage of the process, I was specifically wanted to measure the user error rate and conversation rates for my KPIs. It was important for me to confirm that users were able to seamlessly access the prayer tracking screen along with one other added feature within the app. In addition, if users got stuck at any point in the process, I wanted to be able to identify the issue and clear it up for them.
USABILITY TEST
The usability test was unmoderated and consisted of five participants ages 18-42 who either grew up as practicing Muslims or are recent reverts. Each session lasted around 15 minutes and consisted the following prompts and follow-ups:
Prompt: Locate to the home screen.
Follow-up: How easy was this task to complete?Prompt: Select the Tracker feature.
Follow-up: How easy was this task to complete?Prompt: Return back to the home screen and select the Duas feature.
Follow-up: How easy was this task to complete?Prompt: Select the Dua for when leaving home then go back to the home screen
Follow-up: Is there anything you would change about this process?Prompt: Do you see any possible uses for this application?
Follow-up: Would you personally use this application?Prompt: How did you feel about this application overall?
Follow-up: Can you tell me what you like and dislike about this application?
During the usability test, I took notes down regarding the participants’ observations including the difficulty levels they had with each task.
RESULTS
While using the application, most participants spoke in a positive tone indicating either confidence or curiosity throughout the process. In addition, they found the app to be useful as most mentioned they would consider it as a good resource for tracking prayers along with completing other practices within the religion.
Majority of the feedback was received in regards to the overall navigation within the app. As participants completed each task, several expressed the confusion when selecting the Dua for “when leaving house.” While some had thought all the Duas listed were accessible, others weren’t too sure what the “when leaving house” meant when landing on the Dua page.
The overall navigation within the app was well-received, participants as a whole expressed feeling comfortable when navigating within the app including the home screen and Prayer Tracker feature. Contrary to that, some participants didn’t like how they had to go back to the home screen each time they want to access different features within the app.
Upon gather information and taking notes, I was able to create an affinity diagram placing all the feedback into perspective, creating the following takeaways from the usability test:
The home navigation was a correct choice for this app
The Dua screen needs a slight re-design with an option to provide English translation of each dua selected
There should be an option for users be able to pause their prayer tracking as needed
high-fidelity design
Given the feedback from the usability test, I was ready to start the high-fidelity design, implementing changes to the main structure by keeping in mind key takeaways from the usability test. I found it important to focus primarily on the typography within the app. With of course other aspects as well such as images, proportion and color.
BEFORE USABILITY TEST
AFTER USABILITY TEST
PAUSE BUTTON
The first change was adding a pause button to the prayer tracker screen. Prior, users did not have the option to pause tracking their prayers. During the usability study, many participants questioned if it was possible to pause tracking on days of one’s menstrual cycle or days when someone is feeling sick. This prompted me to add the pause button on the prayer tracker screen to allow users to pause their progress at any given time for any given reason.
BEFORE USABILITY TEST
ENGLISH TRANSLATION
Another change was adding an English translations of Duas and Surahs throughout the app. Prior to this add-on, users were only able to read each dua and surah in either Arabic and/or Roman Arabic but didn’t have access to knowing what they were reciting. Promoting me to add the English translation in order for users to understand what they are reading, with the intention of keeping reverts in mind.
ADDITIONAL SCREENS
AFTER USABILITY TEST
BEFORE USABILITY TEST
AFTER USABILITY TEST
[Theoretical] Next Steps
Considering this is a personal project are no real next steps to be taken. However, if that was not the case, the next step would be to hand this part of the design off to the development team, where they would work on the screens including the logistics within the screens such as marking each completed prayer.
Along with that, secondary action would be taken for the UX design, in which other features within the app such as Dhikr, Hijra Calendar, Quran, location setting, and notifications would need to be designed and tested to ensure for a smooth user experience throughout the app.
My Takeaways
Throughout the design process for this mobile app, I learned that the initial ideas are always the start of creating it. As I continue with usability studies and peer feedback influencing each iteration of the app’s design I can only improve the user experience with each update and add-on features.
By diligently going through each step of the design process and aligning with specific user needs, I was able to create additional Islamic resources/practices within the app for users that were both useful and easy to comprehend for Muslims of all practicing levels.