5 steps to improve your charity website’s navigation

Clear navigation is key to a great charity website. In this post, we’ll share five easy steps to simplify a cluttered menu.

The problem with charity websites

Many charity websites end up like an overstuffed attic. Over time, new pages, sections, and features get squeezed in wherever they’ll fit. Then there’s the battle for prominence. Everyone in the organisation wants their content front and centre, whether or not it’s actually important to our audience.

The result is cluttered navigation that’s overwhelming for users, and impossible for content teams to manage.

If you run a charity website, this probably sounds familiar!

It’s a scenario we’re all too familiar with here at Pixelfridge, and the type of problem we’re often brought in to solve.

Improving your navigation

Great navigation isn’t just about sleek-looking menus. It all comes back to the big picture of how your website is structured. A well-planned content structure is what’s needed to help visitors answer their questions swiftly, and encourage further action.

From the outset we need to give careful consideration to how our pages are organised. We call this a website’s ‘information architecture’ – and getting it right is the key to making your navigation intuitive.

After all, the goal of a site is to help people find what they need, fast.

The less friction we give users when completing their tasks, the more likely they’ll be to engage, subscribe, or donate to our cause. That’s why getting this part right is so important.

Let’s take an example

This is a mock brief, but it’s pretty similar to the ones we often get from our charity clients.

The organisation in question has just launched a fresh website redesign, focused mainly on visual updates. The deeper structure—the information architecture—hasn’t been touched in years.

As a result, the site has grown and become cluttered, with way too many options in the main menu and content buried three or even four layers deep. Because the recent redesign only improved the look and not the structure, key metrics like content engagement and form submissions haven’t improved.

The site looks nice, but people can’t easily find what they need.

We’ve taken the existing structure as it stands and turned it into a sitemap diagram. A sitemap is a tool we use to illustrate website structures at a high level, and help stakeholders understand how everything fits together.

Just by glancing at the sitemap, it’s clear there’s a lot of crowding in this structure. The number of top-level items makes the navigation hard to scan, and it’s often difficult for users to track down specific pieces of information.

So, our brief is to rethink this structure from the ground up. To create a simpler, smarter navigation that helps people find what they’re looking for. Let’s get started.

Step 1 : Take inventory

Before we start making changes to our structure, we first need a clear picture of what we’re dealing with. That involves a full content inventory of the website.

We typically build this as a spreadsheet—Google Sheets works well, because it allows us to collaborate easily with decision makers and content creators from across the organisation. The inventory itself can be a big job too, so having a cloud-based tool that everyone can work with helps to divvy up the audit and share the load.

When completed, the content inventory gives us a breakdown of every section and page, and how they’re structured. For each page, we also note down some key information

• Topic: Does the page serve a certain purpose or user need?
• Format: Is it a landing page, an article, or some sort of index page?
• Owner: Who’s responsible for keeping the content up to date?
• Outcome: Does this content need major rewrite, or is it duplicating information from elsewhere and can therefore be consolidated? (Duplication is common on charity sites where similar content accumulates over time, or different departments have their own perspectives of the same issue).
• Last updated: When was it last reviewed—and is it still relevant?

To make our inventory even more useful, we usually add analytics data into the spreadsheet. Metrics like page views and engagement rates help us spot high-performing content and identify what’s being overlooked.

Conducting a full content inventory can be a big time investment, but this step really is essential. It helps us understand what we’re dealing with, what’s currently working well, and where improvement is needed.

To save time, we can use tools to automate parts of the process. Most CMS platforms (like WordPress) can export a list of page titles into a spreadsheet. Tools like SEMRush or Screaming Frog can crawl your site and export a list of every internal URL, to make sure we haven’t missed everything. Once we’ve got the list of all our pages, we fill in the more nuanced, human details.

For large content archives—like news sections—we often don’t review every single item. It would just take too long, and not offer much value to the big picture restructure. Instead, we sample a few to get a feel for the type and quality of content, which helps us decide how those types of posts fit into the new structure.

