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 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.

LEARN MORE

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. 

LEARN MORE
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.

LEARN MORE
Stylized computer window with WordPress logo and stopwatch

WordPress image optimization makes for quicker, more powerful websites

Getting the most out of your WordPress site can take some work. You want a site that looks great, loads quickly, and provides a good user experience for visitors. Unfortunately, WordPress sites often struggle with optimizing images, which can cause significant delays in load time and produce sub-optimal experiences for users on mobile devices. With a little effort, you can create responsive images and drastically improve your site’s performance, both for users and search engines.

LEARN MORE
Cartoon hand holding a cartoon bulhorn over a banner that reads annoucement banners

Anatomy of an announcement banner: key features for a better user and editorial experience

There's a lot your website needs to communicate to users. When you have crucial information you don't want people to miss, an announcement banner can be a useful way to prioritize that information on your site. While this can be a simple solution, there are several use cases to consider when implementing site-wide banners. Working with our library partners, we've developed a full range of features to help deliver information quickly, effectively, and painlessly for both the front-end user and the back-end administrator.

LEARN MORE
bar chart surrounded by a gear, dollar sign, and clock
AWS

Optimizing Amazon CloudWatch for peak efficency and cost savings

Monitoring your web infrastructure is key for several reasons. It enables you to gain insights into the performance and health of your resources, identify potential issues, and make informed decisions for optimization. AWS offers a comprehensive monitoring solution through Amazon CloudWatch, which provides built-in metrics and the flexibility to create custom metrics. However, while comprehensive, the free monitoring options available still might not always meet your needs, and upgrading to the next level of configuration might be overkill and drive up your hosting costs. Auditing and customizing your CloudWatch infrastructure is a great way to get the metrics you desire and save money along the way.

LEARN MORE
a group of frogs hanging out on a branch

Custom search with Solr and Ibexa’s native Object Relation Model puts advanced information at users’ fingertips

As your website grows, custom site search becomes an increasingly important way for users to quickly find the information they need.

Here at Mugo Web, we find that most of our clients’ sites evolve to the point that they want to add a custom search feature. They may simply want to provide a more seamless experience for users as they search for that one how-to blog post from seven years ago, or they may want to guide an intricate search and drill down through a scientific taxonomy.

LEARN MORE