Church Website Redesign

What I did:

I reorganized the information architecture of the site, researched comparable websites, and used the data to refresh the site to have a modern and welcoming feel.

Tools I used:

Index cards (paper card sort)
Provenbyusers.com (online card sort)
Affinity Designer
Google Docs
Paper, pencil 

The Problem

A local church needed a website refresh. Their website was looking outdated, and navigating the menu was overly complicated and cluttered. Some of the menu items were redundant and unnecessary.

Below, you can see that the main page has lots of empty space. The banner image does not stretch, and is scaling incorrectly (notice the scroll bars). Additionally, the background is a textured "wallpaper" that calls to mind websites built decades ago. 

In the screenshot below you can see an example of a menu that is buried 3 layers deep (4 if you consider the top navbar to be itself a navigation layer), illustrating the menu's complexity. 

I set out to improve the information architecture, as well as refresh the look and feel of the site.

Competitive Analysis

I looked at seven churches to compare their websites and glean ideas. I chose ones that are modern and have a strong sense of identity, since that is the direction MUMC was trying to move in.

Seacoast

http://www.seacoast.org/

Newspring

https://newspring.cc

Willow Creek

https://www.willowcreek.org

Brookwood

http://www.brookwoodchurch.org

Lakewood

http://www.lakewoodchurch.com

Saddleback

http://saddleback.com

Below is a summary of my findings.  You can read my original, more detailed write-up, here.

User Research

I conducted an open card sort where I wrote all of the church's menu items on index cards and recruited users to sort them into categories. Then they named the categories. Three were in-person paper card sorts, and one was remote, using the website ProvenByUsers.com. 

I entered the data for the three paper card sorts into Excel, and also into the ProvenByUsers database, to analyze the results. 

After a detailed analysis of the sites, reflection upon the user data, and comparison with other sites (detailed below)I standardized my catogories into the following: Visit, Connect, Learn, Serve, and Plan. The following graphs show the data with these standardized catogories.

Tree analysis (dendogram)

Group x Cards (“heat map”)

Similarity Matrix

Sitemap

With my user data analyzed, I created a new sitemap.

Wireframes

I began by sketching the site out in my notebook.

At the top is the navigation menu, populated by the categories and structure I derived from user testing. 

Next, I wanted a large "hero image" that projected a sense of welcome and invitation. This is something that my competitive analysis showed the benefit of.

Below that, I put an "upcoming events" section, because I wanted visitors to know that there is a lot going on at the church and make it easy to get involved.

Continuing on, there is a space for featured items that staff can rotate as appropriate. 

Finally, there is a large map to make it easy for visitors to find the church, along with service times.

Once my basic structure was in place, I continued on to a digital wireframe of the site.

Style Guide

Guided by findings in my competitive analysis, I chose colors that were deep, calm, and inviting. 

For a font I used Open Sans. I selected it for its clean, modern look while still having good readability.

Mockup

Finally, I created a higher fidelity mockup of what the final site could look like. 

Conclusion

I was able to change the church's original site - which was congested with menu items and hampered by an outdated appearance - into a more user-friendly, modern looking site. It will help visitors feel welcome and give them a sense of the many opportunities for service and community.