Website Architecture and Brand Refresh

Jewish Reconstructionist Congregation

About the Project

Jewish Reconstructionist Congregation (JRC) is a 500-family congregation just north of Chicago that houses an accredited preschool, weekly religious school classes, and more than 90 annual community events including, religious services, concerts, continuing education classes, meetings, and social action projects.

I joined the staff in 2016. One of my goals was to help unify the brand so that the website, email marketing, and promotional materials would work together to better serve the congregation and promote its events.

Defining Challenges

Little room for change

Little about the organization’s website had changed since 2011

Frustratingly, very little on the Drupal site was customizable, and any CSS changes would incur steep “redesign” fees

inconsistent brand identity

As often happens in community-led organizations, most of the imaging was put together by lay leaders and whoever had the time to pitch in.

The result was a very confused brand. Some issues included:

Low resolution images

Mismatched colors without any brand identity or unity

Lack of branding/logos or use of low-rez logos instead of EPS files

A very handmade, thrown-together style with an unintended “wacky” sensibility

Outdated Internet style that made this progressive congregation seem old-fashioned

Nothing captivating or innovative to grab people’s attention

Gathering Stakeholder Input

Balancing the Needs of Many

Leadership and Staff Goals

As the strategic plan continued to be updated, priorities and procedures changed, and technology was one way to streamline these procedures.

The ultimate goal of the leadership was to increase membership, and they wanted our branding to be exciting enough to set us apart and encourage people to visit in person.

The school directors specifically requested a different look for their promotions. They didn’t find the existing branding youthful or fun enough, and they wanted to get away from the stuffy reputation that religious school programming may have.

Member’s Needs

No thought was given to the dramatically different goals of member and non-members users.

Organization was not intuitive, and members often complained about having to dig for information.

Temporary Website Improvements

Making Info Stand Out

Before:

All paragraphs started with bolded plain text instead of H1 or H2 headers. This hurt our SEO and made it difficult to scan. I went through and redefined paragraphs breaks adding H2 headers.

Long blocks of paragraph text hid instructions and usable information. I rewrote many pages to remove “feel good” language, and split paragraphs into bullet lists.

The website didn’t have CSS for buttons—there were only inline text links.

After:

On some pages I created used anchor links to create an alphabetized “directory” so people could jump to the info they were looking for more quickly.

New headings allow people to jump to what they are looking for.

Because there was no CSS for buttons, I created PNGs and hyperlinked them.

The big bold buttons serve as a call to action, and are easier to click on mobile.

Getting Rid of Intro Pages and Multiple Levels

Before:

Already buried in secondary navigation were entire micro-sites where subject had its own page.

Every section had a landing page with unnecessary introductory text.

Entire pages devoted to one small topic could be combined.

Example: Selecting “Ritual” took visitors to a cover page with redundant information and no links.

Buried within that menu was a section with multiple pages and nested menu options.

After:

Eliminated redundant intro pages

Condensed information to fit on one page

Used anchor link menus to help people sift through a dense information

Thinking of the paths of different users

Before:

Resources for members were often intertwined with marketing information.

The site prioritized welcoming new visitors and introducing the community, rather than giving members access to tasks.

Members would become frustrated with the website, and instead would call staff with routine questions.

Example: The tiny link to the member directory was buried in a copy block.

After:

I created quick-links on the home page to frequently searched items like the school schedule and payment forms.

I wrote with different voice and tone for different purposes.

Example: The membership renewal page has clear links to instructions and important information with details below.

Using the words I used language members were actually searching, like “resources for committee chairs,” “How to get stuff done” and “who should I call?”

Towards a New Website

Needing a Change

There were still some problems that couldn’t be solved by simply reorganizing or adding pictures.

An old fashioned, multi-block layout

Not mobile responsive

No control over CSS

To clean up content and nested pages it would be easier organize from scratch

Redesign Option: CRM Integrated Website

The Benefits

Connected with our database and financial system so members could have a curated experience with saved contact info, profiles, and banking information that could auto-populate forms

Very affordable customizable templates

Code injection options and the ability to change CSS settings

Designs that were modern and attractive to better represent the congregation without spending time or money to develop a unique visual design

Preparing For an Eventual Move

I brainstormed some solutions that went beyond temporary fixes.

I drew wireframes possible navigation menus, home pages, and footers.

Good, old-fashioned post-its helped me move things around and rethink which pages could be grouped together.

New Template Options

The CRM system offered many website templates, some more modern than others.

I printed each wireframe to look at the types of blocks that were offered and how they might meet our needs.

The template below was my favorite option because:

It has a nice top navigation with drop-down menus (eliminating landing pages)

There is an optional secondary navigation with attractive buttons

The “dual” intro sections could help split the path of members and non-members above the fold

A Branded MOCK-UP

I mocked-up a version of this template with JRC’s photos and brand colors in Adobe XD.

This design was presented to stakeholders for input and consideration for a customizable, flexible website.