Role
Product Designer
Company



Key Responsibility
As a designer on an already established product, my key responsibility was to drive improvement and design for new features. I had to make sure that the design decisions are streamlined across teams, understanding users’ pain points through customer support, running design sprints to prioritise & solve problems and collaborating with engineering and marketing teams.
Key Responsibility
As a designer on an already established product, my key responsibility was to drive improvement and design for new features. I had to make sure that the design decisions are streamlined across teams, understanding users’ pain points through customer support, running design sprints to prioritise & solve problems and collaborating with engineering and marketing teams.
Key Responsibility
As a designer on an already established product, my key responsibility was to drive improvement and design for new features. I had to make sure that the design decisions are streamlined across teams, understanding users’ pain points through customer support, running design sprints to prioritise & solve problems and collaborating with engineering and marketing teams.
The Challenge
The Daily Average Users (DAUs) of Athan were dropping steadily over the past few weeks, indicating a significant usability issue or a barrier that affects user engagement and retention. We wanted to understand the root cause of this issue and implement UX improvements to aim for higher user retention and engagement.
The Challenge
The Daily Average Users (DAUs) of Athan were dropping steadily over the past few weeks, indicating a significant usability issue or a barrier that affects user engagement and retention. We wanted to understand the root cause of this issue and implement UX improvements to aim for higher user retention and engagement.
The Challenge
The Daily Average Users (DAUs) of Athan were dropping steadily over the past few weeks, indicating a significant usability issue or a barrier that affects user engagement and retention. We wanted to understand the root cause of this issue and implement UX improvements to aim for higher user retention and engagement.
Research Objectives
Understand user behaviour
I wanted to explore how users interact with the app, including their motivations, expectations, and pain points. Interviews were conducted with a group of users, where they were given the following goals:
Mark a prayer as done
View and share prayer times
Read the Holy Quran
Search for Duas
Navigate the Hajj and Umrah guide
Afterwards, users were asked how they felt while browsing the application and if they had any general suggestion or complaints regarding its experience.
Research Objectives
Understand user behaviour
I wanted to explore how users interact with the app, including their motivations, expectations, and pain points. Interviews were conducted with a group of users, where they were given the following goals:
Mark a prayer as done
View and share prayer times
Read the Holy Quran
Search for Duas
Navigate the Hajj and Umrah guide
Afterwards, users were asked how they felt while browsing the application and if they had any general suggestion or complaints regarding its experience.
Research Objectives
Understand user behaviour
I wanted to explore how users interact with the app, including their motivations, expectations, and pain points. Interviews were conducted with a group of users, where they were given the following goals:
Mark a prayer as done
View and share prayer times
Read the Holy Quran
Search for Duas
Navigate the Hajj and Umrah guide
Afterwards, users were asked how they felt while browsing the application and if they had any general suggestion or complaints regarding its experience.
User's pain points
Problem # 1 (small android devices)
Users with smaller devices weren’t properly able to interact with the navigation bar. There’s an advertisement strip on top of the nav and whenever they’d tap on a nav item, an advertisement opens up instead of the intended screen.
Problem # 2 (android & iOS)
For some users, whenever they would mark a prayer as done, it won’t get logged the first time.
Problem # 3 (android & iOS)
Some users reported that they weren’t getting prayer time notifications on time.
Problem # 4
Users wanted to be able to listen to Quran when they didn’t have the time to read it.
User's pain points
Problem # 1 (small android devices)
Users with smaller devices weren’t properly able to interact with the navigation bar. There’s an advertisement strip on top of the nav and whenever they’d tap on a nav item, an advertisement opens up instead of the intended screen.
Problem # 2 (android & iOS)
For some users, whenever they would mark a prayer as done, it won’t get logged the first time.
Problem # 3 (android & iOS)
Some users reported that they weren’t getting prayer time notifications on time.
Problem # 4
Users wanted to be able to listen to Quran when they didn’t have the time to read it.
User's pain points
Problem # 1 (small android devices)
Users with smaller devices weren’t properly able to interact with the navigation bar. There’s an advertisement strip on top of the nav and whenever they’d tap on a nav item, an advertisement opens up instead of the intended screen.
Problem # 2 (android & iOS)
For some users, whenever they would mark a prayer as done, it won’t get logged the first time.
Problem # 3 (android & iOS)
Some users reported that they weren’t getting prayer time notifications on time.
Problem # 4
Users wanted to be able to listen to Quran when they didn’t have the time to read it.
Competitive analysis
After compiling the feedback from users, I went through 3 competitor apps to identify features that may be attracting users and are missing in our app.
Competitive analysis
After compiling the feedback from users, I went through 3 competitor apps to identify features that may be attracting users and are missing in our app.
Competitive analysis
After compiling the feedback from users, I went through 3 competitor apps to identify features that may be attracting users and are missing in our app.



