After six months of branding workshops, numerous page concepts, two or three trips to Golden Square to poll public opinion and one stressful release day later the new redesigned Fool.co.uk launched on Thursday 29th May.

Head of Web at Fool.co.uk, Carl Knibbs, covered the background nearer launch day but in a design sense we went from this…

…to this…

Visual design challenges
Fool.co.uk’s latest redesign is intended to build a brand feel that better communicates the values of the company and the website. The new look and feel is engaging, thoughtful and different. We’re also a fair way away from the design styles of financial comparison sites. Fool.co.uk is a thoughtful and informed community and we hope the design reflects that.

Primarily we needed to rationalise our top navigation and site template – whilst the financial product-based tabs of the old site were useful, they didn’t properly reflect the structure of the site or our plans going forward. So out they went, in came a simple five tab arrangement with five specific section front pages. Doing away with the rather bland left nav we’re left with the full width of the template to dedicate to content and functionality.

On the stylistic front we decided to move away from our cartoony icons towards something that felt more contemporary. We also embraced a new typeface, one I’ve been admiring for a while, FontFont’s Olsen by Morten Olsen – we’re in good company, the font was designed for the Denmark Ministry of Education and if its good enough for them etc. Admittedly we’ve ended up using Georgia as an HTML substitute for Olsen but where possible, we’ll investigate ways of getting this key part of the brand onto our online products.

We also pushed on with positioning our tagging engine as a more high-profile navigation method. There’s further iterations of improvement to come on that – and everything else for that matter – that will make our tag hub pages a centre for finding more than just related articles.

A big part of the redesign was also to embrace the wider page widths our browser stats suggested we could get away with and concentrate on regaining control over visual heirarchy. Just 3% of our browser users are using a resolution narrower than 1024×768 so it’s great to be able to offer a better experience that newer technology allows.

Technical design challenges
One of the technical challenges with the redesign was to put the site’s CSS setup in a better position to support future development. A solid grid structure is in place that should ensure page layouts are more consistent and easier to turn out. Whilst we’ve lost the fluid resizing of the old em-based site template the more prevalent white space means up-sized text

This project brought up a lot of challenges associated with large websites like Fool.co.uk. Content going back over the past 10-years in various code formats and standards were all hit by the global template change. This is particularly a case in the code of our rather archaic (and anarchic) Discussion Boards code. Still, in general the new code has held up well and the consistency of design is a satisfying development.

Cool new design elements
Some of the details you may have noticed:

• Creative lead boxes – these allow our editorial staff to promote the content and tools that are most in demand. Putting the editorial content for which The Motley Fool is known front and centre on the homepage and ‘latest stories‘ page. These also throw in some strong photographic elements.
• Blue header and footer – we’ve got the colour heirarchy back with strong footer and header. Having said that on shorter pages there’s a bit too much dark blue going on. Maybe an action point for a future iteration.
• Big article churns – again, we’re able to give our best editorial content the profile it deserves.

Since the redesign…
Over the last three months the design and development teams have been hard at work bringing new features to the site. Writer’s blogs are under way using a custom blogging platform and there’s lots more to come in the near future.

Keep an eye on Fool.co.uk and indeed this blog for news.

First impressions….not bad but not so good. The colours are nice and the search bar is nice and bold. However, visually I think it would benefit from some tidying. Bevel effects are a rather strange choice on today’s web and the various different uneven glows and strokes around the top bar elements jar a little.

Having said that it has now made all of the categories available from the homepage (ala amazon.com) and reiterated their recognition that (surely?) the majority of people head straight into a keyword search. However, I’m not a fan of the left-nav – a very simple improvement would be to make the main menu elements clickthrough to something. This is a real annoyance for me with these sorts of navigation – particularly evident where you hover over the ‘Books’ item and then have to move right to click…. ‘Books’ to proceed.

Still I guess it’s a tough job redesigning these sorts of elements under the gaze of millions of users and it’s hardly going to stop me buying lots of stuff from Amazon and appreciating all the awesome data widgets.

EDIT: Erm, I’ve been known to be rather slow before, has it been like this ages? Yup, it seems I am just very slow given there are blog posts about this from the beginning of last month.

EDIT 2: Ok, maybe I get it now – a surf around some other blogs and it seems this might be an international redesign also being trialled on Amazon.com that has been showing up intermittently for a while for various people. Which actually makes the issues I’ve mentioned more major if this has been decided upon as the future direction for (presumably) all of Amazon’s regional sites.

Registration & Login @ Flickr

It’s a little bit of a random jaunt around some of the nicer (and not so nice) registration forms that the web has to offer.

My personal favourite has to be the WordPress form – there’s something about some nice big form fields that almost compels you to fill them with your personal details with gay abandon – indeed, I think there might be a whole new angle for phishing sites – big fields = big likelihood of completion = big money. The lack of a captcha is always nice as well, it’s almost like a vision of the internet the way it would be in a perfect world – although maybe that’s a little unambitious.

I’ll update with where we get to with our new registration and login process, it should be far superior to our current one and hopefully approaching the smooth experience that some of the featured sites provide.