The Holy Quran

About

The Holy Quran – English is a popular non-profit mobile app for Android and iOS. Since its inception in 2011, with over a million downloads and a rating of 4.6, The Holy Quran – English has become a trusted resource for the Muslim community and those interested in Islam. The app’s main objective is to provide accurate knowledge about Islam and serve as a platform for studying the Quran.
Our story with the app began a few years ago when it required substantial maintenance and improvements. Since then, working closely the Product Owner, the app has been through a range of improvements resulting in increased user satisfaction and ratings and eventually leading to recent app modernization.

Average rating on Stores before we started our trip

Stages of Cooperation time Stages of Cooperation time Stages of Cooperation time

Stages of Cooperation

Services we provided

The list of services we have consistently provided at different stages over the years of our collaboration.

IOS
Development

Android
Development

Backend
Development

Quality
Assurance

Business
Analysis

Project
Management

UI/UX
Designer

Maintenance Maintenance Maintenance

STAGES

Maintenance & features improvements

For the initial couple of years, our focus was primarily on the maintenance of the app, aiming to address the most critical issues and ensure its functionality remained steady.
During this period, our team diligently worked on the following:

bug fixing;
optimizing performance;
improving existing features;
enhancing overall stability.

Development Development Development

STAGES

App for Apple Watch

After achieving a satisfactory maintenance level, we identified the opportunity for app expansion and decided to extend our reach by introducing Apple Watch support to the iOS platform. We carefully selected and incorporated the most useful features onto the Apple Watch, ensuring they could be utilized on the go and in situations where the phone is not readily available.

Apple Watch Design & Development

Apple Watch Design Apple Watch Design Apple Watch Design Apple Watch Design Apple Watch Design

PRODUCT REDES PRODUCT REDES PRODUCT REDES

STAGES

Product Redesign

In 2022, we embarked on the most intense phase of our cooperation: product redesign. Our objective was to comprehensively modernize the app, encompassing all aspects from design to development, guided by valuable feedback from our users.

Old Design

New Design

PRODUCT REDES PRODUCT REDES PRODUCT REDES

Assumptions

Throughout app maintenance, our team encountered significant challenges that demanded immediate attention. These challenges included:

Complex UX Flows that made it difficult for users to navigate and access the desired features.
Obsolete Technologies that impacted the app’s stability, security, and maintainability.
Outdated Design that lacked modern design principles and aesthetics.

To address these issues, we started the modernization process, setting clear goals:

Base decisions on user feedback.
Embrace state-of-art technological approaches.
Ensure secure data migration for our users.

Click on the phone to discover more

RESEARCH RESEARCH RESEARCH RESEARCH RESEARCH RESEARCH

Research

For the user research stage, we prepared and integrated a questionnaire into the app and, as a result, collected over 1500 responses over one month. Then our team analyzed the data to extract insights, develop user personas, and create a features improvement matrix. These research outputs became the main source of our team’s UX decisions and guided feature improvements during wireframing, ensuring a user-centric approach in enhancing the app experience.

Research results

Key results

What features of the Quran App were the most difficult to learn?

What features of the Quran App do you use the most?

How often do you use the app?

User persona

Total number of users who participated in the questionnaire over the course of one month.

Respondents that use the app for Islam practices or thorough Quran learning on a daily basis.

Number of feature requests or UX/UI issues raised by the participants.

WIREFRAMES WIREFRAMES WIREFRAMES WIREFRAMES WIREFRAMES WIREFRAMES

Wireframing

During the wireframing stage, we carefully reevaluated the app’s information architecture based on user feedback. Through wireframes, we visualized and refined the layout, navigation, and interaction patterns, ensuring a user-centric approach and a more intuitive user experience.

information architecture

New structure of the app

Wireframes

DESIGN DESIGN DESIGN DESIGN DESIGN DESIGN

Design

Our team placed a strong emphasis on the need to create a fresh and contemporary look for the app, aligning it with modern design principles. To ensure intuitive usability, we carefully crafted the app’s interface, taking into account principles of clarity, simplicity, and efficient interaction. We optimized the app’s navigation, streamlining the user flows and minimizing cognitive load.  We carefully selected a color palette, typography, and graphical elements that enhanced the app’s visual appeal and ensured a cohesive and recognizable brand identity. While giving the app a fresh and modern look, we retained the primary turquoise color, which has become synonymous with the app, reinforcing the brand’s presence.

Turquoise

#2c97a4

Grey

#9fa1b5

Violet

#240f4f

White

#ffffff

Dark

#262626

Green

#ececec

Poppins

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Product Design

Home & Activity

The home screen presents users with important information at a glance. It showcases a verse of the day, randomly generated from the Quran database, providing daily spiritual inspiration. Users can also view prayer times based on their location and weekly activity progress. For a more detailed overview of their progress, users have the option to navigate to the activity details section.

Quran &
Bookmarks

Quran provides users with a diverse set of features to enhance their studying experience. They can read and listen to verses, add bookmarks, share verses, search for specific passages, customize their reading experience, download audio for offline listening, and conveniently resume from their last reading or listening point.

Discover

Discover offers a diverse range of resources to delve deeper into the religion. It provides a collection of carefully categorized articles on Islamic principles and teachings, allowing users to gain in-depth insights and a better understanding of Islam.

Qiblah

Qiblah assists users in determining the direction of the Kaaba in Mecca, which is the focal point for Muslim prayer. This feature utilizes the device’s compass and GPS capabilities to accurately point users towards the Qiblah (direction of prayer) based on their current location. It provides a convenient and reliable tool for Muslims to align themselves correctly during prayer, regardless of their geographical location.

Prayer Times

Prayer times provides users with accurate and up-to-date prayer timings based on their geographical location. It offers a comprehensive schedule of the five daily prayers along with one optional and the Sunrise time. The app utilizes location services to automatically determine the user’s location and adjust the prayer timings accordingly.

Notifications & reminders feature enables users to stay informed of the designated times for each prayer, ensuring they can fulfill their religious obligations in a timely manner.

Widgets

The app provides users with widgets for Prayer Times and the Verse of the Day, available in different sizes for their device’s home screen. These widgets offer a seamless way to access crucial information without the need to open the app. By placing the widgets on their home screen, users can effortlessly stay connected to essential Quranic content and nurture their spiritual connection throughout the day.

Tablet Redesign & Development

While developing the tablet version of the Holy Quran app, our design and development teams carefully considered the unique features of tablets. To ensure a positive reading experience, we implemented a split-screen feature in the Quran & Discover sections, allowing users to view the list of all chapters and text side by side.

Tablet Redesign Tablet Redesign Tablet Redesign Tablet Redesign Tablet Redesign

Redevelopment Redevelopment Redevelopment

Redevelopment

During the redevelopment process, significant updates were made to enhance the app’s technology stack and improve its overall performance and stability on both Android and iOS platforms. Adopting SwiftUI on iOS played a crucial role in making the app universally available on mobile, tablet, and desktop devices, offering a seamless UI experience across different platforms. The transition from Java to Kotlin on Android provided a more stable and efficient technology stack, ensuring a smooth development process and making it easier for all team members to work on the project. Additionally, particular attention was given to working with the local database and background services, optimizing their functionality for a better user experience.