I can trace the success of the new NCEL website to one moment. Scott (NCEL's Executive Director) and I were brainstorming in the early days of the website design. We were in the middle of creating user journeys. That's where you take previously created user personas (hypothetical people based on real data) and walk them through their ideal online experience.

What brought them to the site? When they arrive, what engages them? And, after leaving, what prompts them to come back and re-engage with the content on the site?

One persona was that of the regular attender/committed member. When we walked them through the user journey, it struck Scott and I immediately. The current site was targeted to visitors only and our persona had no reason to look at the site.

Original NCEL site
Screenshot of the original site cropped just below the header. The call-to-action and the copy are all addressed to visitors.

That realization impacted a lot of the design decisions that we made. Let me share a few examples.

Content Cards

In the header section, the first section at the top of the site, I added two cards fixed to the bottom-right of the website header. The cards display the latest sermon and the latest blog article written by pastor. They're automatically updated by the website CMS (content management system) whenever Scott adds new content to the site. This lets users know that the website is constantly getting updated and is a resource for them to use.

NCEL Website Hero

The "Get Involved" Section

In addition to the "Visit Us" call-to-action that dominated the header of the old website, we added a button that prompts the user to "Get Involved". Clicking on that button speed-scrolls the browser down to a new section that's totally devoted to helping attenders/members participate more intentionally in the life of the church.

The original "Get Involved" section. The final version looks really different from this draft. But, the gridded layout is still a part of the final design.

Branding

Another surprising element of the old website was that it didn't use any of the church's branding. The logo was nowhere to be seen on the site. And, it didn't use any of the fun, bright colors that are a part of the branding system. In fact, the site used a grayscale palette.

To address that, I placed the NCEL logo at the top of each page, in the navigation bar. I also infused each page with the colorful palette, balancing it with a lot of whitespace to keep it from becoming too loud.

A screenshot of the navigation menu. The design is based off of the sign that sits on the church lawn, right off the street corner. The sign uses the same palette and color blocks at the bottom.

Content Management

My favorite thing by far about the site is the content management system. I used Webflow from the CMS. Webflow lets church stakeholders easily add fresh content like sermons, articles, events, teammembers and more. Plus, they can add it without havign to worry about layout or design.

This is the sermon section of the CMS. Once a sermon is uploaded here, it pops up on the live website.

Behind the Scenes

As a resource for other designers and developers, I created 8 videos documenting how I developed the website. If website development piques your interest, start with the first video:

Web Design Principles