When it comes to content migration, we may set some broad rules for this type of archive content. We’d usually suggest only moving over content that is either less than a year or two old, or has had a minimum number of pageviews in the last three months.

Returning to our example client brief, the content inventory for our charity client revealed that large portions of the site aren’t getting much usage at all. Many pages also also out of date or repetitive.

The content could greatly benefit from some consolidation – ensuring the high-priority pages are surfaced and easily accessible. This leads us to the next phase of our process…. Deciding what’s important.

Step 2 : Focus on user needs

Once we know what content we have, it’s time to ask why it’s there. This means getting to grips with our user’s needs, priorities and top tasks.

You might already have artefacts like user personas or customer journey maps for your project.

Here at Pixelfridge, we often use Strategyzer’s Customer Profile Canvas to capture user goals, pain points, and key tasks. Even though it’s a model originally created for the consumer sector, it works really well for documenting the needs of charity users, too.

We’ve shared separate guides on how to create these profiles in the past.

No matter how we get there, the goal is the same: define our users’ jobs to be done, along with the desired outcomes and potential pain points they might experience.

Once we’ve understood these, we can then start matching user needs content we’ve uncovered in our inventory.

By organising content around user tasks, patterns start to emerge. This is where we begin to shape the foundations of a new site structure.

To begin illustrating these groupings, we can use what’s called a ‘concept map’. This isn’t a full-blown sitemap, not yet.

Concept maps keeping things fairly abstract helping us to reframe things, and ask critical questions such as…

• How are we supporting our users’ needs?
• Are we missing key content around certain tasks?
• Do we have too much—or too little—content for some topics?
• Does the content serve a clear user goal?

Seeing content through the lens of a user helps us make smarter, more strategic decisions. It sparks better conversations and encourages our content structure planning to move beyond internal politics, and be more audience task focused.

The resulting discussions may lead to consolidating, simplifying, or even retiring certain pages that aren’t serving our audiences. Equally we may find clear gaps in what we’re offering, and want to expand our content.

Going back to our example brief, it quickly becomes clear that much of what occupies their existing navigation isn’t really a priority for users.

By structuring things more around user needs, we begin setting the stage for a audience-focused navigation.

At this point in the project, it’s a good opportunity to invite input from wider stakeholders or even our users themselves.

Card sorting is a simple and effective activity we can use to get these people involved. We prepare a bunch of ‘cards’, each one representing a different piece of content. Participants are encouraged to sort these into categories that make sense to them. They’ll then name each group, and rank them in order of importance.

Card sorting can be completed either as an individual or a group activity. Staging multiple card sorts with different users or stakeholders helps uncover patterns in how people understand the site’s content. This often reveals insightful new ways to organise the structure, along with terms and labels for navigation that we may not have considered.

Card sorting activities are great to run in-person. Moving the cards around is a lovely tactile experience that people generally find engaging.

If this needs to be done remotely though, collaboration tools like Miro also work perfectly well. There are even dedicated card sorting apps like Optimal Workshop or Maze that provide nifty features for comparing results – although they do come at a cost. We’d recommend using them for particularly large studies where we want data from many different participants.

Step 3 : Rebuild the structure

Now that we’ve got plenty of data to support our decision-making, it’s time to refine the site structure. Using our concept map and card sorting results, we begin creating a new information architecture that better reflects what users actually need.

We plan out structures using sitemap diagrams, just like the one we used earlier to visualise the current site. Tools like Figma, Miro, PowerPoint, or even Keynote work great for this. All we need are boxes and arrows to show the structure clearly.

When creating a new sitemap, we follow a few key principles:

• Let go of the words. Users don’t read, they scan. Short, clear labels in the top-level navigation are essential. Long phrases slow people down and make it harder to find what they’re looking for.
• Focus on tasks. Think about what your users want to do. The priority tasks they’re coming to your site to complete should be reflected in the labels you’re using for nav items and grouping.
• Group similar content. Our concept map and card sorted helped to identify overlapping themes. By combining these into single pages or sections, we reduce clutter and make choices easier for users.
• Prioritise what matters. Use your research to highlight the most important user tasks. These should be front and centre in the main navigation. Less important content can go in secondary menus, like the footer.

