Mugo Web main content.

Christian Science Directory

Mugo partner since 2022

The First Church of Christ, Scientist launches updated online Christian Science Directory, focused on user experience and accessibility

The Christian Science Directory, provided by The Christian Science Journal, has long been a valuable resource for anyone looking for Christian Science resources in their community, and for those advertising their services, but the online version needed a complete upgrade and redevelopment. Not only were features of the Directory spread across several properties, but functionality, accessibility, and ease of use all needed to be substantially improved. So The First Church of Christ, Scientist and Christian Science Publishing Society reached out to us, as their long-term development partner, to help create a new site. 

New Directory 1.png

What is The Christian Science Directory? 

The Directory is a searchable database that allows users to locate Christian Science resources in their area, including churches, Reading Rooms, Christian Science nurses, practitioners, college and university organizations, and more. For an international organization with thousands of advertisers, updating this resource posed several interesting challenges for us as developers. Users of the site needed to be able to filter their search for multiple types of resources and locations. They also needed a uniform way to access the site. Previously, the information found in the Directory was not located in a single database. The Directory had a standalone site, but also a duplicated site located in the “Find us” section of the Christian Science website. Maintaining both sites and keeping the information updated was a hindrance to administrators and confusing for members. It was time to consolidate those pages and fully integrate the different services used to maintain the site.

colored markers identify different types of resources on the map

A new legend on the Directory helps users understand the resources they are accessing.

Integrating the CRM and the CMS

To be listed in the Directory, advertisers purchase listings as ads directly from the Christian Science Publishing Society. Each advertiser is responsible for supplying the correct details and information for their listing. The information for the Directory is stored in Salesforce, the Customer Relationship Manager the Church uses to sell ads for the site, with a unique ID. While this was also the case in the previous site, the integration between the CRM and Content Management System needed to be improved. Previously, content on the site wasn’t directly editable by staff. Advertisers were also limited in the type of information they could include in their listings. Improving the workflow for staff and the value of the ad buy for the advertiser was key to the upgrade.

Since we were essentially rebuilding the Directory from the bottom up, this brought the opportunity to upgrade to Ibexa DXP. In the new site, all advertiser information is still stored in the CRM, and the CMS retrieves it and indexes it for the public site. IDs for individual ads are uniform across both the CRM and the CMS. When an ad is updated, it triggers an alert in Salesforce that pushes the ID of the changed record, which alerts the CMS to fetch the updated information. Redundancy is built into the process to make sure that everything stays up-to-date. Daily fetches of data make sure that nothing is missed.

Adding client-generated images

The new Directory needed to support pictures supplied by certain advertisers for their listings and this required better asset management between the CRM and the CMS. We were able to establish a new protocol for how those images would be stored and accessed by the site. The uniform IDs that connected the individual ads between Salesforce and the CMS were applied to submitted images stored in the new image repository. This helped partially automate what would have otherwise been an onerous task for Directory staff. 

While this feature adds value to the advertiser’s listing, the photos that could be submitted could vary wildly in size, dimensions, and quality. Ensuring that the images would all display the same and maintain the quality expected on the site, Mugo Web developers created custom filters to render them appropriately.

An example of a single listing result in the new Directory, showing the information for First Church of Christ, Scientist, in Evergreen, Colorado.

Client-supplied images now appear in both the search results and the individual ad pages. Custom filters resize the same image to both spaces so it appears correctly in the layout on both mobile and desktop views.

Making Google Maps more efficient 

The previous site had maps but they were not user-friendly. Originally, maps were not embedded in the individual listings, and searching by map was unavailable. As the purpose of the Directory is to make these resources as easy to find as possible, maps needed to be front and center on the new site. That posed problems of its own. A map with thousands of global pins is slow to load and unwieldy to use. There needed to be a balance of having the information available, easily found, and quickly loaded.

The old search view of the Directory has a table of results with a map to the left. The map has many overlapping pins.

A sample of the previous Directory’s search results shows the limited functionality of Google Maps integration.

Developers tackled this issue by using marker clusters on the map to reduce rendering time, related to the level of zoom. Depending on that, there can be multiple clusters (of 5 or more pins) within a city or area. Zooming further down will adjust that ratio, making individual markers visible. Using marker clusters resulted in a fast, responsive map display that loads efficiently, no matter the browser or device used.

