Using your website to tell a story

A guest post by Katy Carlisle from The Wheel Exists.

In the previous blog post we talked about identifying a purpose for your website and getting clear on actions that you want website visitors to take. This week, we'll be using that information to plan the framework for our example campaign website that we're going to make on the 19th January, and thinking and how we're going to encourage people to take those actions. We're also going to choose a name for the campaign!

The example website that we're planning will ask people to support their local charities or non-profits in Sheffield. We've established that the actions we want people to take are:

  • Donate money (or possibly items depending on the charity)
  • Volunteer or help the charity to raise money e.g. by holding an event
  • Share the work that the charity does in order to encourage others to donate or volunteer

The campaign name

With that in mind, let's think of a name for the campaign. I've already written a bit about the process behind choosing my own business name so let's see how some of that can apply to this project. We want something easy to remember that reflects our campaign aims, plus maybe an available .org or website address. If we want to use social media for the campaign, we'd also check for any competition around the username or hashtag.

We wanted Sheffield to be in the name so it was obviously a campaign about local organisations, and we also needed a way to reflect the actions that we wanted people to take. Because we're linking in with National Hug Day on 21st January and Valentine's Day in February, we're asking people to show some love. One tricky decision was around the terminology to use; do we say charity, non-profit or third sector? Some terms are used more widely within the sector but this would be a public facing campaign. In the end we decided to avoid these issues completely by deciding to call the campaign... [drumroll please] HugSheffield.

As it's a fictional campaign, we didn't really spend that long on the process! 

The website structure

Now we have a name, we're going to think about the content and structure of the campaign website. Remember, we're planning as much as we can in advance so that we can be super efficient on the day! 

The introduction

When people visit the website, they may already know about the campaign and want to take action right away, or they could have just clicked on a link in order to find out more. We need to cater to both of these audiences as soon as possible when they reach the website. Look at how these campaign websites introduce the topic whilst also providing an immediate "call to action". This is where the website visitor is being invited to click or interact with the website in some way in order to take action. Often this is in the form of a button. 

You'll also notice that these campaigns, like many modern websites, use a strong image to support their introduction. The photos aren't just there for decoration; effective images or graphics can also help to convey the message that you're sharing, or evoke an emotion in the person visiting the website. We'll be looking more at the campaign branding and the website design (including choosing images, colours and fonts) in our next blog post. 

For now, we're going to have a think about the content of our introductory section. We want to ask people to take action, and then provide them with an easy way to do it. We also want to give them a bit of information about the campaign. Ideally, we'll also include some urgency in the action we're asking them to take:


Request for action, with urgency.


How they can take that action (clickable button).

And that's it for the first section. It may not look like much, but in today's world of website design, less is more. We don't want to overwhelm people with too much choice,  and we will also be offering them a navigation menu to quickly access other parts of the campaign website.

We can now begin to think about the possible routes through the website. The first option is that they click on the button and are taken straight to the section with opportunities for action. The second is that they need a bit more information before taking action, and they begin to browse the other pages.

We will be using a Squarespace template for a scrolling-type website, where multiple page sections are stacked on top of each other, as this allows us to effectively tell a story and provide visitors with bite-sized information as they move through the website. I'll be talking more about the benefits of this format for campaign sites during the Third Sector Café session on 19th January

Option 1 - taking action

If they click on the button, it will take them to a section which explains the different actions that they can take (donate, volunteer or share) and some example of charities that they can support.

Clicking on the charity would then take people through to that organisation's website, preferably to their "Support Us" section if they have one. In an ideal world there would potentially be a step in between which provided a bit more information about the charity first, but as we're planning to create this website in an hour we're keeping it simple!

If people can't find a charity that they want to help, or they aren't sure who to choose, there will also be an invitation to take action by using the hashtag #HugSheffield on social media to raise awareness of the campaign and/or their chosen charity. We'll use a social media sharing tool such as AddThis in order to make it really easy for people to share directly from the website, and Squarespace also allows you to include your latest social media content from Twitter or Instagram right on the page.

Here's an example using the Third Sector Café Twitter account:

Option 2 - Scrolling or navigating to another section

Some people may need a little bit more convincing, and that's fine. We'll be ready for them! This is where we can really take advantage of the website as a storytelling tool. 

The charity: water website uses storytelling for great effect to encourage its visitors to take action.

Let's look at some of the techniques that they use.

1. Catching your attention with a shocking statistic (and explaining it)

663 million people? That sounds like a lot. The section below provides multiple examples of what that figure means in real terms, so the person reading it has more opportunities to put the number into a meaningful context. 

2. Humanising the issue

Facts and figures can be powerful, but they don't appeal to our empathy as much as real-life stories about other individuals or groups. Psychological studies have found that after spending 10 minutes with someone who had benefited from a funded scholarship, call centre employees generated between 171% and 400% more in funding

3. Making it easy to see the key points of their story at a glance

With more people using mobile phones and tablets to browse the internet, scrolling quickly through a website is becoming much more common. By highlighting headings and using larger or bolder fonts (along with the use of space, images and icons) the sections still get provide enough information for people skim-reading to get an overview. They can then find out more information in the sections that are most of interest.

See how there's a logical structure that their headings follow:

  • 663 million people in the world live without clean water
  • Clean water changes everything
  • Access to clean water changed the lives of Hadjara, Umu, Natalia, and Devison
  • Every $1 invested in clean water can yield $4–$12 in economic returns
  • Here are three ways you can help

Here's a basic model of what they are doing and examples of how it could apply to HugSheffield.

  • Stating the problem or issue (there are lots charities in Sheffield that need support)
  • Explaining why this campaign or cause is important (the charities do great work)
  • Sharing real life, human examples to back this up (supporting local charities makes a difference to the everyday lives of Sheffield residents) 
  • Providing practical benefits to supporting the cause (74% of Sheffield voluntary and community organisations feel that they are improving people's mental wellbeing
  • Giving people opportunities to take action (donate, volunteer or share)

We also want to provide people who don't want to scroll with opportunities to jump straight to different sections, and we'll do this with the navigation menu across the top, which will condense to a "hamburger" button on mobile devices (the three horizontal lines being the bun and the burger to form the world's most disappointing hamburger). 

We're going to have the following navigation sections:

  • Home (this will contain our introductory statement and "call to action")
  • About (this will include the first three bullet points from our story above)
  • Support (this will take you to the practical benefits and three options for showing support) 
  • Charities (this will list the example charities and link to their websites)

We'll also include a final section to capture any people who have jumped straight to the Charities but can't see an organisation that they want to support. This will encourage them to think of a charity and share how they are going to help on social media. 

Next time, we'll be looking at the branding and design of the website including useful resources for images and fonts.