Advertising

Nine steps to tackle a content-heavy website with UX content design

By Danny Bluestone, Founder & chief executive officer

Cyber-Duck

|

The Drum Network article

This content is produced by The Drum Network, a paid-for membership club for CEOs and their agencies who want to share their expertise and grow their business.

Find out more

June 16, 2020 | 10 min read

We all know websites that have so much content, they’re almost creaking from the weight of it.

The new Sport England website, designed by Cyber-Duck

Cyber Duck on how to improve a content heavy website.

And tackling the problem of a content-heavy site can seem daunting – how do you know what content to keep? How can you structure it so your users can navigate it quickly and easily?

The good news is, there’s a clear step-by-step content design process you can follow that, when combined with an agile approach and smart technology, can transform your content-heavy site to one that’s streamlined and effective.

I’m going to walk you through this using our client, Sport England, as an example.

Who are Sport England?

Sport England aims to encourage everyone in the UK, whatever their age, background or ability, to enjoy the health and social benefits that come with physical activity. You’ve probably come across their work at some point, at a grassroots level or through a campaign like ‘This Girl Can‘.

In 2016, Sport England laid out its ‘Towards an Active Nation’ strategy, to address inequalities in activity, especially among women and lower socio-economic groups. That sparked a review of their digital presence: how did it communicate their mission?

Setting the content strategy goals

The project’s biggest challenge was Sport England’s breadth of audiences.

As Zjan Shirinian, Sport England’s head of editorial, put it, “At Sport England, we do quite a lot. We give grants, we have data, we have guidance and resources.”

The website was trying to be all things to all users. This had resulted in a very content-heavy website, non intuitive navigation and content that lacked a clear purpose and hierarchy.

“It was hard for us to package that content,” Zjan said. “We really needed some help to best map out what we had, what we needed to say and how best we could present it.”

So we started by clarifying the goals of the project. In the discovery phase, we listened to people from right across Sport England so we could understand what they needed the new site to achieve.

Persona research

We then validated the stakeholder research with user research and analysis. By looking at people’s motivations and behaviour instead of their job roles, we came up with three primary personas.

This addressed one of the early challenges: who was the website talking to? Was it B2B, targeted at the professionals providing activities; or B2C, the general public?

The primary audience for the site was, in fact, B2B.

We could now move on to evaluating the current content on the website.

How to conduct a content audit

The content audit is the vital first step when building your content strategy.

In a content audit, you’ll assess every piece of content across an entire website. This will reveal what content performs best, what can be repurposed and what you can dump. It can be a heavy lift, but once it’s done you can make informed decisions.

Here’s how we ran a content audit for the old Sport England website:

  1. URL: We exported the URL for every page of the website to ensure we caught them all
  2. Data: This helped us identify the highest performing pages
  3. Category: We categorised each page into key groups
  4. Quality: We rated the quality of the content and how closely it met user needs
  5. Statutory requirement: We checked which pages were statutory requirements
  6. Action: We decided whether the page would be kept, merged or deleted
  7. Persona group: Each page was assigned to a persona group
  8. User story: Each page had to meet a validated user need based on our research.

All this information was captured in a spreadsheet. It was a big site, so the spreadsheet got pretty huge. Here’s an extract from it:

[audit]

Content design: User stories

When you’ve done your persona research, you can also move on to defining user stories.

Personas tell you who your audience is. User stories tell you what they’re trying to achieve. They are key to your content strategy, because when they’re clearly defined, it means you can create a site that gives your users what they want quickly and easily.

For each user story, we wrote a sentence from the user’s point of view. It included:

  • What they want
  • How they want it
  • Why they want it

We noted if the user story covered more than one persona – often there’s overlap.

Then we categorised each user story to a section of the website. For example, any user stories wanting information about grant applications were assigned to the funding section. The user stories form the framework for the design and development backlog.

