Masjid Ur - Rahman
Masjid Ur - Rahman
Website Redesign
Website Redesign
Tools Used
Tools Used
Problem Statement
Problem Statement
The existing Masjid Ur-Rahman website was outdated, cluttered, not responsive and lacked sufficient spacing, making it difficult for visitors to navigate. It did not provide enough relevant information about the mosque’s services, events, or prayer times, which limited community engagement. Additionally, there was no online donation feature, restricting the mosque’s ability to receive financial support conveniently.
The existing Masjid Ur-Rahman website was outdated, cluttered, not responsive and lacked sufficient spacing, making it difficult for visitors to navigate. It did not provide enough relevant information about the mosque’s services, events, or prayer times, which limited community engagement. Additionally, there was no online donation feature, restricting the mosque’s ability to receive financial support conveniently.
Project Goal
Project Goal
To redesign the Masjid Ur-Rahman website into a modern, responsive, user-friendly platform that enhances readability, provides essential mosque-related information, and improves user experience. The redesign also includes integrating a secure and accessible Donation Button, enabling users to contribute financially online.
To redesign the Masjid Ur-Rahman website into a modern, responsive, user-friendly platform that enhances readability, provides essential mosque-related information, and improves user experience. The redesign also includes integrating a secure and accessible Donation Button, enabling users to contribute financially online.
Pain Points
Pain Points
Outdated Design – The previous website had an old-fashioned look that did not align with modern web design standards.
Outdated Design – The previous website had an old-fashioned look that did not align with modern web design standards.
Poor Layout & Spacing – Information was cramped, making it difficult for users to find relevant content easily.
Poor Layout & Spacing – Information was cramped, making it difficult for users to find relevant content easily.
Limited call-to-action focus, Limited Information – The site lacked key details such as upcoming events, prayer times, and community announcements.making user onboarding less intuitive.
Limited call-to-action focus, Limited Information – The site lacked key details such as upcoming events, prayer times, and community announcements.making user onboarding less intuitive.
No Online Donations – Users had to rely on physical donations, making it inconvenient for those who preferred digital payments.
No Online Donations – Users had to rely on physical donations, making it inconvenient for those who preferred digital payments.
Project Timeline
Project Timeline
Design Process
Design Process
Empathize
Empathize
Understanding User Needs
Understanding User Needs
Conducted discussions with mosque administrators, worshippers, and community members to understand their pain points.
Identified key user needs:
Easier navigation to find prayer times, events, and announcements.
A modern, professional look that reflects the mosque’s identity.
A simple, secure donation system to allow online contributions.
Mobile-friendly design for easy access on the go.
Define
Define
Pinpointing the Core Problems
Pinpointing the Core Problems
Based on research and user feedback, the main problems were:
Poor user experience – The previous website was difficult to navigate due to cluttered content and lack of spacing.
Lack of essential information – Users couldn’t easily find prayer times, event details, or mosque updates.
No digital donation system – The mosque relied only on in-person contributions, limiting donor accessibility.
Non-responsive design – The old website was not optimized for mobile users, making it difficult to access on smartphones.
Ideate
Ideate
Brainstorming Solutions
Created a new website structure with clearly defined sections for Prayer Times, Events, Donations, and Contact.
Designed a modern layout with improved spacing and a calming Islamic-inspired color palette.
Proposed a prominent donation button integrated with a secure payment gateway.
Planned for mobile-first optimization to ensure accessibility across all devices.
Brainstorming Solutions
Created a new website structure with clearly defined sections for Prayer Times, Events, Donations, and Contact.
Designed a modern layout with improved spacing and a calming Islamic-inspired color palette.
Proposed a prominent donation button integrated with a secure payment gateway.
Planned for mobile-first optimization to ensure accessibility across all devices.
Prototype
Prototype
Designing & Building the Website
Developed low-fidelity wireframes to map out content placement and navigation flow.
Created high-fidelity UI prototypes in Figma, implementing the final design choices.
Built an interactive prototype to demonstrate how users would navigate the site and make donations.
Received feedback from stakeholders and test users before moving to development.
Designing & Building the Website
Developed low-fidelity wireframes to map out content placement and navigation flow.
Created high-fidelity UI prototypes in Figma, implementing the final design choices.
Built an interactive prototype to demonstrate how users would navigate the site and make donations.
Received feedback from stakeholders and test users before moving to development.
Testing
Testing
Refining the Experience
Conducted usability testing with mosque members to ensure smooth navigation.
Collected feedback on readability, donation process, and responsiveness.
Made final refinements, ensuring:
✅ Clear, spaced-out content for easy reading.
✅ The Donation Button is visible and easy to use.
✅ The website is mobile-friendly and loads quickly.
Refining the Experience
Conducted usability testing with mosque members to ensure smooth navigation.
Collected feedback on readability, donation process, and responsiveness.
Made final refinements, ensuring:
✅ Clear, spaced-out content for easy reading.
✅ The Donation Button is visible and easy to use.
✅ The website is mobile-friendly and loads quickly.
2024 Ayisha S. R. Sowkathali. All rights reserved
2024 Ayisha S. R. Sowkathali. All rights reserved
2024 Ayisha S. R. Sowkathali. All rights reserved