THE OPPORTUNITY
The month of Ramadan is upcoming and that’s when all muslims get closer to religion. We leveraged this to get maximum engagement and target more users.
THE OPPORTUNITY
The month of Ramadan is upcoming and that’s when all muslims get closer to religion. We leveraged this to get maximum engagement and target more users.
THE OPPORTUNITY
The month of Ramadan is upcoming and that’s when all muslims get closer to religion. We leveraged this to get maximum engagement and target more users.
Workshop
I facilitated a workshop with the product team in order to discuss the pain points & suggestions from the users and to brainstorm upon features that can be launched for Ramadan. The "How Might We" approach was used along with a Prioritization Matrix to brainstorm ideas, come up with solutions and set priorities. This gave us a clear vision of what updates can be made in time for Ramadan, and have enough impact that would improve our usability.
Workshop
I facilitated a workshop with the product team in order to discuss the pain points & suggestions from the users and to brainstorm upon features that can be launched for Ramadan. The "How Might We" approach was used along with a Prioritization Matrix to brainstorm ideas, come up with solutions and set priorities. This gave us a clear vision of what updates can be made in time for Ramadan, and have enough impact that would improve our usability.
Workshop
I facilitated a workshop with the product team in order to discuss the pain points & suggestions from the users and to brainstorm upon features that can be launched for Ramadan. The "How Might We" approach was used along with a Prioritization Matrix to brainstorm ideas, come up with solutions and set priorities. This gave us a clear vision of what updates can be made in time for Ramadan, and have enough impact that would improve our usability.



