10 Web Design Lessons Gleaned from Our New Site

New OurChurch.Com HomepageMonday night after months of development, testing, and feedback, we launched a major redesign of our website at OurChurch.Com.  The design work is not done – we’re still redesigning the content of several sections of the website, but it’s a big milestone.

Of course, the new design isn’t perfect or anything like that. In fact, integrating the new design into WordPress has been problematic and there are several design/formatting problems here. I think it’s a big step in the right direction (see the old site for comparison), but we are still learning and improving all the time.

So, I thought you might like to hear about some of the changes we made and more importantly why we made them, because it might change the way you think about the design of your own site.

1) Updated the logo. I love the concept of our logo – 2 people joining hands to form the outline of church. And I love our tag line, “Because the church is the people.” But the logo was admittedly very plain. So, we gave the OurChurch.Com logo a more contemporary look by adding some shading and bit of a reflection below it. We also added some swirls behind it, which I think adds some movement and life to it.

Question: What does your logo say about you?

2) Added image rotator to header. With the name OurChurch.Com we need it to be obvious to people who lead schools, ministries and businesses right from the moment they hit our homepage that OurChurch.Com is not just for churches.  We also know from research that people feel most comfortable going someplace where they know there are people like them. Using an image rotator at the top of the page accomplishes both of those goals. When a pastor, teacher, businessperson, or missionary sees those images, we hope they’ll think subconsciously, “I’ll fit in here. These people understand me.”

Question: Are you using images on your site of people in your target demographic?

3) Replaced left side-bar menu with top drop-down menus. There lots of benefits to this change.  First, it gives the site a much cleaner look.  Second, it saves space on the page, which we can use for other things. (Though we do put links to the sub-menu items on the pages within each section.) Third, it’s makes the site easier for the user to navigate.  The entire site navigation is now “above the fold.” People don’t have to scroll down to see all the menu options.  They also don’t have to click into a section to see if the page they’re looking for is in there. That’s going to save most people at least 1 click to get to their destination, and for some people it’s going to prevent the frustration of going in and out of sections of the site looking for a specific page.

Questions: Is your site easy to navigate? Can people quickly find the page they’re looking for?

4) Added site search box. There’s nothing that frustrates website visitors and causes them to leave more than not being able to find the info they’re looking for. Remember that when people go to your site, they are probably multi-tasking and skimming your site.  So, no matter how intuitive you think your navigation menu is and no matter how clearly titled your menu items are, some people are going to get confused. Putting a site search on your site can help some of those people get to their destination. And doing it is pretty easy thanks to Google.

Question: Does your site have a site search feature?

5) Went wider. Another change to get more of our site “above the fold” was to widen the template.  We went from a width of 800 px to 1000 px.  Years ago the conventional wisdom was that because most people were using 800×600 monitors, websites shouldn’t be wider than that otherwise they force people to scroll right to see that part of the page which is really annoying. Well, most people kicked their 800×600 monitors to the curb years ago.  If you quickly look around at major news and portal sites, you’ll see most are about 1000 pix wide.

Question: Could you get more content above the fold by widening your site?

6) Added social media links. On the left side of every page below the navigation menu, you’ll see icons for our Facebook Page, Twitter Profile, blog RSS feed, and news RSS feed.  Social media is here to stay.  People are busy and few are going to remember to return to your site on a regular basis. If you want have an ongoing connection with people and want them to return to your site, you’ve got to connect with them through social media sites so your content is in their daily Facebook, Twitter, and RSS streams.  And you’ve got to make finding you on social media sites really obvious.

Questions: Are you connecting with people through social media? Are you making links to your social media profiles prominent on your site?

7) Separated Community Content from Website Services. If you look at our old homepage you’ll notice at that the bottom half of the page was a community section with links to OCC announcements, blog articles, and forum posts. We made a fundamental change in site architecture by removing those elements from the homepage and creating a new community section homepage. Why?

Every item you add to a page takes away attention from the items already there.  We decided our homepage should focus on the needs of first-time visitors over those of existing members and visitors.  When a person comes to our homepage for the first time, we want them to focus on the website services we offer. Even though they were below the fold, the community links could have been a distraction. It’s the old adage, “Less is more.”

Question: Is your homepage designed primarily for the first-time visitor?

