What do a first date, a job interview, a home showing, and your website all have in common? It’s not a trick question, nor is it tricky. If you think for a few seconds, the term “first impressions” will come to mind, I’m sure.

I see the light bulb turning on right now.

As much as we might wish they didn’t, appearances and first impressions matter, and in each of the cases above, I’d go so far as to say a first impression can make or break the deal.

When a potential donor stumbles across your organization and wants to check you out before making a donation, what are they going to do first? Go online. In fact, studies have shown that over 65% of donors go to an organization’s website before deciding to donate. They’re going to Google your nonprofit, land on your site, and instantly make a judgment about your organization. Within seconds.

If your nonprofit website looks boring, confusing, or out of touch, or the donors visiting it just simply don’t "get" you, they’ll likely move on. It might not seem fair, but that’s how it is in a world with shrinking attention spans and split-second decisions. This is why your nonprofit web design is so important. It’s not just the face of your organization (although it most definitely is that) -- it can literally be a make-or-break factor in whether or not a supporter gives or goes.

Your design must establish an immediate connection with a user. This is fundamentally important if you want to engage in a meaningful way with your audience. But before you think that means hiring an expensive agency to create a “wow” factor on your website, let me be clear: Great design does not mean leaving your online visitors breathless with its beauty. You don’t establish connection with by spending gazillions on a professional designer.

Simply put, a great website design should clearly tell the story of your organization. If people come to our website and they get what we’re about because we've told our story well through the use of images, text, online tools and other elements, then we’ve done our job. We’ve established a connection.

Here are some key factors to consider when creating a site design that connects with your end users.

1) Start with a well-executed brand.

Before we get into the specifics of your website’s design, let’s talk for a minute about your nonprofit’s brand. This is really where the foundation of great nonprofit web design begins.

Your logo, your marketing materials (from direct mail to email), and your social media profiles -- everything you put out into the world about your organization should all look like it actually came from (gasp) the same organization. It should all work together and conform to your brand’s colors, design style, voice, messaging, and personality.

The fancy term for this is integrated marketing. Once you are sure that you have a well-executed brand, you’ll have a solid foundation on which to build your website and an established direction for its design.

Think of your NPO’s website as the hub of your marketing efforts: You have people coming and going from your site via various channels (your Facebook page, an email you sent out, a postcard you just dropped, etc.). Every line of communication and every touch point with your organization should look consistent, sound like you and exude your brand’s personality.

Once you are confident that this is true for your organization, you can start to focus on the specifics of your perfect nonprofit website.

2) Get your eyes off yourself and focus on your donors.

One of the biggest mistakes that many nonprofits make with their websites is they design it from the inside out. In other words, they create a site that resonates with those inside the organization, not the people they want to reach.

So if a potential donor lands on your site and is met with a lot of industry jargon, acronyms, nonprofit speak, and stories about how great you are, do you think they’re going to connect?

Your staff members might -- and maybe your board members -- but you’ll lose a big part of the audience that you’re trying to engage with and your website simply won’t work for you.

Everything from your text to your images to your online tools needs to come together and create a cohesive design that says, “Here’s who we are, this is what we do, and here’s why you matter to us.” Again, it’s about connection.

3) Engage with real photos of real people. 

I don’t want to knock stock photography at all -- it has its purpose, maybe even in a few spots on your website. But its purpose is not to tell your organization’s story. You are a living, breathing organization that impacts people and changes lives. Don’t sell yourself short with stock images that don’t really speak to your cause.

Instead, use images of real people -- either those who volunteer, serve, or have been served by your organization. You may even be able to call in a favor from a photographer in your area to take some professional shots.

Suffice it to say, though, the images you use are crucial in establishing a connection with your visitors. If you want to tug on some heartstrings (and we all do), get some great shots of the people whose lives you’ve changed, and tell your story through the use of those images.

4) Make it easy for people to do stuff.

Great nonprofit web design isn’t just about being another pretty face in the crowd. Yes, you want to have engaging donor-focused content and pictures that tell a thousand words. But in the world of websites, design goes deeper than just painting a pretty picture.

Once someone lands on your site and you’ve sufficiently motivated them to take action, you need to have the tools (also called functionality) to enable them to act. In other words, our websites should serve a purpose and offer something substantial to the people who land on them.

Think of good design as a two-way conversation: We tell our story, and then we ask our audience to connect and engage with us in a variety of ways. But it’s up to us to provide the tools to connect and engage.

This means not only giving users the ability to donate online, but also to maybe view an event calendar, register for an event, sign up to volunteer, access a private area for key people (like board members), subscribe to our newsletter, and more.

Here’s a key thing to remember about functionality: You most likely won’t have just one type of end user. You may have supporters, volunteers, media professionals, prospective donors, other nonprofit professionals, and people curious about your cause all visiting your website, each one looking for something different. It’s important to look at your site through the eyes of each group and ask, “Which tools would that segment of our audience want?” And then be sure to incorporate that functionality into the design.

5) Consider Kevin Bacon.

Well, not him exactly. Rather, consider “six degrees of Kevin Bacon.” But in your case, let’s make it three. Confused? Let me explain.

The “six degrees of Kevin Bacon” theory suggests that anyone who’s worked in Hollywood is just six steps away from knowing Kevin Bacon. This is based on the “six degrees of separation” philosophy that says any two people on earth are just six (or fewer) acquaintance links apart.

Now, let’s turn to your website. Pick a “Kevin Bacon” on your site. It could be your event calendar, your nonprofit blog, a resource library, or a registration page -- anything that might be an intended destination for any particular user. Good web design will make it possible for any user to get to his intended destination in just three clicks, not six.

So, a good rule of thumb to follow is “three degrees of separation.” Don’t make any of your online visitors work harder than three clicks in order to get where they want to go.

People are busy, and when they’re online, their attention spans are short. They move quickly. Some people might prefer the scenic route, but it’s best to assume that most users want quick and easy navigation that allows them to get to their destination in just a few clicks. Help them get where they want to go with plenty of links, buttons, and clear directions pointing them in the right direction.

It comes down to this: Great nonprofit web design is about your audience -- communicating, connecting, and engaging with them in a way that makes sense to them, and then enabling them to take action. Tell your story in their language, and then invite them to become a part of it. Do that and you’ll be well on your way to creating the type of impact and change you wish to see in the world.

What other key factors do you find in effective nonprofit website design?

Randy Hawthorne is the Publisher of Nonprofit Hub. As a Professional Certified Marketer, he feeds his passions of marketing and education by working with nonprofits to understand marketing principles to grow their organizations. Randy frequently speaks on and teaches marketing topics to numerous groups, including the American Marketing Association.

HubSpot Academy

Originally published Dec 13, 2013 6:00:00 PM, updated August 09 2017

Topics:

Nonprofit Marketing