Media Volunteer Redesign

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.

Original Screenshots

Screenshots of Our Redesign

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.

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!

1. tell us where you are
2. choose your first task
3. 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…

In the original side-by-side layout, it wasn’t clear where you should start reading.

Another improvement in the layout of the content is that the page is now much more linear – you start at the top and read/scan downwards.

Our Redesign

• Tweet