How to create a great charity website homepage

If you want to find out how to take a content-first approach to a great charity website homepage, this video is a good place to start. In 20 minutes, you’ll get an introduction to designing homepage content:

• The most common homepage content elements
• What should come first on the page
• How much to put on the page
• A simple framework for homepage content
• Common mistakes to avoid
• Why getting your stakeholders on board is crucial

This video was filmed for my ‘What makes a good charity website homepage?’ event. It’s based on a survey of 30 charity websites. Read about the charity homepage survey.

Video transcript

Let’s talk about what makes a good charity website homepage.

It’s no easy task deciding what to put on your homepage. This seems to be one of those content challenges that people dread a bit. You know, like writing your CV or your resume.

All different types of organisations struggle with it in my experience, but there seems to be something uniquely challenging about this for charities. And it’s something that I’ve been thinking about a lot recently.

This started back in April of 2022. I was working with one of my clients on the content design for their new homepage. As part of the project, they asked me to gather some examples of great homepages to use for inspiration.

So I did what I often do and outsourced some of the task to Twitter. I got loads of replies to this tweet. Some were examples of charities that have great homepage is clear, well, structured, accessible, and compelling. And we’re going to look at some of those in a moment. Some examples that people shared with me, I actually thought were poor. They were complex, they were gimmicky, and they put the focus on flashy interactive elements, rather than on communicating in a user focused way.

But the thing that stood out was lots and lots and lots of questions. Questions like:

• How can we do a great job with a small budget
• Should it be about branding or navigation
• How much content should be on the page?
• How can we balance support or services against fundraising?

And then a really big question that underpins a lot of this:

• How to balance user needs with stakeholder ones.

I thought that were great questions. So I set out to find some answers, and come up with an answer to the question what makes a good charity website homepage.

I carried out a survey of 30 different sites. I looked at the content elements that were included, the order they appeared in, and the number of elements on the page. And from that research, I came up with three simple principles for good homepage content. And that’s what I’m going to share with you now.

About the survey

To kick off, let’s talk about the survey a little bit. I wanted to get an idea of the state of play, what are different charities doing, what’s the best practice, and what are some of the common mistakes that people are making.

So my first step was to create a list, I included some of the examples of charities that people shared with me on Twitter, and I added a few more names to the list to make it a bit more balanced.

I wanted to get a spread of different types of charities. So you can see the makeup of the panel here. Social and public services does dominate. But this is a really broad category, which covers some very diverse organisations. So I think it’s quite natural that it is the largest category in the survey. I also tried to look at a range of different income levels, from those with an income of about half a million pounds to some of the names with the biggest revenue around, which is why that 10 million plus category is broad, it goes up very, very high.

I also looked at scope, whether they were local, national or international. And it’s worth saying at this point that I focused on charities that are either based in the UK or operate in the UK, because that’s where I live, that’s where my knowledge lies.

And finally, I categorised whether the charity qualified as a household name using the YouGov brand tracker as a reference point. I had a theory that this might make a difference to how charities approach their homepage, and it did. And we’ll talk about that a bit more in a moment.

Once I had that list of charities, I looked at each homepage on desktop using Chrome, I listed what I found on the page in a spreadsheet. I excluded the navigation, header and footer, and anything in popups to keep things simple. And I focused not on the design, but on the content information and the messaging.

Finally, I reviewed some sites using a browser plugin called Silktide, which helps you simulate different types of disabilities and impairments. So things like what it’s like to navigate the page using a screen reader.

Content elements

When I’d gone through all the homepages and listed all the different content that I found, I turned it into a really simple taxonomy. And I found that I could boil it down to 53 common content elements and 10 overarching categories.

I’m not going to go through all of those in detail now, because that will take quite a long time. But I’ll give you a summary in the next few slides. And the full details are on my website if you want to take a look. If this is something you might find useful, there’s also a library of all these content elements with examples in the homepage content toolkit for sale on my website.

So first up we’ve got about us content, which includes things like a tagline, stats and areas of work.

Editorial content, which is news, blog posts, things like stories or case studies.

Donate content, which is different ways that people can donate whether that’s money or something like goods.

Then we’ve got fundraising content, shop or buy content, which could be for online shops, offline shops and also standalone products as well.

Volunteer content with opportunities to volunteer or become a member.

Campaign content like petitions, events and awareness days.

Service content to help users access services online or in real life.

