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.
That realization impacted a lot of the design decisions that we made. Let me share a few examples.
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.
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.
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.
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.
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: