Money Saving Expert part two

19 January, 2010 in Vigilante

To recap, Paul took the current site, regrouped and prioritised the content and removed distractions by grey-boxing the content. I played the part of the visual designer on this project whilst Paul handled the UX and UI design. This post details the second half of the redesign process for the Money Saving Expert website.

Sketchbooks at the ready

The first step in any design process for me doesn’t require any expensive apps or clever gadgets, just pencil and paper. This allows me to iterate through ideas quickly without the restrictions of unnecessary steps that get in the way of the idea generation process. The way I work is in a sort of visual mind map. I sketch a thumbnail of an idea and that might spark a couple of variations or new directions which I jot down around the thumbnail and link out to with arrows. I follow on from this by creating thumbnails or written descriptions for the new ideas and in turn they generate new directions.

By using arrows to show the flow from one idea into the next I can follow my stream of consciousness in either direction, which helps to add context to an idea when I look back later, ensuring I understood what I meant by my scribbles now I am no longer in the moment. I normally work like this until I have filled a page and then I go back and colour in or in some way highlight the best ideas on that page, and they become the starting points on subsequent pages for new visual maps.

Gridding the wireframe

Picking up the baton from Paul, the first thing that I wanted to do was to bring some visual structure to the work that he had done by working out a grid structure for the content to sit on.

Consistent spacing

I took the grey-boxed wireframe and whist keeping the hierarchy and scale that Paul had laid out, I worked out a grid structure that the content could sit on, whilst comfortably avoiding the constrictive, and in places, cluttered feel of the original design. I based the layout on a 960 pixel width keeping the right hand column in a similar proportion to the main content as the original.

Prominence within a framework

The other key component that I needed to consider at this time, was how I could break the rules that I was laying down with a rigid grid, and therefore draw the eye and control the flow of the users eye through the content and down the page. I wasn’t sure at this point how I would do this, but again I needed to be sure that I wasn’t being too restrictive with my gutters and column widths.

Consistent visual vocabulary

Once the structure was set, I moved on to deciding the style for the site, taking into consideration the audience as we had understood it. I was also conscious that we didn’t want to alienate the loyal following that Money Saving Expert had built up by straying too far from the feeling and style of the original.

As with the grid structure, setting up rules for a site that are followed throughout are important if a user is going to understand how to find their way around. In this instance it was also important to consider the rules that had been set on the original site that the users had already learnt, and keeping as many of these as possible.

Tweaking the colour scheme

This was another easy way to ensure consistency with the original design and help visitors from the old site feel as comfortable as possible. I took the opportunity to ensure the greens and blues toned better than they had previously, but otherwise I locked the pallet down to these key hues. The plan was to evolve the brand colours so that they emulated the colour of money, specifically a five pound note, rather than the bright colours used currently. I was concerned however, that this would make the site feel too polished for a site that was all about cheap deals and discounts.

Keeping the icons

To redress the balance with the colour changes, I kept the idea of using icons, but went for a set that brought some colour to the design and countered the potentially formal feel from the colour scheme. The icons were an obvious element to keep as they feature heavily in the original design and also they helped to give a more friendly feeling to the page along with the added benefit of breaking up the copy.

Button styles

There are actually quite a few buttons on the homepage of Money Saving Expert, not just for the search, but also for the email signup, purchasing books, polls, the primary navigation and the hero area. All of these sections are in slightly different contexts and serve different purposes but they all need to have the same feel and affordance to help communicate that they are clickable and are links. I tied the style of the navigation and buttons together and gave them a subtle gradient to lift them on the page.

The main call to action

This was the area that users needed to stop at first. Money Saving Expert is set up around the principle that users sign up for the email on the first visit and return to the site in the future via links in the mail outs. A combination of the Queen’s eye on a five pound note, a clear statement using words like ‘free’ and ‘money’, as well as highlighting the sign up field and getting it in a central place on the page all add to the prominence of the call to action.

Laying out the content

There is a lot of content on the front page of Money Saving Expert, but without a discernible structure to organise the mass of links, the eye has to do a lot of work making sense of the page. It was here that the grid comes into its own. I stripped backed the styling and stuck to the three column grid and introduced regular white space throughout, allowing the eye to make sense of the page very quickly. The end result is that the redesign appears to have a lot less content, when in fact it is exactly the same as the original.

Martin Lewis the brand

In the same way that the layout of the content areas needed addressing in the main body of the page, the same was true of the secondary column. The focus of this content was to provide details about the site and Martin Lewis, keeping it separate from the core site information.

Separate the man from the discounts

A big part of the draw to the website must be the promotion by the site owner Martin Lewis. Through his appearances on TV and articles in print, people have come to trust him as the only word in saving money. All that being said, the website is, in reality, all about the email. Repeat visitors arrive via their in-boxes, straight to the offers and don’t pass by the front door again. Therefore the homepage and more specifically the secondary content on it is content for the first time visitor. I had to ensure that it was clear what the site was about without getting in the way of the offers. I did this by sitting the content on a darker background but featuring Martin’s face in the strapline pod at the top. This balanced the page and the main call to action whilst still chunking the information correctly.

The finished article

Although Paul and I have tried to explain the steps that we went through in putting this concept together, the whole process was condensed down into a precious few hours to meet the article deadline. There was more that we could have done given the time, but we are pleased with the result nonetheless and it is always satisfying as web designers to see your work in print every once in a while.

Saving the Money Expert

On a final note, it turns out that the Editor of Web Designer Magazines knows Martin Lewis and has passed our mock up on to him. We probably won’t hear anything from him, but who knows, we could end up ’saving the money expert’ for real.