This is an iterative process, and we’ll usually work through several versions of the sitemap using feedback and input from our stakeholders.

Eventually we’ll land on a version that feels intuitive and aligned with user needs, whilst also keeping internal teams happy.

We rarely get things right the first time. That’s why it’s great to do a little user testing at this stage in the form of a ‘tree test’. Tree testing is a quick way to see how well the structure actually works in real life.

The method is simple. We show a group of users (10 is often plenty) a simple, text-only version of the navigation. Then we give them a series of tasks, asking where they’d go to find specific information. In the case of our example we might ask “where would you find a guide written to help you manage your debts”.

We’ll measure the success rates of each task. If it feels like people are struggling to find anything particular, then we know there’s still some refinement needed.

Subscription-based tools like Optimal Workshop or Maze allow you to set up these kinds of tests as online surveys that users can complete remotely in their own time. This is particularly handy for when your charity has a mailing list that surveys can be sent out to.

If you’re tight on budget though, then doing this activity with a screen share or printout works too. What matters is validating how easily users can find what they’re looking for in your new structure.

When users can find what they need quickly and confidently, you’ll be ready to move into the next phase.

Step 4 : Making it visual

Now that we’ve mapped out the structure, it’s time to think about how users will actually see and use our website navigation.

Remember, the visual design is separate from the structure, and a single information architecture can be represented in many ways.

For example, a very basic website header may simply consist of ordinary links to pages, from which further sub-sections are accessible. Alternatively, we could opt for using drop-down menus that provide faster access to sub-sections. We could even use larger fly out menus after clicking each top-level item.

There are loads of presentation choices we can consider.

To keep things extra tidy, we could even hide some of our navigation options behind a menu button. This is an aesthetic route that is getting quite popular. That being said, if you do opt to use a menu button make sure that key actions like “Donate” or “Get Help” need to remain surfaced—they’re too important to hide.

The best way to present your site navigation will come down to several factors, including your audiences’ tech savviness, your brand’s aesthetic style, and the number of links that need to be shown.

Don’t forget mobile, too. Due to the size constraints of a mobile screen, it’s usually necessary to make some adjustments to how we present navigation on these platforms. Just make sure you’re surfacing your most important tasks if there’s space to do so. We don’t want to bury our high priority actions under multiple levels of hidden menus.

Your homepage and landing pages should also be thought about alongside your site navigation. After all, not everyone uses the links in your website header, especially on mobile where navigation is often hidden behind a menu button. Many users will scroll to find what they’re looking for, and depend on the links you put in the pages themselves.

Treat your homepage and landing pages like a guide, signposting top tasks and making sure the main sections of your site are clearly accessible. A strong global search can help too, especially for users who prefer to type what they’re looking for.

In the early stages of our design process, we build quick prototypes of our navigation and key landing pages, and test with real users.

Wireframes (simple black-and-white layouts) let us explore ideas, gather feedback, and get the UX fundamentals right in the early stages.

Just because you have the perfect structure, it doesn’t necessarily mean your navigation is user friendly. The way we present our structure to the user can often make or break the user experience.

Step 5 : Test and refine

The pursuit of the perfect website navigation is never ‘finished’.

Frequent and ongoing user testing is the key to making something great. Keep taking regular opportunities to watch people use your site. You’ll likely uncover surprising behaviours, missed assumptions, or little tweaks that could make a big difference in helping users find what they need faster.

Once a site is live on the web, we can also access more data-based usage metrics. Analytics will show you which pages get the most traffic, how users move through your site, and where they might be getting stuck. These insights open the door to continuous improvement and refinement.

By keeping usability and navigation front of mind, we can continue to enhance the user journey and make our websites more intuitive.

Don’t forget that an active charity is always adding to and updating their content, so unless we stay on top of things it’s likely that things could become cluttered again.

That’s why this is an ongoing process. Rather than waiting for a complete overhaul, take an active role in your site’s content governance and optimise to keep things easy.