The example of the new search shows a detailed list of filters, a preview of the search items fitting the criteria (with contact info and images) and a full length map with clustered, color-coded pins.

The search results page on the updated Directory displays relevant information more clearly and has an easier-to-navigate map feature.

Creating a seamless experience for users

Multiple new search options were added to fit different ways members use the Directory. Behind the scenes, this was accomplished thanks to a custom Solr index for Ibexa DXP 4.2. The new site replaces the original limited search features with a beautiful map display and collapsable filters. Users can navigate the map and zoom in and out to look at different geographic areas if they want to browse. They can search by keyword or by location. They can enter a postal code or use their current location to find the resources closest to them. 

Users accessing the collapsable filter menu can view resources based on the resource type. They also have the option to filter results from any search with additional categories, such as language, country, or current availability.

Each result is displayed on a map and a card with additional information. Selecting a single result will bring up a page with full details about the resource in a uniform layout. Hours, location, map, contact information, services, and pictures supplied by the advertiser are all available at a glance. Since all the information is tied to the original Salesforce data, users and advertisers know that the data is current. In addition, helpful links from the Church about what to expect from this type of resource appear with the listing.

Another critical component in improving the user experience was making sure that the site was accessible and conformed to WCAG 2.1 guidelines. Mugo Web developers pride themselves on being accessibility experts, and with the upgrade, this was a perfect time to make sure that the new Directory would be accessible to anyone who used it, regardless of disability. 

Launching the new site

Mugo Web started consulting on the project in April 2022 and officially launched the new site in October. Immediately, it was easy to see the improvement between the old and new versions of the site.

Side-by-side comparison of the old site and the new. The old site had a keyword search with limited filter options. The new site has keyword or location search, a global map, a key and expanded filter options.

Side-by-side comparison of the previous Journal Directory (left) and the new Directory (right). In the new Directory, all search options are clearly visible and the map feature is front and center.

An updated design, new search features, and better integration prepare the online Christian Science Directory for the future and many years of providing a valuable resource to anyone searching for Christian Science resources in their community. Better integration with an updated CMS makes maintaining the site easier for administrators. The flexibility of this system increases the value of the ad for advertisers.

Read more

A line art robot, split in half. The left side has a black background and white outline and the right has a white background and a black outline.

Managing "bad" bots is not always black(list) or white(list)

Managing bot access to your website is one of the least sexy tasks a site manager handles. You just identify the bot’s user agent, edit robots.txt to allow or disallow access, and you’re done. Right?

Of course, nothing’s ever quite that simple when it comes to safeguarding your web identity. Sure, robots.txt is still the industry stalwart – it’s a tactic we often use for our clients here at Mugo Web when we want to block a specific bot for some practical reason.


a golden envelope floating above a stand with a number 1 notification attached to the corner

Email authentication's time has come: implementing SPF, DKIM, and DMARC

With Gmail and Yahoo now requiring bulk emailers to implement authentication protocols, making sure you understand the differences between SPF, DKIM, and DMARC and how they work together is essential for your email marketing efforts. We'll walk you through how to set these up in your email provider of choice. 

stylized browser tab open to a page with embedded video showing a loading screen

Optimizing page load time with a YouTube facade

While YouTube embed options are powerful and effective, they are not always the most efficient use of resources when it comes to bandwidth. Using a facade can help decrease page load time and increase site performance without sacrificing any of the utility of the native YouTube embed options. 

a caution sign featuring a gear and a circuit with AI on it over the image of a highway

GenAI for developers: your mileage will vary, so drive carefully

Generative AI is shaking up every category of knowledge work, and professional software development is on the front lines of the revolution. With new advancements on the horizon, what does that mean for developers in the here and now? Our team experimented with a few of the leading tools and shared their impressions, along with suggestions on best practices for navigating AI usage in web development.


Terminal Input Broadcast

Typing the same instructions into multiple terminals at the same time is a great trick when you have a group of servers that have the same or similar configurations. 

Women looking happily at the screen of the laptop she is holding, while fanning out money

Getting down to business with professional WordPress development

WordPress has a flexible and robust ecosystem for creating a wide variety of websites. But when your site needs to grow and expand functionality, having a dedicated, experienced development team to support and build out new features is essential. Learn about Mugo Web’s best practices when it comes to developing in a WordPress environment and see how we’ve helped save clients thousands of dollars with innovative solutions.