Written by Ben Hunt from web design agency

. For more information about his agency visit scratchmedia.co.uk

50 Redesigns preview: Media Volunteer

Media Volunteer Center is a project run by Green Media Toolshed.

It's an online application that lets volunteers help maintain a huge database of media contact data, which is then made available to organizations involved in positive change all round the world.

The original site design was already clean and concise, but the client wanted to know how much clearer and easier-to-use the site could be.

They also wanted a fresher, more "Web2.0" style that would still lend itself to co-branding or re-branding where needed.

Screenshots

Originals

Key issues

We started with the basics of a great web app:

simple, conventional layout
and very economical in words

The main visual design work focused on Colour and Tone.

Then, we worked on Copywriting, specifically looking at "the Deal".

1. Colour and Tone

Starting with the overall visual effect, it was clear that the overall feel was too intense (particularly for the Web2.0 style we were aiming for).

1a. Intial view lacks tonal & colour differentiation

Looking at the home page, it's fairly obvious that the deep blue area is the page background, but where should you look first?

Every area of the screen is flat colour, and it's not easy to spot where the main content is, based on tone/colour alone.

The black text on mid-blue content area is fairly low-contrast, so doesn't jump out as "read me".

The flesh-coloured area stands out most, against the blue content area, but it shouldn't be the place you look first, because you're missing some important basic information (which we'll come onto later).

1a. Hard edges draw the eye

Once you entered the site, the main content is displayed on a white background, which helps.

Looking at the page (at 25% scale), what draws the eye most?

To my eyes, the intense blue background color is quite "attractive" (meaning that it draws your attention), and it creates very hard edges with the white central panel.

By "hard", I mean that there's a very clear, strongly-contrasting break in tone between the blue and the white...

The top dark blue bar is more intense still - the deepest tone on the page - and also creates a fairly hard edge with the gray bar beneath.

25% screenshot of MVC page, showing edges of hard contrast

Here, I've highlighted the hardest edges in red.

(Try the Squint Test: mostly close your eyes so everything's blurred and see what you can still make out..)

Now, there's nothing wrong with hard edges, per se.

I'm always going on about how visual design is essentially an exercise in managing the eye. Sometimes, you want to draw the eye to something.

The problem here is that the edges aren't important, so we don't want to draw attention to them. Because they're so hard, they actually draw attention away from the most important stuff, which is the content on the central panel.

1b. Intense colours also draw the eye

Another difficulty with using relatively intense backgrounds is that strong colour draws attention too.

The large areas of pretty blue are more appealing than the boring flat white.

What we did

Here's our redesign, also at 25% scale...

What's most noticeable?

You'll notice that the new design has much lower-contrast edges between the content area and page background (although they're still clearly differentiated), which helps the viewer focus on the central content.

Also, the strongest areas of color are the green headline background, then, the colored headings (which link to the various tasks you can do).

Plus, we've put all the main content on a white background, which is easy to read and obvious.

2. Copywriting

At first view, the copywriting on this home page seemed really good: concise and to-the-point.

However, once we thought through the user experience from the beginning, we found opportunities to clarify the message and flow (something it's always easier to do as an outsider).

Here's the original home page text (main content area)

I've recorded the words in the logical order that you'd read them, without much formatting.

Thank you for visiting!

By volunteering today you will help over 150 environmental groups nationwide get their stories covered in the media.

Help from your home or office.

With less than 15 minutes of your time, you can help maintain a vital directory of journalists, saving groups you care about time and money.

Start volunteering in three easy steps!

tell us where you are

choose your first task

review training

[Get started] (button)

How does it work? Take a quick tour...

help »

help 150 environmental groups from home

build »

build the movement's media database

call »

give 6 minutes during the day to call a reporter

more »

use your computer to do update and clean data

Here's what we changed, with explanations...

× "Thank you for visiting!"

This is just being nice, which is fine, except that the #1 goal of copywriting on the web is to communicate the most important stuff as quickly as possible. So the "happy talk" can go.

× "By volunteering today, you will..."

We don't need to start calling to action. First, we should sell on the benefits, then call to action. Ask: Can I remove these words? Yes.

"...help over 150 environmental groups nationwide get their stories covered in the media."

Excellent! This is "the Deal"! i.e. What the site's about, what it's for. So we made this big & bold (the Heading 1).

» "The Green Media Toolshed "Media Contact Database" provides media contact information to help groups campaign for positive change."

Thought we needed a bit more background on "what this is" for those who need it, i.e. background info on who runs it and why.

× "Help from your home or office."

Of course I can use it from my home or office. That's a generic property of web sites, and isn't a positive reason to continue, so it can be removed.

"With less than 15 minutes of your time, you can help maintain a vital directory of journalists, saving groups you care about time and money."

This completes the "What it's all about" section, concisely giving you all the reasons and information you need to uderstand the Deal.

» "Skip the intro and get started" (button)

Moved this button earlier in the flow.

× "How does it work? Take a quick tour..."

In fact, the basic information about each task you can do to help is quite short, so we moved all the relevant points onto the home page where it's more likely to get read, requiring one less click.

× "help / build / call / more"

This is an example of a common copywriting mistake: reducing information to the point where it's simple but loses its meaning!

"Help" is what this is all about, and in fact all the tasks are helping, so this word is not differentiating.
"Build" again is common to all the tasks. By doing each one, you're helping build something.
"Call" is more useful, but you need to read the rest of the text for it to make sense.
"More » use your computer to do update and clean data" is again so generic to all the tasks that it's meaningless.

» "How you can help"

We added a heading to indicate the call to action, set your expectations and tell you where to start.

» (Brief overviews of main tasks)

We added simple introductions to each of the main tasks a new user may be interested in, with clear headings and small thumbnail images of the user interface.