Access 130+ new insights and fundraising trends to build donor connections that last. Experience the report.

The Essential Ingredients of Effective Nonprofit Web Design


By Sean Chisholm

Group of people working on a whiteboard

Request a Demo

Learn how top nonprofits use Classy to power their fundraising.

Schedule a Demo
Published July 31, 2013 Reading Time: 5 minutes
Man against brick wall

Ross Campbell

UX Developer

You may not realize it, but your nonprofit’s website dramatically affects the way people view your organization. The presentation, clarity, and even the colors you use will influence the way people understand and engage with your content. More importantly, your website design may very well determine whether or not someone forms a positive first impression of your organization. It will also influence whether your visitors ultimately decide to make donations or become fundraisers.

It’s really easy to dismiss the need for good web design by claiming that resources aren’t available to focus on this particular need. However, as technology has improved, it has become cheaper and easier than ever to create a website that not only presents your organization in a positive light, but brings in more money and more new donors than ever before.

To help you get the most out of your website, StayClassy recently teamed up with the creative geniuses at Liberty in North Korea and Charity Dynamics to put together a webinar that outlines everything you need to know, from start to finish, to improve your website. Creating a great website is something that takes time, careful planning, and continuous refinement, BUT it’s also something that is accessible to any nonprofit, on any budget, with any level of technological savviness.

Here are some tips (there’s more detail in the full webinar video below) that are valuable to any nonprofit professional looking to refine or rebuild a nonprofit website:

1. Focus on Fundamentals

Design around specific goals, or actions you would like visitors to take:

  • Donate
  • Fundraise
  • Sign up for Newsletter
  • “Like” us on Facebook
  • Always tell your story simply and clearly
  • Make your “calls to action” (vital buttons and links ) obvious and bring them to the forefront!
  • Iterate continually upon your design and edge towards your goals defined above. Seek to improve clarity and usability, and maximize the value you get from each visitor.

2. Your Website Should be an Enabler

Your website should empower visitors to engage with your mission and the work that you’re doing. This engagement can be thought of as a funnel with various levels of engagement at different points of the funnel. Your website’s goal should be to move folks along this funnel of engagement, from very basic levels of awareness to progressively deeper levels of involvement.

Awareness Funnel

3. Good Design can be Felt

You may not be able to articulate the elements of good design, but you know it when you see it, and the experience can be visceral. For instance, take a look at the image below.

Outdated Looking Web Page

More than likely, this site comes off as poorly designed. That’s not an analytical conclusion; it’s a gut-level insight that happens instantaneously. By breaking the site down into its key elements, however, you can begin to understand why it feels that way. It’s cluttered and confusing and there’s a general lack of emotion and life on the site. More importantly, there is absolutely no mention of this organization’s mission and story. There’s nothing that clearly mentions what it is that this organization actually does. The purpose of your website should be to inspire and encourage further action from a visitor — whether that’s a visitor clicking “learn more” or actually donating directly on your site. Clearly, this is not being accomplished in the example above.

By contrast, well-designed nonprofit websites are incredibly clear and organized, infused with a sense of mission and story, and encourage “next steps” for visitors. Take a look at Charity Water’s homepage below.

Clean Water Fundraiser

It’s immediately apparent what Charity Water does. In fact, their site’s headline reads : “Donate And Give Clean Water.” They’ve done an exceptional job putting their mission statement front and center. They’ve also placed the “calls to action” at the forefront of their homepage. They don’t hide these calls to action; they provide clear paths for visitors. Additionally, Charity Water’s site is amazingly clean and uncluttered. There’s a natural separation between content sections, and there’s no sign of that “cramped” and “cluttered” feeling from the example above.

Okay great, design is important. So how do you get started?

Because there’s so much to try and digest when it comes to redesigning your website, it’s always best to start small. Identify your organization’s mission and story and what it is that you would like visitors to do: donate, become members, etc. Then start thinking about how you’d like your visitors to move through your site. These initial steps can all be done as a rough brainstorm with your team.

Next, it’s beneficial to start sketching out some of your ideas. What is your vision for the website? You can begin to sketch initial concepts for the site’s layout and presentation. The great part about paper sketches is that there’s absolutely no barrier to entry at this stage – anyone can do it! Just pick up a notepad, a pen, and put your ideas onto paper.

Design Wireframe Drawing

After sketching out your ideas, develop some more polished versions by “wire-framing” your site’s layout, or outlining it in digital form. You can use software as simple as Microsoft Paint or as advanced as Adobe Photoshop, and there are a number of free tools available online that can help out as well. The wire-framing stage is a great time to play with where your content will live and how visitors will flow through, and be able to engage with, that content. Fight the urge to add too much color and style at this point – there’ll be plenty of time for that later. Not only are wireframes a great (and inexpensive) way to solidify designs in your own mind, they make a fantastic mode of communication to convey those designs to whomever will ultimately be building your website!

Design Wireframe

Once you have the layout and elements in place, your wireframes can progressively receive more polish, color, and imagery, as they make their way to fully fleshed-out designs. The wireframes will often guide the direction of the final designs, but it’s here in this final set of steps that your charity’s color palette will get identified, real images will be inserted onto the page, and the vital written content surrounding your organization, mission, and story will be added.

Free North Korea Page

Obviously, not every team has an in-house web designer or developer but thinking in detail about these topics will help to advance any discussion that you have with the web developer and designer that you end up using. Your website’s final design doesn’t emerge from a black box of magical artistry. It comes from a systematic series of steps– from verbal discussions, to paper sketches, to pixels on the screen. Dive into a bit of the design process and have fun improving your organization’s web presence!

Check Out the Full Webinar:

Subscribe to the Classy Blog

Get the latest fundraising tips, trends, and ideas in your inbox.

Thank you for subscribing

You signed up for emails from Classy

Request a Demo

Learn how top nonprofits use Classy to power their fundraising.

Schedule a Demo

Pin It on Pinterest