Building a companion website for Quran readers.

Introduction

LearnQuranWords.com is a free, no sign-up required web tool designed to help users learn the 600 most common/essential words in the Quran. These words reportedly make up around 80% of the Quranic text, allowing readers to understand the Quran more deeply by building core Arabic vocabulary.

Why this project?

Seeing multiple ads on Instagram on the topic "learn Quran through 600 words" made me realize and validate that there's demand for this approach by people who want to learn to understand the Quran.

Validating the demand

Using Google trends, I validated the demand for this by searching for the terms "Learn Quran" and "Quran Words" to see the interest over time for the past 5 years.

Also, I found this e-book for sale ranked high on Google search for the term "600 words of the Quran". Seeing 2.7K reviews, for a paid download (₹299/-) proves that people are willing to pay money for learning to read the Quran by learning the most repeated words.

Market Research

There seems to be these existing competitors for the idea of a free companion to learn to read the Quran

1) Quran 600 Words

Link : https://www.quran600words.com/

This is a free app with structured learning approach including quizzes, flashcards etc. but is not accessible to non apple users.

2) Kalamullah.com

Link : https://www.kalamullah.com/80-percent-of-quranic-words.html

This website offers the 80% words as one of it's website offerings as a downloadable PDF.

User Painpoints

The user is left with only 3 options

1) Buy the e-book or a physical book.

2) Download an app from Apple app store.

3) Download a lengthy free pdf and learn through that.

Proposed Solution

I'm proposing my website,(https://www.learnquranwords.com/) as a starting step and companion in the learning journey of the people who are interested to learn Quran through exploring words, quiz and also a set of confusing pairs.

How did I execute this?

I fed this article by Alexia Danton into ChatGPT and had it ask me questions to help it craft a prompt. ChatGPT gave me the below prompt

Design a responsive web app homepage that helps users learn the 600 most common words in the Quran (which make up ~80% of the text).The target users are people who want to understand the Quran more deeply by building vocabulary gradually.

Core Concept:

The homepage should focus on one word at a time, presented beautifully and clearly.

Main Features:

Display one Arabic word prominently (center focus)

Show:

English meaning

Example sentence using the word (simple, contextual)

Include a “New Word” interaction:

On page refresh or button click, a new word appears

Include a “Explore Words” / Repository section:

Alphabetically organized list of all 600 words

Each word is clickable → opens a detail view or modal

Smooth transitions between words

Interactions & Behavior:

Clicking “New Word” smoothly transitions to another word (fade/slide animation)

Clicking a word from the repository opens a detailed view

Subtle microinteractions on hover/tap

Design Style:

Modern, minimal UI with glassmorphism

Soft blur backgrounds, translucent cards, gentle gradients

Calm, spiritual, and focused aesthetic (inspired by Quran.com)

Clean typography with strong readability for Arabic + English

Layout:

Responsive (mobile-first + desktop scaling)

Centered hero section for the word

Secondary section for word repository (grid or list)

Sticky or simple navigation

Data:

Use realistic sample data:

Arabic words

English meanings

Example sentences

Components:

Build modular, reusable components:

Word card

Repository list/grid

Modal/detail view

Buttons and navigation

Goal:

Create a clean, calming, and intuitive interface that encourages daily learning of Quran vocabulary through focus and repetition.

Using the Free version of Figma make ( In my personal account ), I could get an idea of what this prompt could achieve. Since there were very limited usages allowed per day and I couldn't do much in terms of hosting, I began exploring other tools. You can access this version in the url : https://600wordstolearnquran.figma.site

I later used the prompt in freebuff, a CLI based agentic AI code generator and also in OpenAI's Codex to build and refine the website.

I could get all the necessary data through alquran api which is free.

I later used the prompt in freebuff, a CLI based agentic AI code generator and also in OpenAI's Codex to build and refine the website.

Could get all the necessary data through alquran api which is free.

Design decisions

1) Home Page - Highlighted word section

I kept the homepage clean and minimal. The word here updates on every refresh.

2) Home Page - Explore more words section

I had the 600 words listed with the option for users to either sort in alphabetical order through it's meaning in english or through frequency. When the user clicks a word, the below pop-up appears

2) Saved words Page

By using a local cookie logic, I could add a saved word section which lets users to save a word without needing to log in. This can help in user's learning journey by saving words for later reference.

3) Similar sounding words page

Arabic has a lot of similar sounding words which are very easy to mixup and confuse, So I made a dedicated page for it. There are three main ways in which learners get confused, which is a vowel shift, a one letter swap and adding/removal of one letter. I also included a seperate saved words section inside the same page.

4) Quiz page

I made a quiz page for gamification purpose and also to increase session time, shareability and to help users assess their knowledge.

I fed this into Figma Make (Free version and could get a rough idea of what this prompt could achieve.

30 Day Post Launch Analysis

GA4 Data shows that there is user spike only when promotion is done. The first spike is when I shared the launch through whatsapp (6/5/2026) and the second one is through product hunt launch (28/5/1016) and corrosponding launch post on X.

Micriosoft clarity gave me these metrics..

Dead clicks and Quick backs seem to be present in around 12% of the sessions. My assumption is that these new users came in through my promotion and not through search and hence are looking around and performing experimental clicks. Once I get a steady flow of traffic, I can make more sense out of the data.

Continual Improvement Practices

I do these things regularly to ensure my website keeps improving and give the best User experience possible.

1)Accessibility Audit through WAVE (By WebAIM)

2) Lighthouse Audit (PageSpeed Insights)

Conclusion

This is my first complete project that marks my transition from a UI/UX Designer to a Product Designer and builder, providing me a massive upskill through introduction into areas like Coding, Accessibility, SEO, Analytics etc. Thanks for taking the time to read this case study.