8) Removed ads from homepage. We removed the ads from the homepage for same reason – they were a distraction. Additionally, the ads detracted from the look of our homepage, and for people who are looking to create an awesome website or have one created for them, having their first impression of OurChurch.Com be this busy page with ads flashing everywhere was probably not the best idea.   In order to accommodate our sponsors, we did add text links further down on the page. Interestingly, so far those links are getting better click through rates than the graphic ads on the old home page. It’s early, but so far it looks like a win-win.

Question: Are you distracting your visitors or giving them a poor first impression by putting ads on your site?

9) Added color to the homepage. With the new homepage, we moved away from the predominantly red/gray color scheme we had been using and added other colors. I think the added color gives the site a more vibrant look.

Question: What impression are you giving visitors through the color scheme used on your site?

10) Made improvements based on usability testing. One of the new and exciting things we did with this design before it’s launch was usability testing. You may be saying, “Testing… exciting? Yeah, right.”  But I am totally serious. We brought in 3 people who had never seen the site before and hadn’t even heard of OurChurch.Com, had them do a few things, and asked them questions about the site. We learned a ton from those tests. There were things that were confusing or gave the wrong impression that we previously had no idea about and were able to correct those things. I know we’re giving people a much better experience on our site than they would have without the testing.

Question: Have you done any usability testing on your site?

Do any of these changes strike a chord with you?  Do they motivate you to make any changes to your site?


Paul Steinbrueck is co-founder and CEO of OurChurch.Com, elder of CypressMeadows.org, husband, father of 3, blogger. You can follow him on Twitter at @PaulSteinbrueck and add him to your circles at Google+ as +Paul Steinbrueck.

12 Responses to “10 Web Design Lessons Gleaned from Our New Site”

  1. I’d like to know how you got those graphics / columns on your home page. I can’t seem to figure out how to get text on top of a graphic. . .

    Chris.

  2. How can I reformat my current website with these new designs?
    Keeney

  3. Hey, Chris. I’m the head web Designer for OurChurch.Com, so I wanted to answer your question. The most common way to put text on top of a graphic is to use a background graphic. This is usually achieved by using a set of coding called CSS (Cascading Style Sheet).

    The best resource on CSS out there (in my opinion) is W3Schools.com. Here is their webpage on CSS Backgrounds:
    http://www.w3schools.com/css/css_background.asp

  4. I pray that you continue to improve the website so that many more people will come to Christ. Kenny Merriken

  5. I would like to know how to widen the template. We recently went to the add-free option, but the text on my site does not come close to filling the screen even though the template color bar does go all the way across. Is there something I can change, or at least some header code I can use, to widen the text margin? I haven’t had time to research this yet.

    Thank you.

  6. Jean, your site was created with our NE1 web builder which does not have the capacity to widen the site. I would suggest selecting a wider template or you could have us create a custom template for you. More info on the customization services is available at:
    http://www.ourchurch.com/hosting/design-services.php

  7. Hello gentleman. I really love your new look. You are hitting on all cylinders with the change. I personally thought the previous site was sorta dry as it related to the color scheme but not it gets my attention. I look forward to networking with Our Church as it relates to proclaiming the Gospel, advertisment partnerships and anything else thats all to the glory of God. Be Blessed.
    Minister, Rodney Nigel Mayfield
    President/CEO
    Click4Prayer.org

  8. Thanks Rodney, we appreciate the feedback and look forward to networking with you too.

  9. Somewhere out there are many of us smaller churchs who do not have the budget nor the technology to be a part of this great tool called the web. Keep up the good work, maybe someday there will be tool for us to use so we to can touch lives through this medium. Let’s always keep Christ at the center.

  10. Bill, do you know that OurChurch.Com offers free websites?

    Beyond that, I think any U.S. church no matter how small that is really passionate about reaching people in their community can afford $10-$15 a month for site that has its own domain name, no ads, etc.

  11. If I want to take advantage of these new ways to build my Web site, how do I do away with what I’ve started and begin with the new format?

  12. Most of the improvement described in this post can be done by redesigning the template for your website. It looks like you’ve built your website with our NE1 Web Builder. We can create a new, custom template for your site if you like. This page describes the options and costs:

    http://www.ourchurch.com/hosting/design-services.php