Northwestern PA Lutheran Synod

The Northwestern Pennsylvania Lutheran Synod is made up of 70 congregations across 15 counties in northwestern Pennsylvania. As part of the Evangelical Lutheran Church of America, the Synod works to connect pastors and their congregations, support shared ministry, and facilitate events and continuing education.

When they came to me in hopes of getting a new website, it was because they’d outgrown their self-built Weebly site. The site was difficult to update and the “look and feel” was boxy and outdated. They wanted a more modern, sleek website that would show off their new brand and more effectively communicate their work and mission.

This project took us over a year to complete! The Synod has a very small staff and underwent a leadership change partway through the project that required us to pause, let things settle, and intentionally think through everything to be sure the new website aligned with values and their evolving needs. The finished website was well worth every moment, and I’m so proud of the Synod staff for sticking with it.

Read on to see how it all came together!

The old website

Built on Weebly many years ago, the old website was difficult for staff to update. Weebly’s builder can be difficult to work with, and staff found themselves using wonky solutions to get the necessary information onto the site. As a result, many of the pages contained outdated information and the “look and feel” was cluttered, boxy, and claustrophobic.

Worse, the old website had no clear structure. The main navigation contained extremely long drop-down menus that extended past the bottom edge of the site, making it hard to use on desktop and almost impossible to use on a mobile device. Headings and paragraphs were mixed together in a way that made it hard for visitors and search engines to understand the site. Calls to action were scarce and often appeared in the form of text links in a color that didn’t pass contrast checks for accessibility and readability.

Those are all wonderful opportunities! I knew that the Synod’s updated branding would go a long way toward addressing the “look and feel” issues. A modern, better website builder would help us address the problems with buttons and text links. And I knew we could streamline the site’s menu to make it easier for visitors to find the information they needed. Sprinkle in some new wording and updated photos? Voila! A shiny new website that would help the Synod effectively communicate its mission.

Here’s a look at where we started:

The web design process

The Synod staff worked with a graphic designer to create a bright, vibrant new brand. They had new logos, new colors, and an updated font palette. And last but not least, they had a handful of updated photos from the new Bishop’s installation, along with updated headshots for many of the clergy and lay leaders throughout the Synod. Glorious!

While much of the written content from the Synod’s old website would migrate to the new one, I knew the Synod’s staff wanted to take the opportunity to refresh the wording. To make sure that rewriting such a large site wouldn’t feel overwhelming, I created a wording outline so they could write and refine new headlines and paragraphs.

Once we had all of the photos, wording, and PDFs for visitors to download, it was time to play!

I pulled the color palette straight from the Synod’s new logo. Along with white and charcoal, I anchored the design with a vibrant royal blue and a rich navy blue. A light grey added some depth and design options. Last but not least, I pulled a bright mustard yellow from their logo and used it as an accent color on some subtle hover effects. I also used their logo mark, which resembles a stained glass window, as a standalone design element.

From there, the rest of the design fell into place. It includes:

• Clear calls-to-action and plenty of internal linking between pages to help draw visitors into the site and explore all that the Synod offers;

• Gorgeous stock photos of stained glass windows, used across the site as “banner” backgrounds on page headings;

• Expandable accordions to convey large quantities of information without feeling cluttered or claustrophobic;

• Liberal use of anchor links, especially on the Find A Congregation page, to help visitors quickly and easily scroll right to the information they’re looking for;

• Custom code to provide across-the-board styling for button and list card hovers, text links, and more

Take a look at the Synod’s new website home page!