Here we’ll look at 7 must-haves for nonprofit websites. My goal is to provide you with a big picture overview, kind of like your own rubric to use when reviewing your own website or while planning your new one to make sure that you have everything you need to make it work for your organization.View the Episode Goodie Bag >> Hosted By
Every year, for I can’t even tell you how long, I’ve reviewed websites from different industries. I do this for a number of reasons: it gives my team and I creative inspiration as we move forward as a web design company. I also want to make sure I’m up on trends and that I understand the creative ways other people are solving problems and communicating with their clients’ audiences. It’s a fun exercise that’s not only really informative to my team but also turns into some of my best-read blog posts.
What this post covers is must-haves for nonprofit websites. I also do website reviews where I “grade” the overall quality of a website — I actually just did one for nonprofit websites: Best Nonprofit Website Designs of 2020. Check it out if you haven’t yet for more web design inspiration.
Before I begin those types of posts, I create myself a rubric to go by. As a person with a background in education raised by educators, this rubric is the lifeline of the evaluation process. When exploring must-haves for a nonprofit website, I use that rubric as a reference and build from there.
The thing is, we work with every one of our nonprofit clients to understand their story and their target market, but the things that make their website great are the same things that make any nonprofit website great. They all have to have certain core components in order to communicate with their target audience and be able to serve their mission.
Here we’ll look at 7 must-haves for nonprofit websites. My goal is to provide you with a big picture overview, kind of like your own rubric to use when reviewing your own website or while planning your new one to make sure that you have everything you need to make it work for your organization.
Without further ado, here are the top 7 must-haves for a nonprofit website:
Right now, I’m not just talking about the mission outlined in your organization’s planning documents. I’m talking about framing it in such a way that’s extremely clear to your visitors and putting it on the home page of your site.
It’s one of the very first things you need to tell people: what do you do? I don’t mean the version that uses flowery language — it might mean something to you, but it doesn’t necessarily mean something to everyone else. You need a dumbed-down, can’t-mistake-it-for-anything-else mission sharing exactly what you do.
No paragraphs. It should be one to two sentences at the very top of your homepage that people see immediately upon arriving on your website. Make it big, make it easy to read, and make it clear.
What difference do you make in the world? Your visitors need to get behind it so you can continue to make the world a better place. This can get really hard, especially if you do a lot of things. You don’t have long to capture someone’s attention, so it should be as specific yet concise as possible. The very fastest way to freak out your visitors — other than having a slow-loading site, which we’ll cover later on — is by making it unclear to them what you do.
People won’t take the time to dig through your site and read every single page to figure out your mission, and they shouldn’t be required to watch a video to understand it. It needs to be clearly written in text, it needs to go front and center on your homepage, and it needs to be something you can communicate in seconds — not minutes, seconds.
I recommend having someone you don’t know read through your mission and give you feedback on whether or not it makes sense to them.
I realize it’s a strange concept because we build websites using a desktop computer, and we test on computers and use desktops ourselves all day at our jobs. But a lot of people are going to come to your website on their smartphones, so your mobile site has to be super simple to navigate.
A lot of the things we do to make websites more interactive doesn’t always translate well to a phone, so you may have to have an alternate interface for your mobile site. Don’t shy away from that! Again, it’s important to make sure your website is easy to use for all visitors at all times and on all devices.
Think about it from an accessibility standpoint; Last year, I heard a great talk at WordCamp where the speaker shared this perspective:
All of you have disabilities at different times in your lives and at different times in your day. Imagine you’re sitting at home with your kids yelling at you and you’re stressed out and all you’re trying to do is find a solution on a website. That’s a disability: you’re stressed out and you’re on a website that’s hard to use and doesn’t suit your needs.
Make sure everyone, from people with disabilities who can’t see to users who are colorblind, can all use your website.
Use a mobile menu just for mobile traffic, don’t use a mobile menu as the main navigation for your website. Some people like to do this and think it’s modern and fancy and keeps the top of the website looking nice and clean. I think that it’s stupid — you have to click more to get to what you want. In case you didn’t know this, a mobile menu doesn’t just drop down automatically on mobile, you have to tap it with your finger to open it, then you have to touch again to get to the page you want. It works the same way on desktop, so you’re adding clicks by using it.
So rather than setting up your navigation to allow visitors to just scroll over the top of your navigation and see a drop down menu and only having to click once to choose where they want to go in your site, you’re basically forcing them to click two, three or more times to get where they’re trying to go.
Make sure your buttons feel like buttons and your links feel like links and that your information is logically organized. All these things are items that make a website easy to use.
If you’re the person responsible for updating your website and it’s not easy to update, your website is not serving your mission — it’s actually doing you a disservice by taking you away from doing the things you need to do on a daily basis to make a difference in the world.
You don’t want a website you have to call a web developer to be able to figure out how to use. Every website we build it at MayeCreate is built so that anyone in my office can update it as well as my client. I only have one senior level programmer, and if he’s the only one who can update our clients’ sites, he’s stuck performing these menial update tasks all day and can’t build the next great thing to help our clients achieve their goals. So make sure that your website is easy for you to use as well.
This one is definitely more specific to nonprofits. Some businesses adopt this methodology as well, but I see it most often on nonprofit websites.
When I say you have to have a story-focused site, I mean using story-rich content to motivate the viewer to get involved with your nonprofit — not just words, but also photos, videos, and people. It needs to look like someone put serious thought and time into making your site look like it’s yours. And for the record, do not use stock photos…it just doesn’t make sense. Your story is not about the weirdos you found out on some stock photo website. (I’m sure they’re very nice people in real life, I’m just saying they’re not the people who can tell your story, cause they’re acting.) Your story is about you — the people and communities you serve, the values you support, the people who help you fulfill your mission. Pulling that story into your content and weaving it throughout your website is important.
Here are two examples of websites that met all the other criteria for a great website but couldn’t make that 100% A grade because they weren’t story-focused websites:
This organization helps educate children in underdeveloped countries. They had great content on their website, it was easy to use and really well-organized, but the thing was missing is those children and the stories and the differences that this organization was making in their lives by educating them. What difference did it make to their families? To their communities? How did these children grow up to be different because of the education they received due to this organization?
It’s possible the organization hasn’t been around long, and let it be said that as a daughter of educators, I absolutely believe their mission is vital to the success of our world. However, I didn’t get to meet those kids. I didn’t get to see their faces or hear the stories of how this program made a difference in their lives. Even if they are a young organization, I think they could have told their own story through telling stories of other lives that have been touched through education, even if they weren’t the ones who provided that education.
This example is a little more surface level. This website has lovely pictures of animals — you can definitely tell people are out there every day snapping photos of these critters. They even had really fun blog content about all of the animals so you can really get to know them.
The thing they didn’t use a lot of is pictures of visitors with the animals or at the zoo. To be completely transparent, I did dig in and I found some eventually, but remember why people go to the zoo: yes, we go because the animals are cool, but we also go because we want to experience the zoo with our friends and family.
I take my kids to the zoo because I want to see their faces when they see the elephant. I want to hear them “Ooh!” and “Awww!” over every animal they see. I’m going because of my children, I’m going because of my family, not entirely because of the animals. By not incorporating those people experiencing the zoo into their photos and into the story of the website, they told the stories of the animals and taking care of them, but they don’t tell the story of the people enjoying the zoo.
You serve more than one audience: there are those you serve, those who donate, and those who volunteer; you might also have board members or offer a membership to your following, so you’d then have organization members.
There are all kinds of different target markets you might have that you have to connect with through your website, and each of them deserves to have content written specifically for them. For example, you should have a donate page that specifically speaks to your donors, a volunteer page speaking to each of the different types of volunteer experiences available through your organization.
You’ll also want a page for each of your services with around 200 words of content speaking to the audiences who would most benefit from that service. They’re looking for a way to improve their existence, and you’re there to do that for them. Include stories and proof of the good work you’re doing, because the people who donate to you and volunteer for you will also be looking at your services pages to see what difference you make in people’s lives.
The goal in each one of these pages is to allow all of the people in each of your target markets to see themselves in your organization, be it as a person you serve or as a donor or a volunteer or a board member — whatever it is, you want them to be able to imagine being a part of what you do. You can enable them to find themselves through the testimonials, photos, stories, benefits and proof you offer through these pages.
Regardless of the target market you’re speaking to, you’ll always want to include a call-to-action inviting visitors to contact or donate or apply on all of these pages. It can go at the bottom of the page or at the top — it’s up to you, but definitely give them what they need to take that next step.
Yeah, okay, I’ve sort of mentioned this above already. But what does an effective donate page mean?
I feel like a good donate page shares a story, a specific need through compelling content, a testimonial, a video, or a photo. Remember, these are not stock photos! These are real pictures.
What I mean by that is when people click on your Donate button and are redirected to another website (maybe you need that as a CRM to keep your donor database clean and seamlessly interfaced, which is awesome), they should feel like that haven’t left your website. When you send someone over to another page to take action on your site that doesn’t feel anything like the site they were on, it’s a red flag telling them, “This doesn’t feel safe. Maybe I shouldn’t do this.” You never want your visitors to have that feeling.
I’m not saying you can’t send people to another link to donate, I’m saying don’t do it if that page looks nothing like it’s a part of your organization. It needs to have your logo on it, part of your story, and an “ask” to donate. (I know it might seem like the Donate page IS the ask, but consider this the follow-through of all the storytelling and portraying you’ve done through the rest of your site. That’s what I mean when I say “throughout” — “throughout” includes your Donate page.)
These options might include giving to a general fund, a specific project, or something that’s recurring. (If you’re allowing very specific donations, make sure that you include the parameters of that on your Donate page.)
When it comes to your actual donation form, you want to ask them for enough information, but not too much. It’s not an application, it’s a donate form, so it needs to be:
By functional, I mean it needs to work logically. For instance, if I hit the Tab key, can I go from field to field from the top to the bottom of the Donate page without a problem? If not, no bueno. Remember, we’re asking people to do something they do every day online now, which is buy something. It just happens to be a donation that’s going to your organization.
Don’t ask them 1000 questions (get their phone number though so you can follow up with them later!), make it short, make it specific, just ask them for their payment information and allow them to give in a way that is easy and streamlined and branded.
That’s very specific, isn’t it? I mean either your Success Stories, your News section, your blog, or even Case Studies. This content should be easily accessible through your main navigation. We have a podcast that I want my followers to listen to, so I have a link to it on our website’s main navigation, because that’s my regularly updated content — I don’t want to hide it, I’m proud of it.
To meet new supporters online, we have to first find them, so one of the ways that you find them is by offering regularly updated content on your website. Creating new podcasts and offerings is how MayeCreate makes new friends online, and this is how you can make new friends, too. You can see when people are looking for answers related to what you do and when they’re in the middle of this buying journey — consumers search online using different words than when they’re at this stage than they do when they’re at the end of the buying journey
Your best donors are the people who have interests and values similar to your organization’s. That’s what keeps them around and makes them want to work with you toward accomplishing your mission. And when do you meet them? When they’re trying to solve problems for themselves, not when they’re ready to come in and be a volunteer, right? Updating your content regularly is how you foster these relationships — by providing solutions to those problems.
Remember the Humane Society dog training example I used in last week’s podcast/blog post on writing content to make and maintain donors? Same applies here as an excellent example of what regularly updated content can do for your organization.
Providing regularly updated content on your site also helps us stay in contact and build relationships with people who we already know. It can fuel our marketing efforts and fill in the content gaps for what goes into our newsletters
The same way you’ll share your story and proof throughout your site, share your content with your visitors the way shopping carts share Featured Products.
Remember how I said that even your nonprofit website is kind of like a shopping cart? There are so many things we can learn from online shopping carts. Think about Amazon. Whenever I’m shopping on Amazon and see something I like but want a variation of it, I scroll down to the Featured Products because those are highly related to the thing that I’m looking at. Then I’m reminded that I’ll need batteries to go with the thing I’m buying, so I also buy the batteries. Amazon wins every time, right?
Consider your website in that same way — for every target market you connect with, give them the relevant content they need to make the decision to have a relationship with you by featuring testimonials, success stories, blog posts, news articles on the pages they relate to most to allow them to make a decision to start a relationship with you. I’m not saying every single one of them — that would be completely overwhelming. However, making sure that you’re including those extra pieces in the right pages is really important, which is something you can do programmatically. You can set up your Service page so that it only features testimonials related to that service, which makes the most sense.
So many people are ignoring this one real hardcore right now. I don’t even understand it. Almost every single website I reviewed scored between a 45 and a 59. Tell me friends, is 59 a passing grade? If your kids brought home of 59, would you say, “That’s good enough. At least it looks pretty.” It doesn’t work, guys.
Onen reason for that could be you don’t know your website is loading slowly.You might be on a great internet connection at your office, so you’d hardly notice. Maybe you’re patient and you’re okay with waiting for it to load because it’s your website. But I’m telling you, other people are not patient and will not wait around while your website takes forever to load.
Another reason could be you don’t know it’s a problem. That should be something your web developer is paying attention to, so check with them and push to make something happen if your site is loading slowly.
You can have the most beautiful website — it can be gorgeous. But if people won’t hang out long enough for it to load, it’s worthless. It’s like having a bunch of phone calls come in with no voice message, like having emails that delete themselves as soon as they come into your inbox. That is what a slow loading website is these days. So we’ve got to tackle this challenge throughout the web design world, and you as clients, you can push for this change by telling your web developers that you want a quick loading website. That comes down to making reasonable choices about what you want your site to do and programming it correctly.
If you want to know how fast your site loads, you can go visit GTMetrics.com. I call him my boyfriend. He’s amazing. It’s free to run your website through their grader, and it’ll let you know how you’re doing. And if you’re in that 45 to 59 range, I think you definitely need to be calling your web designer. If you’re over 80, you should probably call them, too, because there are still things that you can do to improve that score.
There you have it, your 7 nonprofit website must-haves according to me. The idea here is to achieve all of these things with your website to ensure it’s working for your organization in the best way possible, allowing you to face your mission head-on and actually make progress while doing what you do best: making a difference in the world.
© MayeCreate Design 2021 | 573-447-1836 | [email protected] | 108 E Green Meadows Rd STE 9, Columbia, MO 65203