Masjid Ur - Rahman
Masjid Ur-Rahman Website Redesign
Tools Used
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.
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.
Pain Points
- 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.
- Limited Call-to-Action Focus & 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.
Project Timeline
-
Empathize Week 1
-
Define Week 2
-
Ideate Week 3
-
Design Week 4
-
Testing Week 5
Design Process
Stage 1: Empathize
Understanding User Needs
- Conducted discussions with mosque administrators, worshippers, and community members to understand their pain points.
- Identified key user needs:
- Easy 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.
- A mobile-friendly design for easy access on the go.
Stage 2: Define
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.
Stage 3: 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.
Stage 4: 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.
Stage 5: 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.