User stories often tend to be very functional – “I want to log in to my bank” or “I want to buy a blue sweater”. With Sport England, it was different, because their users are generally seeking information rather than trying to complete an action. So the user stories could be less specific, which made them harder to pin down and easier to lose track of their importance. That’s where solid process helps – it keeps everyone on track and focuses attention on the user. (There’s lots more on personas and user stories in our free UX Handbook.)

Content design: Content mapping

Your content audit will tell you what content you can dump, what needs to be carried over to your new site and what needs repurposing.

The next step is to map your content to the new website. Content mapping will also highlight any gaps so you know exactly what new content is needed.

To map your content, you’ll need a template to log key information about each page on your new website.

Each page on the new Sport England website had:

  1. Page: The name of the page
  2. Content title: The name of each section on that page
  3. User stories: A user story for each section in every page
  4. Content creation: If we needed new content
  5. Content seed: The source of the content on the current website
  6. Notes: So we could keep track of discussions and decisions

Here’s an example of what that looked like.

[audit 2]

How to create a content sitemap

Content mapping also helps you create your new sitemap.

A sitemap is a visual representation of your content mapping spreadsheet. While the content mapping shows you what content is needed where, the sitemap gives you the framework for your new information architecture and an overview of the scale of your website.

Here’s a simplified version of the old Sport England sitemap:

[Sitemap 1]

And here’s the new version, simplified again:

[Sitemap 2]

You can see that the new one is far more streamlined. That makes it easier to navigate.

Content creation strategy

We worked with Sport England’s content team to establish the three new personas for their new site. Then as we worked through the content mapping and sitemap, the team could start prepping all the content. They knew exactly who each piece of content was aimed at, so they could tailor it to them.

The team took existing content from the content map and created new content where needed, matching it to the persona and task. We collaborated in sprints, focusing on a section at a time, iterating and sharing work back and forth between design and content.

Here’s an example of content before it’s repurposed:

[web page 2]

You can see the big blocks of text – it’s hard to digest and visually unappealing.

And here it is after the Sport England content team and our designers worked their magic:

[web page 1]

The text is broken down into bite-sized chunks with headers, more and bigger images, and clearer signposting.

Content wireframing

Each section of the website was wireframed during the sprints.

Ideally all wireframing should be done with real content rather than legacy or lorem ipsum text, so that the designer knows how much content they’re designing for. If it’s long, for example, they can break it down into more than one page, or use an accordion.

Real content is also great when usability testing. It means fewer revisions because the tasks tend to be clearer for the user, plus you can test the content’s effectiveness at the same time as the design.

However, it’s not always possible. So we worked in tandem with Sport England’s content team and prioritised their content production towards the sections we agreed needed wireframing with real content.

The content mapping, sitemap, content creation and wireframing were done collaboratively and simultaneously, using agile methodology. User-testing and client reviews were integrated into every sprint, so there was constant feedback and constant iteration throughout the project. That helped us stay closely aligned with Sport England – the collaboration on this project was really successful.

[how do you wheel]
[how do you wheel]

How to maintain a content-heavy website

Of course, the work doesn’t end when the new site goes live. You’ll want to track the results and make sure content stays current and relevant for your users.

Zjan said: “The site has launched and we’re delighted with the results. The key challenge for us now is that it’s easy for content to get out of date as our strategies and visions evolve. So it’s important to set up processes that encourage people in the business to take a bit of ownership of the website. That way, the content team can work with them and continue to ensure that the content stays relevant.”

As for us, we’re glad to say that we're already supporting Sport England on their next exciting challenge.

Danny Bluestone, founder and chief executive officer of Cyber-Duck.

Advertising

Content by The Drum Network member:

Cyber-Duck

Established in 2005, Cyber-Duck is a leading digital agency that works with exciting startups and global brands such as Cancer Research Technology, The European...

Find out more

More from Advertising

View all

Trending

Industry insights

View all
Add your own content +