Protect The Human – new designs for Campaign pages

Protect The Human is Amnesty’s International UK site. It’s designed to engage people to stand up for humanity and human rights.

We’ve recently redesigned and launched new campaign pages on Protect The Human. The aim of the redesign was to improve the user experience and usability, which would lead to the increase in numbers of people getting involved in the campaigns for human rights.

Campaigns play a crucial role on Protect The Human. They are designed to highlight the ongoing problems happening in the world. Each campaign has a range of actions for people to take in order to fight the injustice.

To improve the campaign pages and increase the number of people taking actions, we’ve done some major changes. We started with the campaigns index page.

Campaigns index page

Here’s the old version of the index page:

pth_old_campaignindex

Although it’s simple and clear to read, it lacks attention and focus. It doesn’t motivate people to get involved and start taking actions.

Our new redesigned campaigns’ index page takes on a different approach.

pth_new_campaignindex

  • I devoted the whole page width to the campaigns by removing the right hand side column containing ‘Most recent content’ and creating a three column grid promoting all current campaigns.
  • I made the campaign images bigger and more powerful.
  • I removed the short description about each campaign to tone down the noise and to gain more attention.
  • The main focus of the page is on the featuring campaign, which takes up more space on the page and contains more information within the tabs. User can find out more and take an action without clicking through to the campaign page itself.
  • Each campaign highlights one urgent action. The feature campaign’s action is always visible, while the other campaigns show the action on the rollover state.

action_rollover………………………………………………………………………………………………………………………………

Campaign detail page

Here’s the old Campaign detail page:
pth_old_campaignhome

The page contains a lot of information about the campaign. It’s all spread all over the entire page in many different content panels. The page is very long, and doesn’t have any call to actions at the top portion of the page. It looks very busy and lacks the attention to the urgent information.

Here’s the redesigned campaign detail page:

pth_new_campaignhome

  • All information about the campaign is contained within the top portion of the page in the tabbed panel. Users always see a brief description and urgent action, plus they can read more, watch a video and read recent comment all in one panel without scrolling down.
  • ‘Your say’ encourages users to speak out.

pth_yoursay

  • All actions are visible within the right hand side column, and grab an immediate user’s attention
  • The ‘campaign highlights’ panel contains all related information about the campaign, such as featured content, videos, galleries, bookmarks, and comments. All the related information is presented in a simplified way: image and title plus an icon indicating the type of content. More info is revealed on the rollover state.

pth_contentrollover1

  • Each campaign page displays the number of the supporters and their avatar images to honour their effort.

pth_users

All these changes make the campaign pages look simple and clear. The look is more powerful and the content far more in focus. We hope they’ll make the site easier to use and will attract more supporters.

About the author

Designer

  • Comments (2)

    1. We would like to connect our human rights campaigns runs at:
      http://www.hiwaar.com
      with your site. Any suggestions?

    2. Hi Tarig, the best way to do this is to bookmark relevant human rights content from your site on our website at protectthehuman.com. Thanks for your involvement.

  • Responses (1)

    1. Amnesty outnames Shell stations |  Brand-e.Biz

      [...] Hellish time. Amnesty UK is leaning on Google Maps in a campaign to give oil giant Shell a bad name. The human rights organisation is calling on consumers to seek out Shell stations in the UK using the brand’s very own online finder, and then take a camera along to the location. Using a prop, they have to take a shot of the signage obliterating the ‘S’ and creating a so-called Hell Station. That’s not all. Amnesty also wants the public to find any Shell station on Google Maps, give it a one-star review, plus add a message that highlights the damage the organization says Shell is doing in Nigeria. The action is part of the Make Shell Come Clean campaign, with Amnesty charging the oil industry of failing ‘to adequately prevent the human rights impacts of its operations on the lives and livelihoods of the people of the Niger Delta”. By the way, if you’re a web design buff, you can find out more about the campaign pages here, courtesy of Made by Many. [...]

Leave a comment

Our latest tweets

Categories

Recent comments

  • George Gerrard: magic to at last see/read someone with a brain I have been on chatroulette and as soon as I see some...
  • Oli Matthews: Thanks Rob. It's a little like tweet deck but with Flickr included. As mentioned in my post I'm goin...
  • Robz J: Nice work Ol -kinda like Tweetdeck right ? Interested also to hear your comments on browsers >>...
  • Raj: Check out the Tfl London Cycle Hire API @ http://bike-stats.co.uk/...
  • Andrew Denny: Oops, sorry, glitch in my last comment. God, I hate this commenting system, why can't they design a ...