Advice and information content linking to different sources of support, including website content, helplines, and resources.

And also other kinds of content as well, that didn’t fit neatly into one of the categories, things like surveys, competitions, partner logos, and so on.

Most common homepage content elements

These were the 10 most commonly used elements. So number one, news and blog, two, a tagline, mission or description, three, donate for email subscription, five, a campaign or petition, six volunteer recruitment, seven and eight is two different types of information help and advice, the first one being links to topics or category pages, the second being links to specific pieces of content. Then nine about us or what we do and 10 get involved or support us. And I’m going to look at the top two in a bit more detail now.

The first one is news or blog links. So this was on 73% of home pages. And I was surprised that this was so high up on the list, but the more I thought about it, the more it made sense. News is a very common content type that appears on almost all charity and nonprofit websites. So it follows that it would appear on a lot of home pages. Interestingly, all but one of the charities that didn’t use the news or blog posts link elements from their homepage for larger charities with an income over 10 million. I can’t say for sure why this might be but I have a couple of theories.

The first is that large charities might have more messages that they want to share or more goals that they’re focused on and in comparison use might feel lower priority.

The second is that charities that invest more in content design, so the bigger charities, they might have more specialised content types at their disposal. Whereas smaller charities who are less mature in their approach to content strategy content design, might be relying on new stories or blog posts to share lots of different types of story or message.

Putting homepages to one side for the moment, if you find that you are kind of cramming all sorts of content into your news section or your blog, it could be a really good signal that it’s actually time to pause, review the different content types that you’ve got on your site or potentially introduce some new ones, so that you’ve got a bit more freedom, a bit more wiggle room in terms of the content that you’re producing. I did notice that quite a few home pages that use news have stories from months and sometimes even years ago, under the heading of latest news. This can undermine your credibility and make your site look out of date to users. So I’d say to only use this element if you’re confident that you’re going to have a flow of fresh news stories or blog post features. If your posts are going to be more sporadic, then consider using something else instead.

Second most common was a tagline mission, or description, which appeared on 63% of home pages. I think this is quite essential to have on your homepage, so I was surprised that it wasn’t more common.

Again, it was the higher income charities that didn’t include this. All but one of the charities that weren’t using it had an income over £10m. 60% qualified as household names.

Why? Well, again, this is just a theory, but I think it could be charities that are well established and well known feel more confident that their users will know who they are and what they do before they hit the homepage.

Alternatively, it could be that they feel they demonstrate this through other content elements they’ve got on the homepage and that they don’t need to explicitly state it.

If you are going to use this element, I would urge you to make sure that message is user oriented and not completely brand focused. Make sure it reflects what users need to know about you, not just what you want to tell them.

Using the word ‘we’ a lot is a good indicator that you might be too focused on what you want to say, rather than what your users actually care about and what they need to hear from you.

Yes, you need to say who you are and what you do. And that might involve using the word ‘we’ once or twice, but if you can, you should try and do this by speaking to the user directly, focusing on their needs and goals.

This is a totally made up example, but something like ‘here to listen and support you through cancer treatment and beyond’ is much more appealing and user focused and something like ‘we’re Chippinghampton’s number one cancer charity’ which might make somebody with cancer think ‘So what? Why do I care that you’re the number one? What are you going to do for me?’

First content elements on the homepage

Out of all the elements, only 10 appeared as the first one on the homepage. They were the tagline mission or description, donate, campaign or petition, fundraising events, the two different types of info help or advice, helpline or advice line, services, funding and an image carousel.

This is a diverse list and what I think it illustrates is that there’s no single way to do a homepage. There’s no rule that says that donate has to be at the top. It comes down to what matters most to your users and your organisation.

But having said that, I think there are two things that I would caution against having at the top of the page.

The first one is images without text. I came across quite a few sites where the homepage was completely dominated before the scroll by a big hero image and there wasn’t any text visible immediately at all. And that’s a problem because you only have a few seconds to get someone’s attention and signal to them that they’re in the right place. Images can have a big impact and they’re really important, but they work best with words to draw the user in. An image used on its own can be quite ambiguous. It’s open to interpretation so it’s a risk to assume that people are going to extract the meaning that you want them to extract.

Worse still is having text in an image with no alt text. Someone who’s blind, visually impaired or uses a screen reader for another reason, just won’t be able to read it. And this was still quite common, unfortunately, on lots of the homepages that I looked at.