How Might We
Enable the user listen to the Quran.
How Might We
Fix prayer time notification issue
How Might We
Make sure that the users' device view port is not obtrusive.
How Might We
Add features especially for Ramadan
How Might We
Make sure the the prayer is marked as done.
How Might We
Enable the user listen to the Quran.
How Might We
Fix prayer time notification issue
How Might We
Make sure that the users' device view port is not obtrusive.
How Might We
Add features especially for Ramadan
How Might We
Make sure the the prayer is marked as done.
How Might We
Enable the user listen to the Quran.
How Might We
Fix prayer time notification issue
How Might We
Make sure that the users' device view port is not obtrusive.
How Might We
Add features especially for Ramadan
How Might We
Make sure the the prayer is marked as done.
Workshop Outcome
A comprehensive roadmap encompassing new features and bug fixes was established. The engineering team provided insights into the underlying causes of issues affecting prayer time notifications and prayer logging. Collaborating closely with QA and UX teams, the engineers undertook an analysis to identify potential technical, architectural, or design weaknesses contributing to these problems. The product manager ensured that the approach to bug resolution was aligned with the overall product roadmap, integrating the fixes into the forthcoming development sprints. Concurrently, while the engineering team dedicated their efforts to resolving these specific bugs, my focus was directed toward the development of the following features, slated for launch during Ramadan:
Quran Audio
Create an experience which enables the user to listen to the Holy Quran.
Ramadan Book
Motivate the users to keep on fasting during Ramadan by introducing the fasting log and allow them to get closer to God using a "to-do list" of daily good deeds that they can perform and mark as done. Users are awarded a badge if they fast every day in Ramadan.
Workshop Outcome
A comprehensive roadmap encompassing new features and bug fixes was established. The engineering team provided insights into the underlying causes of issues affecting prayer time notifications and prayer logging. Collaborating closely with QA and UX teams, the engineers undertook an analysis to identify potential technical, architectural, or design weaknesses contributing to these problems. The product manager ensured that the approach to bug resolution was aligned with the overall product roadmap, integrating the fixes into the forthcoming development sprints. Concurrently, while the engineering team dedicated their efforts to resolving these specific bugs, my focus was directed toward the development of the following features, slated for launch during Ramadan:
Quran Audio
Create an experience which enables the user to listen to the Holy Quran.
Ramadan Book
Motivate the users to keep on fasting during Ramadan by introducing the fasting log and allow them to get closer to God using a "to-do list" of daily good deeds that they can perform and mark as done. Users are awarded a badge if they fast every day in Ramadan.
Workshop Outcome
A comprehensive roadmap encompassing new features and bug fixes was established. The engineering team provided insights into the underlying causes of issues affecting prayer time notifications and prayer logging. Collaborating closely with QA and UX teams, the engineers undertook an analysis to identify potential technical, architectural, or design weaknesses contributing to these problems. The product manager ensured that the approach to bug resolution was aligned with the overall product roadmap, integrating the fixes into the forthcoming development sprints. Concurrently, while the engineering team dedicated their efforts to resolving these specific bugs, my focus was directed toward the development of the following features, slated for launch during Ramadan:
Quran Audio
Create an experience which enables the user to listen to the Holy Quran.
Ramadan Book
Motivate the users to keep on fasting during Ramadan by introducing the fasting log and allow them to get closer to God using a "to-do list" of daily good deeds that they can perform and mark as done. Users are awarded a badge if they fast every day in Ramadan.
Quran Audio
During the research phase, I conducted an extensive analysis of the Quran audio experience in several competitor applications. Additionally, I studied the user interface of Spotify, given its widely recognized intuitive design and substantial user base. This comparative analysis helped to gain insights into industry standards and best practices, informing our approach to creating a user-friendly and engaging audio experience.
Quran Audio
During the research phase, I conducted an extensive analysis of the Quran audio experience in several competitor applications. Additionally, I studied the user interface of Spotify, given its widely recognized intuitive design and substantial user base. This comparative analysis helped to gain insights into industry standards and best practices, informing our approach to creating a user-friendly and engaging audio experience.
Quran Audio
During the research phase, I conducted an extensive analysis of the Quran audio experience in several competitor applications. Additionally, I studied the user interface of Spotify, given its widely recognized intuitive design and substantial user base. This comparative analysis helped to gain insights into industry standards and best practices, informing our approach to creating a user-friendly and engaging audio experience.

Quran in Spotify
The Map
I created a map that represents the user going through Athan app to achieve the intended goal, which is to listen to the Quran. All the touchpoints that gets the user closer to the goal are noted. Along with visualizing all the steps that the user takes, the map also helps indentify if there’s friction between the touchpoints and provides a structure for the prototype.
The Map
I created a map that represents the user going through Athan app to achieve the intended goal, which is to listen to the Quran. All the touchpoints that gets the user closer to the goal are noted. Along with visualizing all the steps that the user takes, the map also helps indentify if there’s friction between the touchpoints and provides a structure for the prototype.
The Map
I created a map that represents the user going through Athan app to achieve the intended goal, which is to listen to the Quran. All the touchpoints that gets the user closer to the goal are noted. Along with visualizing all the steps that the user takes, the map also helps indentify if there’s friction between the touchpoints and provides a structure for the prototype.



Wireframes and userflow
I sketched the wireframes on paper and created all the touchpoints that users would take when they open the app, navigate to the Quran screen and listen to Quranic verses.
Wireframes and userflow
I sketched the wireframes on paper and created all the touchpoints that users would take when they open the app, navigate to the Quran screen and listen to Quranic verses.
Wireframes and userflow
I sketched the wireframes on paper and created all the touchpoints that users would take when they open the app, navigate to the Quran screen and listen to Quranic verses.



Hi Fidelity Design
Quran - List of chapters
The list of chapters now has a "play" button. When tapped, the chapter starts playing from the beginning
Hi Fidelity Design
Quran - List of chapters
The list of chapters now has a "play" button. When tapped, the chapter starts playing from the beginning
Hi Fidelity Design
Quran - List of chapters
The list of chapters now has a "play" button. When tapped, the chapter starts playing from the beginning

