When we originally launched the redesign for Fool.co.uk I had every intention of writing it up in a blog post - in fact I even wrote half of it. However, there’s nothing like jetting off on a three-week holiday immediately afterward to reduce your desire to write about work! Still, with the dust well and truly cleared and the snagging list addressed now seems like a good time to cover it!
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.
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 1024x768 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.
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.