Project details

Thumbnail
Thumbnail

Budget:

E-Learning

Client:

Shelby S

Tool:

Figma, Photoshop, Canva, Capcut

Niyyah | Your Quran Coach


Project Goal

The goal of this project was to make Quran learning easier, faster, and more meaningful for everyone. The client believed that every person deserves to understand and apply the Quran in their daily life, even if they only have 5 minutes a day. The mission was to create a personal “Quran Coach” that delivers clear guidance, practical lessons, and an experience that feels engaging and spiritually uplifting — all through thoughtful design and modern technology.


Problem

When I joined the project, everything was text-based. The whole product lived inside a Notion document filled with long paragraphs and lessons. There was no visual hierarchy, no structure, and almost no guidance on how to turn all that text into a beautiful app. Because it’s an Islamic product, I couldn’t use any facial illustrations or human drawings, which made the visual direction very challenging. The content had to feel respectful, religiously correct, and spiritually calm. Typography had to be handled very carefully because the entire learning experience depended on how well the text was organized. I had to research deeply to find Islamic-friendly illustrations or create custom pieces by mixing elements without breaking religious guidelines. The deadline was extremely tight, the team barely followed agile methods, and I had to balance fast delivery with maintaining the Islamic vibe and accuracy. The biggest challenge was turning pure text into a visual experience that people actually enjoy reading.

Image
Image
Image
Image

Solution

Even though I am already a Muslim designer, I studied even more for this project because I wanted to deliver something that truly helps people understand the Quran. I analyzed competitors, re-read the PRD multiple times, and wrote clear user stories to explain how people would interact with the app. After getting approval, I moved to FigJam and created a clean user flow. I attended several review sessions until the flow was finalized. Then I started designing low-fidelity wireframes followed by high-fidelity screens. I explored many color combinations to find one that felt modern but still respectful to the religion, and finally the client picked the one that matched the brand the best. During the project, the client finalized the app name “Guider” and created the logo, and I continued building the full experience around it. I wasn’t only designing the app I also designed social media graphics, illustrations, content layouts, and anything the brand needed. Almost a year later, they came back for Version 2 with new features and improvements, and I repeated the entire process again with more confidence and better experience.



Success Outcome

After the release of Guider V1, the app received an amazing response. They gained 1500+ paid users within the first 5–6 months, and users loved the experience. They shared helpful suggestions and positive feedback, and those insights guided the improvements for V2. When Version 2 launched under the new name “Niyyah,” the results were even bigger the product secured $2M in funding and reached over 2500+ paid users. Day by day, people started applying the lessons in their daily life, and many openly shared on social media how the app changed their habits and helped them connect with the Quran in a deeper way.

Solution

Even though I am already a Muslim designer, I studied even more for this project because I wanted to deliver something that truly helps people understand the Quran. I analyzed competitors, re-read the PRD multiple times, and wrote clear user stories to explain how people would interact with the app. After getting approval, I moved to FigJam and created a clean user flow. I attended several review sessions until the flow was finalized. Then I started designing low-fidelity wireframes followed by high-fidelity screens. I explored many color combinations to find one that felt modern but still respectful to the religion, and finally the client picked the one that matched the brand the best. During the project, the client finalized the app name “Guider” and created the logo, and I continued building the full experience around it. I wasn’t only designing the app I also designed social media graphics, illustrations, content layouts, and anything the brand needed. Almost a year later, they came back for Version 2 with new features and improvements, and I repeated the entire process again with more confidence and better experience.



Success Outcome

After the release of Guider V1, the app received an amazing response. They gained 1500+ paid users within the first 5–6 months, and users loved the experience. They shared helpful suggestions and positive feedback, and those insights guided the improvements for V2. When Version 2 launched under the new name “Niyyah,” the results were even bigger the product secured $2M in funding and reached over 2500+ paid users. Day by day, people started applying the lessons in their daily life, and many openly shared on social media how the app changed their habits and helped them connect with the Quran in a deeper way.

Solution

Even though I am already a Muslim designer, I studied even more for this project because I wanted to deliver something that truly helps people understand the Quran. I analyzed competitors, re-read the PRD multiple times, and wrote clear user stories to explain how people would interact with the app. After getting approval, I moved to FigJam and created a clean user flow. I attended several review sessions until the flow was finalized. Then I started designing low-fidelity wireframes followed by high-fidelity screens. I explored many color combinations to find one that felt modern but still respectful to the religion, and finally the client picked the one that matched the brand the best. During the project, the client finalized the app name “Guider” and created the logo, and I continued building the full experience around it. I wasn’t only designing the app I also designed social media graphics, illustrations, content layouts, and anything the brand needed. Almost a year later, they came back for Version 2 with new features and improvements, and I repeated the entire process again with more confidence and better experience.



Success Outcome

After the release of Guider V1, the app received an amazing response. They gained 1500+ paid users within the first 5–6 months, and users loved the experience. They shared helpful suggestions and positive feedback, and those insights guided the improvements for V2. When Version 2 launched under the new name “Niyyah,” the results were even bigger the product secured $2M in funding and reached over 2500+ paid users. Day by day, people started applying the lessons in their daily life, and many openly shared on social media how the app changed their habits and helped them connect with the Quran in a deeper way.

Image
Image

Key Takeaways

Working on this product is something I feel genuinely proud of. I learned so much — not only about design, but also about Islam itself. I experienced how agile teams work, how to follow sprints, and how to build a product under real pressure. I became more confident with typography, learned to stay consistent with design, and improved at collaborating closely with developers. I also learned how to organize heavy text content in a way that feels enjoyable to read. Overall, this project was a journey I will never forget.

Key Takeaways

Working on this product is something I feel genuinely proud of. I learned so much — not only about design, but also about Islam itself. I experienced how agile teams work, how to follow sprints, and how to build a product under real pressure. I became more confident with typography, learned to stay consistent with design, and improved at collaborating closely with developers. I also learned how to organize heavy text content in a way that feels enjoyable to read. Overall, this project was a journey I will never forget.

Key Takeaways

Working on this product is something I feel genuinely proud of. I learned so much — not only about design, but also about Islam itself. I experienced how agile teams work, how to follow sprints, and how to build a product under real pressure. I became more confident with typography, learned to stay consistent with design, and improved at collaborating closely with developers. I also learned how to organize heavy text content in a way that feels enjoyable to read. Overall, this project was a journey I will never forget.

Create a free website with Framer, the website builder loved by startups, designers and agencies.