Screenshots
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.
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.
Links
