The work was of exceptionally high quality. When our donor saw it, they said it was better and stronger than they had ever imagined. Jazakum Allahu khairan.
Mecca and Madinah Chat
Religious & Cultural Outreach2024Interactive Virtual Journeys Through Makkah & Madinah
Two immersive WordPress websites that take non-Muslim visitors on a map-based tour of Makkah and Madinah's most significant landmarks, ending in a live conversation with an Islamic scholar.
ServicesWeb Platforms
Mecca and Madinah Chat product previewOverview
The client set out to open Makkah and Madinah, the two holiest cities in Islam, to people who have never been able to visit them. The goal was not just to inform but to invite: give non-Muslims an approachable, guided way to explore the most significant landmarks of each city, then connect them with an Islamic scholar (da'iya) to continue the conversation.
We delivered two websites, meccachat.com and madinahchat.com, planned and built as a single project with a shared experience model, design system, and component library. Our engagement covered discovery, UX/UI design, WordPress development, user acceptance testing, and a post-launch support and handover phase.
The Challenge
How do you guide someone with no background through the holiest places in Islam, and make them want to keep the conversation going?
The audience was non-Muslims with little or no prior knowledge. Content about religious landmarks can easily feel dense, distant, or preachy, and a regular page-based website would read like an encyclopedia rather than an experience.
The product had to feel like a journey: engaging enough to hold attention, paced so users are never overwhelmed, and built around one clear destination, a real conversation with a scholar. It also had to carry heavy media, including cinematic video, interactive maps, and photo and video galleries, while still working smoothly on mobile and staying easy for the client's team to manage without developer support.
Our Approach
We designed the journey first. Everything else was built around it.
01 / WORKSTREAM
Discovery & Journey Mapping
We started by defining how a first-time visitor should move through each city, from the first impression to the final invitation to chat. In parallel, we researched interactive map solutions to find one that would perform well across devices.
- Mapped the end-to-end user journey and finalized user stories for both sites
- Evaluated map technologies and selected Leaflet, a lightweight open-source library suited to mobile
- Finalized project scope, plan, and wireframes, and confirmed WordPress as the platform
02 / WORKSTREAM
Design
We designed one visual system shared by both websites, so each city has its own identity while the experience stays consistent. Both sites open with a full-screen cinematic video and a single "Start Tour" call to action, setting the tone of an experience rather than a website.
- UI/UX design for all components of both websites
- Map experience with clickable landmark pins and a side information panel
- Designs approved by the client team on September 1, 2024
03 / WORKSTREAM
Platform Build
We built custom WordPress themes with Elementor and integrated Leaflet for the interactive maps. Development paused while the client finalized its decision on the map approach. Once it was confirmed on September 17, work resumed the next day with the plan intact.
- Interactive city maps with clickable pins that open a side panel, so users never lose their place
- Step-by-step storytelling inside each location, revealing extra information progressively
- A guided end-of-tour path leading users to chat with an Islamic scholar
- A media gallery of photos and videos for locations beyond the map
- Mobile-responsive layouts, including a landscape prompt so the map displays as intended
- The Madinah site reused the Makkah components and was built in 10 business days, compared with 25 for the first site
04 / WORKSTREAM
Testing, Launch & Handover
We ran user acceptance testing with the client team, fixed issues across devices, and launched both websites. A 30-business-day free support plan followed, covering further testing and a full handover of both sites to the client.
- User acceptance testing with the client team
- Cross-device bug fixing and launch of both websites
- Free support plan and full handover
Visual gallery
Visual gallery
6 screens
Outcomes
We designed the journey first. Everything else was built around it.
2
Live websites delivered as one coordinated project
17 weeks
From discovery kickoff to launch
60%
Less development time for the second site
5
Team members delivering the project end to end
Engagement Timeline
Engagement Timeline
0
Discovery
Kickoff & Planning
Researched interactive map solutions, selected Leaflet, and finalized scope, user stories, and wireframes for both websites.
2
Design
UI/UX Design
Designed a shared visual system and all components for both websites. Designs approved by the client on September 1, 2024.
7
Build
Mecca Website Development
Built the custom WordPress theme, the interactive Leaflet map, location panels, and the end-of-tour chat journey.
12
Build
Madinah Website Development
Reused the Makkah components to deliver the second website and all inner pages in 10 business days.
14
Launch
UAT & Go-Live
Ran user acceptance testing with the client team, fixed issues across devices, and launched both websites.
Ready when you are
Want this for your product?
Every engagement starts with a conversation. Tell us about your challenge and let's explore what's possible.