The second thing that I would avoid using at the top of the page — or anywhere really — is a carousel. Carousels are traditionally a popular solution for homepages because they give you the ability to put more than one thing at the top of the page. But the problem with them is that they’re kind of giving you a get out clause from solving the problem of what’s really important to focus on. And I think a lot of the time, the real reason they’re used is to pacify stakeholders. Oh, yeah, you can tell three stakeholders that they can all have the top spot on the page.

There’s a cost to using carousels, and it’s to the user experience. There are three problems with them from that point of view.

Firstly, people don’t tend to click on them because they think of them as adverts. I’ve seen this time and time again in user testing, people scroll straight past the thing they’re looking for, because it’s in a carousel and they assume it’s an ad and they’ve got used to phasing out ads just completely blanking them and ignoring them.

Secondly, they’re often not accessible for people who navigate using a keyboard rather than a mouse.

And thirdly, they can create a situation where you have an overwhelming amount of information for users, which can be really off putting, because you’re essentially layering up, you know, rather than having one thing in this spot on the page, you’ve got three or four.

How much content to put on the homepage

Which leads me on to the number of elements.

So the last thing that I did was counted the number of elements on the homepages.

The average number of elements was nine, the highest was 13, and the lowest was four. And given how long and complex, some homepages can be this might not sound like much. But it’s worth noting that where a content block had repetition, I counted that as one element.

So for example, if there was a content block that linked to three news stories, I would count that as one news element rather than three news elements.

Getting the amount of content right is all about balance, you need to reflect the top tasks that your users come to your homepage with. And if you have multiple priority audiences, then it’s okay to serve more than one key user and one key user need.

But having loads and loads of content and loads and loads of call to actions can overwhelm your users and make it harder for them to find what they’re looking for.

This is a quote from someone who replied to my initial tweet. Some people who are neurodivergent or some people who are disabled might find this situation where there’s loads and loads of content particularly challenging. I’ve seen users approach a website like it’s a to do list they’ve been given, they need to read every bit of copy, click every link, so it’s not hard to see why a complex homepage can feel daunting.

What you need to do is focus on meeting key user needs and serving top tasks and cut anything that adds clutter or distracting noise to the page.

To do this, you’re going to need to have principles to govern your decision making about what goes on the page and why and crucially, what doesn’t go on the page.

The other thing you’re going to need is a really good working relationship with your stakeholders.

Unfortunately, there’s no magic formula for a great homepage. What’s great for one charity will be totally different to what’s great for another. However, there are three simple principles that you can adopt to help you design better homepage content.

The first is know your users and their needs. Find out who comes to your homepage and what they’re looking for and use that to guide the content you choose.

The second is reflect your strategy as well as reflecting user needs. Your homepage needs to reflect your strategy as an organisation. Make sure it’s supporting relevant goals and objectives.

Thirdly, remember, it’s about navigation. Your homepage isn’t the destination. People don’t come there to see your homepage itself. They come there to get somewhere else. So make it easy for them.

Pretty straightforward, right? But of course, it’s easier said than done to keep these principles front of mind when you’re actually in the process of working on your homepage, which leads me to the other thing that can make a huge difference to the success or failure of your homepage and to how easy or not is to apply those principles. And that stakeholders.

Pretty much every problem in content comes down to stakeholders at the end of the day. Everybody wants their thing on the homepage. And the more senior stakeholder, the less likely they are to look at the rest of your site in my experience.

I spoke to a charity director not that long ago, who was giving me a long list of things they didn’t like about their website. But when I dug deeper, I realised that everything they were saying was just based on looking at the homepage. And they actually said that they’d never looked any deeper in the site than that.

So it’s a good idea to talk to stakeholders early and often. Tell them what you’re doing, ask for their opinions, find out what they need from the homepage and why. This part of the process is crucial and it gives you the best chance of avoiding those painful moments later on where somebody says ‘But my thing has to be in bold and in caps, and it needs a red button, and it must be at the top of the page’.

Some key stakeholders that you might want to include might be brand, marketing, fundraising, campaigns, services, volunteering, partnerships, subject matter experts. It really comes down to who has a stake in the content on your website.

So at the beginning of the process, I’d advise doing some interviews or some informal chats, depending on how well you know people. And in those, focus on getting to know their priorities, the problems they’re facing, and what they want from the homepage.

And I’d say don’t go in with any kind of an agenda, just have an open mind and be ready to really listen to what they’ve got to say, because you’re going to learn a lot from them and it’s going to be really, really helpful.

