Protect The Human – new designs for campaign pages

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.

2 comments

Author: Anjali Ramachandran anjali28

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.