Quran - Within a chapter
Play icon also appears bellow the verse. Its been placed towards the right to ensure ease of access within the thumb zone.
Quran - Within a chapter
Play icon also appears bellow the verse. Its been placed towards the right to ensure ease of access within the thumb zone.
Quran - Within a chapter
Play icon also appears bellow the verse. Its been placed towards the right to ensure ease of access within the thumb zone.

Quran - Playing audio
When a verse is playing, it gets highlighted on the screen and a bottom bar appears as well, which has audio controls and details of the chapter/verse being played.
Quran - Playing audio
When a verse is playing, it gets highlighted on the screen and a bottom bar appears as well, which has audio controls and details of the chapter/verse being played.
Quran - Playing audio
When a verse is playing, it gets highlighted on the screen and a bottom bar appears as well, which has audio controls and details of the chapter/verse being played.

Ramadan Book
The goal of Ramadan book was to motivate the users to keep on fasting during Ramadan by introducing the fasting log and allow them to get closer to God using a "to-do list" of daily good deeds that they can perform and mark as done. Users are awarded a badge if they fast every day in Ramadan.
Ramadan Book
The goal of Ramadan book was to motivate the users to keep on fasting during Ramadan by introducing the fasting log and allow them to get closer to God using a "to-do list" of daily good deeds that they can perform and mark as done. Users are awarded a badge if they fast every day in Ramadan.
Ramadan Book
The goal of Ramadan book was to motivate the users to keep on fasting during Ramadan by introducing the fasting log and allow them to get closer to God using a "to-do list" of daily good deeds that they can perform and mark as done. Users are awarded a badge if they fast every day in Ramadan.
Hi Fidelity Design
Ramadan special screen
The goal of this screen is to provide users with a dedicated space where they explore the new features launched for Ramadan:
Fasting Log
30 days, 30 deeds (Daily good deeds)
Check Sehr & Iftar times
Listen to the Quran
Share Ramadan Greetings
Earn Ramadan Special Badges
Hi Fidelity Design
Ramadan special screen
The goal of this screen is to provide users with a dedicated space where they explore the new features launched for Ramadan:
Fasting Log
30 days, 30 deeds (Daily good deeds)
Check Sehr & Iftar times
Listen to the Quran
Share Ramadan Greetings
Earn Ramadan Special Badges
Hi Fidelity Design
Ramadan special screen
The goal of this screen is to provide users with a dedicated space where they explore the new features launched for Ramadan:
Fasting Log
30 days, 30 deeds (Daily good deeds)
Check Sehr & Iftar times
Listen to the Quran
Share Ramadan Greetings
Earn Ramadan Special Badges

Fasting log
The goal here is to provide users with an organised way to track and monitor their fasting activity. It helps keep the user motivated and gives a sense of accountability for their fasting.
Fasting log
The goal here is to provide users with an organised way to track and monitor their fasting activity. It helps keep the user motivated and gives a sense of accountability for their fasting.
Fasting log
The goal here is to provide users with an organised way to track and monitor their fasting activity. It helps keep the user motivated and gives a sense of accountability for their fasting.


30 Days, 30 Deeds
The goal here is to inspire and guide the users to perform good deeds and grow closer to God. The list of good deeds serves as a source of spiritual guidance, enabling Muslims to maximize the blessings of Ramadan.
30 Days, 30 Deeds
The goal here is to inspire and guide the users to perform good deeds and grow closer to God. The list of good deeds serves as a source of spiritual guidance, enabling Muslims to maximize the blessings of Ramadan.
30 Days, 30 Deeds
The goal here is to inspire and guide the users to perform good deeds and grow closer to God. The list of good deeds serves as a source of spiritual guidance, enabling Muslims to maximize the blessings of Ramadan.

Outcome
The new rollout which included the bug fixes and new features resulted in increased engagement and DAUs. The analytics for Android and iOS were recorded in April 2022 (Month of Ramadan).
Outcome
The new rollout which included the bug fixes and new features resulted in increased engagement and DAUs. The analytics for Android and iOS were recorded in April 2022 (Month of Ramadan).
Outcome
The new rollout which included the bug fixes and new features resulted in increased engagement and DAUs. The analytics for Android and iOS were recorded in April 2022 (Month of Ramadan).
Daily Average Users - Android
+64.2%
721,770
Daily Average Users - iOS