A sketch of a homepage wireframe, showing basic elements of a homepage as line drawings, on a tablet.

Get tips on how to design a user-focused homepage. See insights from a survey of 30 charity homepages.

Working on a homepage can feel like a high-stakes project. It’s the shop window for your charity. Your stakeholders all want a say. And there’s a lot of pressure to create something perfect. You can make it less intimidating by taking a user-focused approach, starting with content, and letting go of the idea of perfection. Keep reading for tips on how to approach designing your homepage and insights from a survey of 30 other charities.

1. Be clear on the role of your homepage

The trouble with many homepages is we lose perspective and try to make them everything to everyone. But by doing too much, they end up long, cluttered, and confusing. 

Your homepage isn’t about showcasing every little thing you do, providing links to things that don’t have a home, or keeping the CEO happy. The purpose of a homepage is to do one or both of the following things:

  • Show people what your organisation is about: For users who are new to your brand and need to understand who you are and why they should care.
  • Help people navigate: Users don’t come to your homepage just to look at your homepage. They come because they want to navigate to something else that helps them complete a task.

To understand more about the role your homepage plays, take a look at your analytics and search data. Find out:

  • How many people land on your homepage vs other pages on your site?
  • How do people get to your homepage? Is it organic search, pay-per-click advertising, a referring link, or direct?
  • What proportion of people search for the name of your charity, vs searching for services, topics, etc that you have content about?
  • What are the most common onward paths from your homepage? Where are people likely to go next?

2. Know your users and their needs

It’s essential to have a good understanding of who uses your website and why. If you have user research, review it to get an understanding of your users and their needs. Think of it as gathering evidence and building a case so that you can make the right decisions, show how you arrived at them, and back up your argument later. Focus on uncovering and documenting:

  • User needs: what do they need and why?
  • User groups: what persona or group are they part of?
  • User journeys: where in their journey are they likely to use the homepage?

If you aren’t clear on user needs and don’t have any user research to draw on, it’s worth pausing and investing some time in this.

4. Know your strategy

Familiarise yourself with your organisation’s overall strategy or mission. Your homepage should be working to support your strategic goals, so you need to be clear on what they are before you start. Your objectives should have a big impact on your homepage content design. If your big strategic focus is getting donations, your homepage will need to be very different than if your focus is on providing services or recruiting volunteers.

5. Engage your stakeholders

Stakeholders can make or break your homepage. What they want matters and they’re a useful source of ideas. But if you just focus on what they want, you risk ending up with a page that won’t work for users. So you need to balance their wants with user needs and strategic priorities to avoid a page that’s all about the organisation. 

It’s important to engage stakeholders in the process. At the start of the project, ask for their opinions, what they need from the homepage and why. Throughout the rest of the project, provide updates, show them your research and evidence. Regular, open conversations give you the best chance of avoiding those ‘But my thing must be at the top of the page’ conversations later. 

6. Remember that ‘perfect’ is impossible

There’s no such thing as a perfect homepage. You can’t serve every single need or keep everyone happy — there’s always going to be a compromise.

You need to prioritise and have a clear goal in mind. It also pays to remember that many people will be landing on other pages on your site via Google searches, referrals, and links. So if something isn’t on the homepage, that doesn’t mean that it’s invisible.

7. Start with the content

It’s very common to start with a wireframe or a design, then fill it with content. But the problem with that is that it prioritises form over function. Instead, start the design process by thinking about what content you’re going to use and why.

It can help to have some ideas of what other charities put on their homepages. A survey of 30 charity homepages found 53 common content elements in 10 different categories. The 10 most common content elements were:

  1. News/blog: summaries and links to recent posts/stories (appeared on 73% of homepages)
  2. Tagline/mission/description (63%)
  3. Donate: a general call to action (53%)
  4. Email subscription: a subscribe call to action (47%)
  5. Campaign/petition: a call to action for a specific campaign (43%)
  6. Volunteer recruitment: a call to action to see roles or find out more  (40%)
  7. Info/help/advice: links to topics or category pages (37%)
  8. Info/help/advice: links to a specific piece of content (33%)
  9. About us/what we do: a link or links to find out more about the charity (33%)
  10. Get involved/support us: a call to action to find out more about supporting the charity (33%)

See all 53 common homepage content elements

8. Be mindful of the fold

The fold refers to the notional bottom of the page before someone has to scroll to see more. What you put above the fold on your homepage matters a lot, but not because users don’t scroll — that’s a myth. Users will scroll, but only if you give them a good ‘information scent’ at the top of the page. People need those clues that they’re in the right place and will find what they need if they scroll.

Out of the 53 different elements that appeared in the survey, only 10 appeared as the first element on the homepage:

  1. Tagline/mission/description (first element 37% of the time)
  2. Donate (20%)
  3. Campaign/petition (13%)
  4. Fundraising event: call to action for a specific fundraising event (7%)
  5. Info/help/advice: topics/category page (3%)
  6. Info/help/advice: specific piece of content (3%)
  7. Helpline/advice line: call to action for email/webchat/phone number (3%)
  8. Services: a search box or finder tool for services (3%)
  9. Funding: a call to action to apply for funding (CTA/apply for) (3%)
  10. Image carousel (3%)

The most common first element was a tagline, mission, or description. A tagline is a safe element to have as the first element on the page, as it’s likely to match a user need.

The next most common element was a call to action to donate to a specific campaign, followed by links to campaigns or petitions. These elements might have a short shelf-life and need to be replaced regularly. If you do choose an element like this to come first, make sure you’re following a user need and not a stakeholder want.

9. Know that you’re pulling a loose thread …

Working on your homepage can feel like you’re pulling on a loose thread that’s unravelling your whole website. By focusing on your user needs, strategy, and how people navigate your site, it’s very likely that you’ll find lots of things you want to change.

But this doesn’t mean that you need to redesign your whole site to redesign the homepage. You don’t need to do everything at once. Change the homepage as much as you can without breaking the rest of the site, or creating confusing journeys for users. You can use your learnings to make the case for other changes.

More useful resources

How to create a great charity website homepage

How to spot a user need 

Understanding what users need

Why the page fold still matters

Iterative development: its philosophy and benefits

What we mean by digital

--

Image by Baldiri on Flickr. Reused under license.

Our Catalyst network - what we do

Support & services

Our free services help you make the right decisions and find the right support to make digital happen.

Learn what other non-profits are doing

39+ organisations share 50+ Guides to how they use digital tools to run their services. Visit Shared Digital Guides.