Muslim Prayer Times and Qibla Finder Widget

Platform

iOS & Android

Timeline

1 Month

Role

UX, UI, & Interaction Design

As a Muslim, it is hard to do the prayers when you are traveling.

The majority of Wego users  are Muslim travelers based in the Middle East, North Africa, and Southeast Asia. As Muslims, they need to do their prayers 5 times a day while facing towards the "Qibla", a direction in which the city of Mecca is located at.

In this project, we want to help users to plan their itineraries around their prayer timings, so they can travel with ease and not miss their prayers.

Users are able to check prayer times in their destination city, locate Mosques around them, and choose the best flights for them so they won't miss any prayers.

Challenges

Finding the value of this feature.

Before designing this project, I need to find a positive value for users to open Wego app. If it's just another prayer times and qibla finder widget, it wouldn't be very helpful, just a nice-to-have.

There are a lot of independent apps.

Most Muslims would already have a prayer times and qibla finder app on their phones, it is a necessity. So how do we make this feature different from those apps? Why would they open Wego, instead of those apps?

Not all of our users are Muslims.

Despite the positive impact this feature would have for Muslim travelers, we also need to think about how this feature could affect our non-Muslim users.

Research and Findings

My product manager and I interviewed around 10+ Muslim travelers from Indonesia, Singapore, Iran, Bahrain, and Dubai. The user archetypes are people who travel in groups, business travelers, and solo travelers, in which they travel at least 1 time a year.

We asked questions to understand their travel behaviours related to their prayers. The purpose is to find a real value that we can give to our users so this feature won't be just a nice-to-have.

Planning the Itineraries.

When Muslim travelers are planning their trip, they find it hard to fit in their prayer schedule to the itinerary. The reason is simply because it's too much work to search for the prayer times of each city they want to visit and put them in the itinerary. They need an easier way to do this.

Buying the flight tickets.

Muslims have a rule: When traveling, they can combine Dhuhr (2nd Prayer) with Ashr (3rd Prayer) and Maghrib (4th Prayer) with Isyak (5th Prayer) prayer. But they can't combine them any other way.

So, they also need to plan their flights properly: what time do they fly, what time do they arrive, how many prayers do they have to do on the plane, and how will they pray around those flight times.

Knowing when is the next prayer time.

When they travel, it's easy to forget that they have a responsibility to pray. So they need to understand how much time to they have left until the next prayer time.

In some cases, they ended up missing their prayers, because of the tour itineraries, or they simply couldn't find a place to pray nearby.

Concept and Wireframe Exploration

Designing for the full human experience.

Instead of making this just a simple Prayer times and Qibla finder, I want to take this opportunity to make Wego on top of Muslim traveler's mind. User should be able to start planning their trip in our app and enjoy their trip with the help of Wego.

Then, I expand the vision further to what would go into the screens and how might we help Muslim travelers to have a better experience when traveling.

However, in Phase 1 of the project, we won't be able to include prayer timings inside the flight schedules.

Exploring the screens on pen and paper.

Based on the user flow above, I explored the idea using paper sketches. I use paper and pen because it is fast to do and it gets my creativity juice flowing.

Then, I asked for some feedback from the stakeholders before I continued with the wireframes.

PS. Unfortunately I've lost all the paper sketches & wireframe I've made, I hope you understand.

User Interface Design

A prayer time widget that's easy to read.

One of the fun part of this project was designing a bunch of different timetable styles for the prayer times. I took inspiration from some apps that has a clock/time interface on their widget.

In the timetable, I also added an indicator which highlights the next prayer time.

Asking for the user's consent.

Although the majority of our users are Muslims, we still need to address what would happen if a non-Muslim user encounter the widget.

Upon opening the app, user may choose to keep or remove the Muslim Prayer Times widget. If in the future a user wants to activate the widget, they can activate the widget from the accounts page.

Straight-forward Qibla Finder.

I want to create a Qibla finder that is not just a normal compass, but also intuitive and gives a helpful feedback. For this, I used haptic feedback and background color change as a positive response.

The interaction for the compass needs to feel intuitive and helpful. I played around in Protopie and made a prototype of the qibla finder. Below is the full-page version of the feature.

Putting them all together.

Once I nailed down the details, now it's time to put them all together. This is the overall flow of the prayer times and qibla finder feature.

Tests and Iteration

I asked some muslim friends for feedback and a quick usability test of the flow. I did this test with some Muslim colleagues in Singapore. Here are some feedback I gathered from them:

1. The next prayer time is hard to understand.
With just a green highlight, the next prayer time is not that easy to understand. They couldn't understand whether the highlighted color mean current prayer time or next prayer time.

2. Still not easy to plan the flight schedule.
Even though we already designed the prayer time and qibla finder, people thought it would be more helpful if we can indicate the prayer time in the flight schedule. However this time, it is out of our project scope.

A simple but helpful information.

Prayer times are based on the movement of the sun. Most similar apps use progress indicators to show the movement of the sun. However, as we are showing the widget in the homepage, we need a simple but effective way of doing this.

I improved the widget by adding a countdown timer to the next prayer. It is self explanatory and has a connection to the prayer times above the text.

Getting better compass accuraccy.

When I were testing the prototype, the dev mentioned that on some mobile phones, we may need to calibrate the compass before we can get an accurate compass direction.

Based on that feedback, I made an improvement to the compass by giving users a suggestion to calibrate their compass to get better accuracy. I also made an illustration of how they should do the calibration process.

Result

Here's the result of the project both in Light mode and Dark mode. Unfortunately, world travel is plummeting due to the Coronavirus outbreak. Thus, even though we have launched this feature, I am not able to get any decent result for this feature yet.

Learnings

The benefits of user research.

This project started as an open discussion in Slack: "What if we make a prayer times and qibla finder for Ramadan?"

At the beginning, this project was just a "seasonal gimmick" for Muslim users during the Muslim's holy month of Ramadan. But the research that we did managed to expand the feature further into something that would be valuable to Muslim travelers.

Without gathering any feedback from our users, we might have ended up with just a nice-to-have instead of a valuable feature.

To collaborate better, make a prototype.

In this project, I made some prototypes using ProtoPie. I shared the prototype to the stakeholders and convinced them on the vision that I imagined. The prototype helped us to get on the same page and to share the feedback they have about the design.

With the prototype, I was also able show them what I meant by "giving a helpful feedback to user when they found the Qibla direction". By using a fully-functional compass in ProtoPie and have them try it on.