Muslim Prayer Widget for Traveler


Use research, visual and interaction design.


Q2-Q3, 2020

Product & Platform

Wego is an online travel search engine company. In this project, I led the project and designed the dark mode for Wego mobile apps.


Unfortunately, the travel industry plummeted due to the COVID-19 outbreak. At that time, after launching this feature we weren't able to get any decent result.


As a Muslim, it is hard pray during travels

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.

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.


Why should we build this?

Finding the value of this feature

Before designing this project, I need to find a positive value for users to open Wego app. As a Muslim myself, I have another app dedicated to solve this problem. So 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.

Image: The final design live in the mobile app.


Finding value in something "gimmicky"

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 behaviors 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.

Scenario: A Muslim traveler is trying to plan their trip

Buying the flight tickets

Muslims have some set of prayer rules and conditions. There are certain time window that they can't miss.

Which means 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.

Scenario: A Muslim traveler is trying to plan their trip

Knowing when is the next prayer time

When they travel, due to the timezone differences, it's easy to miss the prayer time window. In their travels 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.


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.

Image: User journey

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.

Image: Prayer time widget exploration

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.

Image: Asking for the user's consent.

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.

Image: Entry points for prayer time widget

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.

Image: Qibla finder interaction

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.

Image: Qibla finder and prayer time page

Test & iteration

Usability tests with some Muslim friends and colleagues who fit the user archetype in Singapore

Problem: 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.

Problem: 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.

Iteration: 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.

Image: Before and after the iteration

Iteration: 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.

Image: Edge case scenario when user need to calibrate the compass


Unfortunately, the travel industry came to a halt. But I got to use this feature 2 years later, in 2022.

Unfortunately, the travel industry plummeted due to the COVID-19 outbreak. After launching this feature we weren't able to get any decent result. 2 years later in 2022, I went to Vietnam and finally had the chance to use this feature. I think it's pretty nice, but not that useful since I already have another app dedicated for this.

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.

Thanks for reading!

Check out my other projects:

Stop the Churn, Stop the Burn: New Offers Experience

Improving the likeliness of conversion by making discounts more achievable and less demanding.

Turn the Lights Off: Designing Dark Mode for Wego App

Featured on the Apple App Store for consecutive weeks in the Middle East, North Africa, and South East Asia.

Muslim Prayer Times and Qibla Finder Widget

Improving the likeliness of conversion by making discounts more achievable and less demanding.

Visual Design Gallery

Some design explorations I've done in recent years. You'll find animations, interactions, icons, and illustrations here.