Later in the project, you can start to show them what you want to do, what you think are the right choices. You can show them the thinking and the evidence behind your decision making and you can use the principles as a framework to help provide some structure to those discussions.

For example, you might want to share that you’ve decided to put a link to a specific service at the top of the page. And if you have pushback to that, you can say ‘Well, that’s because we did some research and we found that 50% of people who come to the homepage are looking for that specific thing’.

The other thing that’s really important to work with your stakeholders on is kind of understanding of what the homepage is for. You know, we’ve talked about the fact that the homepage is all about navigation. And sometimes people have never really thought about that before, so that’s a good place to start. But the other thing is letting them know that it’s not the be all and end all. It’s important, but it’s not everything. If something isn’t on the homepage, it doesn’t mean it’s invisible. Not everyone lands on your homepage, it might not even be the biggest page on your website by pageviews. I see this time and time again with clients. Everyone assumes all journeys start there but nine times out of 10 it isn’t. So dig into your website stats, and it’s pretty likely that you’ll find your homepage is in the top 10 but it’s probably not number one. And that can be a really helpful thing to bring into your conversations with stakeholders.

The charity homepage toolkit

I’ve gathered all the insight and examples from the survey into a toolkit. The idea behind it is to give you a method to make your homepage content design process a bit more structured. Inside you’ll find a library of different content elements and worksheets to help you choose which elements to use and put them into a priority order. It won’t give you wireframes or wording. It’s not about that. But it will give you a clear plan for what content you need in what order and why.

It’s made up of six modules covering things like the groundwork you need to do, best practice, common mistakes, and then a library of content elements, different things you can put on your homepage, including lots of examples.

Alongside the modules there’s a planner with worksheets to help you decide what content you’re going to have in what order. It gives you a place to gather all your evidence and document the process behind your decision making. It cost 35 pounds, or it’s free for small charities with an income of 100,000 pounds or less. Find out more about the charity homepage toolkit.

Charity homepage examples

Now I’m going to share some examples that I like. And I’ll preface this by saying it’s hard to tell how good a homepage is without looking under the hood, without knowing the numbers, the KPIs, and also knowing what the goals were in the first place. So this is based on my subjective opinion, but it’s an educated opinion. And these are also examples that I know a lot of other people like as well.

First up, we’ve got Scope. And as you would expect as a disability charity Scope’s homepage does an amazing job when it comes to accessibility. I really appreciate the way that it reflects key issues that are going to be relevant to users at that moment, which at this point in time in the UK is the cost of living crisis that’s front of mind for so many people, and has a disproportionate impact on people with disabilities. The homepage also goes on to describe what the charity does, and it provides an easy route into key content and tasks too.

Next up, we’ve got Samaritans. So what I think works best on the Samaritans homepage is the really single minded prioritisation of the key user need to get in touch. Right there at the top of the page, you’ve got a phone number and a link to other ways you can contact them as well. This makes the journey really simple, really straightforward for somebody who’s in crisis. And the messaging around this is really clear, it’s really welcoming, and it gives a sense that you’re going to find someone who’s going to stand in solidarity for you. If you have any doubts about calling, I think this might be reassuring. From there it starts to serve other user needs like making a donation, giving updates on campaigns, and of course, volunteering, which is really important for Samaritans. And overall, the page feels very clean and clear, and it’s not too overwhelming.

The other example I’ve got is Shelter. So Shelter uses a splash page before you reach the homepage that you see in the screenshot here. And that’s an introductory page that’s like an interstitial before you go through. And I wouldn’t usually recommend this, but I think it makes sense that this instance, users need different advice depending on where they live in the UK. So that’s what they select on this splash page. And it’s clearly explained. When you get to the real homepage there’s currently a link to the cost of living crisis, campaigns, something that’s likely to be at the front of a lot of people’s minds at the moment. The other thing that I really like about this example is the way or the messaging speaks directly to the reader. And also I really appreciate the clear links to different types of help and advice as well.

Wrap up

So to wrap up:

• Homepage content is really hard work, so make sure you give yourself the time that you need to focus on it.
• Make sure you know your users and their needs before you get started.
• Make sure you reflect your strategy and the goals that are important to your organisation.
• Remember that it’s about navigation. You’ve got to help people get to where they want to get to.
• Involve your stakeholders early and often, and
• Make it accessible.

Thanks