The Project and the Problem

How can you shorten the distance between God, the mosque, and yourself? Build an app! At least, that is the goal of the prayer time and mosque-locator app MasjidTime*.

MasjidTime approached me in 2012 to create concept art that would eventually lead to the creation of their website and current mobile app, available in the Play Store. However in 2017, their app looks dated, and it needed to be redesigned to meet the needs of the avid user.

*Masjid = Mosque, a muslim place of worship.

My Role

From March 2017 to June 2017, I conceptualized how MasjidTime would be experienced if it was built today. As the UX Designer, my tasks included research, experience mapping, interaction design, and visual design.

The Challenge

There exists a huge gap between how mosques and their members communicate with each other. Currently, only website exists. My goal was to find out what mosque-goers actually want to find out about their favorite mosque without actually having to step in the door.

Quest for a Solution

I started my journey by understanding what the community needs are by asking my friends and family what they expect to know about a mosque before they get to the weekly prayer service. Surprisingly, I heard more suggestions about prayer-life balance, about how difficult it is to manage 5 daily prayers, and strong feelings of detachment from the community.

The Answer

Developing a Platform

My vision for the MasjidTime app is to create a stronger spiritual and communal bond between the mosque and the user. By truly attempting to develop spirituality and social skills in the user, the app can make a stronger positive impact on the user’s life by:

  • Answering the call to prayer – notification reminders when it is time to pray, and allow the user to opt-in to daily prayer times at the mosque.
  • Incorporating local events – add an event aggregator that gathered mosque event information to the user’s fingertips.
  • Giving users power to review – develop Yelp-like feedback for the user to find other mosques around them.
  • Creating a social atmosphere – add user profiles to create a sense of community and social interaction within the app
  • Helping find direction – GPS-based compass pointing to the direction of prayer relative to the user
Finding an Identity

After sharing my thoughts with the stakeholders, I realized that including all of these ideas, especially social media, would be beyond the scope of the project. I chose to focus on two key elements: prayer times and events.

Planning First

Wireframe that had too many pages and menus. I opted to go for a flat structure to make pages easier to find by consolidating some of the features onto single pages.

I began to develop user flowcharts to visualize in what order to communicate the new ideas. By using cards, I was able to quickly place and re-order different tasks. Although this process was fairly simple, there needed to be multiple access points for key features, such as mosque donations, a key community feature. Different features would be more utilized by different people, so the model needed to be flat instead of deep.

Early sketches included more features, including blogs and rectangular elements.
After more interviews with the stakeholders, a more final “map” of the app began to take shape in this low-fidelity wireframe.
High-fidelity wireframe using multi-tone gray boxes to identify hierarchy of content. Initially featured “square” design, but moved to “rectangle” design to focus on usability.

To organize the information and to arrange the new features on a brand-new interface, I sketched out low-fidelity wireframes. After developing wireframes that were easy to navigate, I finalized the designs in a high-fidelity wireframe. The high-fidelity wireframe allowed me to put in details that were not apparent before, and gave a much better sense of design and interaction within the app. It was also more practical to make changes in structure using this method vs. using a full-blown prototype or mockup.

prototype testing and user testing

I created prototypes with feedback from the stakeholders, progressively iterating the design to make sure it was clear and understandable. After completing the animation and finalizing designs, I conducted surveys of the prototype with 6 potential users. All agreed that the app was easy to use, smooth, and familiar, but some recommendations led to a couple major changes within the app:

  • Removal of reviews system and introduction of “likes” – some users pointed out that they felt uncomfortable giving star ratings to a mosque.
  • User photos – currently there were not many photos available for some mosques, so we decided to let users add their own!
  • Current prayer – lets the user visually know which prayer to perform, right when the app opens

Introducing MasjidTime

MasjidTime is a ubiquitous mobile tool that allows users to strengthen their spirituality and connection to the mosque.

Home Page Interactions
A high-level view of “My Masjid”, prayer times, and local time is available at a glance on the home screen.

We understand that the user wants to easily find out information about their mosque right away. When the app opens, an introduction to their favorite mosque/nearest mosque is provided. With one tap, a user can easily access newsfeeds and find out the mosque’s community events.

For the user’s convenience, the prayer time can be added to the smartphone calendar.
The calendar provides an overview of busy days, with the option of syncing local events to the app calendar. An aggregated view of local events is found below to encourage easy community engagement.

Users have busy lives, so the new MasjidTime gives the users opportunity to improve their punctuality by coordinating with their calendar. Prayer times can easily be added to a personal calendar for daily reminders to help ease the burden of remembering what time it is. The user can also opt to get notifications for difficult-to-remember prayers.

Mosque interactions

We know that users want to get more involved in the community for family events and services; the new “Calendar” section showcases favorite upcoming mosque events, and local events occurring in the future. The new “like” feature shows how popular a mosque is, and develops social interaction within the app.

Search improvements
The search is now more selective, and shows reviews as well as distance.

To make finding the perfect mosque a breeze, a contextual filter was added based on time, as well as location and prayer type. Some mosques can be open 24 hours a day, whereas others are only open for a specific amount of time; an “open now” toggle can now easily filter out unnecessary listings.

Looking Towards the Future

After the app prototype was completed with the necessary features, user surveys concluded that there are still more ways the app can help ease the burden of the average mosque attendee. Although these are great suggestions, it is outside the current goals of the app and are being considered for future versions:

  • A couple users suggested adding more tools, such as a compass or monthly time tables, turning the app into more of a “swiss knife”. These are great ideas, and will most likely be introduced in future versions.
  • Some people did not like the idea of a mosque newsfeed, and wanted a general feed for their locality. This can be done by pulling information from Facebook or Twitter, and can be included in the bottom of the homepage so users can find out what’s going on around them right away.
  • Based on user feedback, search can be improved by showing what kind of mosque there is based on sect, direction of preferred prayer, if there is a woman’s section and how large, and even food selection!

Lessons Learned

This project was a great experience in mobile development, but there are a few different things I would do next time around to improve my workflow:

  • Relying on user journeys from interviews instead of cut-and-dry wireframes to understand the mental mapping that goes inside a user’s head.
  • Implementing paper prototypes would have made the user interaction design a lot clearer from the beginning.
  • Use animation-heavy programs or CSS to create better microanimations. I was limited to the features in Adobe XD. Better animations would increase the user’s understand of what is happening inside the app using visual cues.