Protect The Human new homepage

Following up on Tim’s recent post on the new Protect The Human homepages, I’m going to write about the process I went through to create the final homepage designs.

1. Sketching

I started with sketches. Sketching ideas on the paper helped me visualize quickly what we wanted to achieve through the new homepages and how we wanted to address current site’s issues.

It was an easy way to present the initial ideas to people involved in the project (client, creative director, developer, etc.), and made it easy to apply any changes required. It was also much quicker than creating the initial visuals in photoshop!

2. Creating ‘grey boxes’ in photoshop

After the sketching session I had a clear idea how to present both logged in and logged out homepage objectives. I knew the content that should go on the pages and I could start playing with it in photoshop.

I started with laying out grey content boxes on the page, creating the grid, and showing the hierarchy.

Logged in homepage

Logged out homepage

3. Designing

The next step was to start the design. I did several versions of the homepage before achieving the final one. However, the previous two steps saved a lot of my time and made the actual design process less frustrating.

Here are the final designs:

Logged out homepage

Logged in homepage

_____________________________________________________________

On the logged in homepage, for users who have only just registered and are new to Protect The Human, there is a set of 3 automatic, time-based actions suggested for them to take:

Once user starts taking actions this panel changes to suggest personalized actions:

‘Recent highlights’ panel becomes also personalized (Highlights for you) once user has specified interests. It displays the content based on user’s chosen tags and campaigns.

I’ve also created two templates for the feature area so that Amnesty has the flexibility to choose the type of content they want to show. They highlight crucial events, campaigns, etc., and urge the user to take action.

Video template

Image Gallery template

_____________________________________________________________

Overall, I did truly enjoy the whole design process. Simple things like sketching can make the whole design process so much easier.

More improvements to the site will follow as we’re currently working on them.