To recap, the main issues with the old site were:

• Crazy homepage with bonkers messages
• No hierarchy in terms of buttons, messages, actions or otherwise
• Badly-built (all in tables)
• Strange combination of design templates

So has the redesign gone well? Did they sort out those issues? Or have they become Route Bum? Read on and find out!

First impressions

At first glance, things have improved over the old site. Good start, as previously the homepage was too shouty (for want of a better word), and there was a lot of confusion. This time, the layout (in terms of where things go) is more structered and there’s a peristent top-nav to get the user to the right area.

The site has also employed the much-vaunted mega drop-down (woo! sounds like something out of a manga comic). Usability experts generally agree these are a good way of getting people into the right area quickly, so good work there too.

Deeper pages still seem a little sparse, but messaging and layout are adequate and don’t hinder the user to adding items into their basket.

However.

You knew there was going to be a ‘however’, right? However, there’s still some work to do on messaging and creative., which leads me into…

Messaging and hierarchy – homepage

The site homepage has a main promo area which cycles through 10 (at the time of writing – more on this later) creative options that advertise various things. It feels like more thought needs to go into this, as currently there’s a whole lot going on in there – especially in such close proximity to the right-hand promo area.

Here’s the homepage as a whole:

Click to enlarge

…and here’s a 500px wide snapshot of a section from the homepage:

Click to enlarge

I know this is one area, but it draws the eye because it’s confusing. There are brand messages mixed with retail messages – meaning the impact of both are lost somewhat.

“Mix any 2 for £40” (which, incidentally, reminds me of the creative that Game used to use on stickers in-store…) and “Free Delivery” are presumably pretty key messages as they’re drivers to make people buy…yet they are boxed in by “R1 Denims” and “Supra Footwear” creative.

Interrogating site analytics to work out visitor paths & actions will help here. If people are that desperate to find Supra Footwear, get some creative into the main promo area. If (as I suspect) they arrive and either type something in the search box or browse to a relevant section, then these messages need organising.

Key points here are:

• Prioritise: Which of these messages is the most important to the business?
• Organise: Work out which ones should be displayed. Is it appropriate for them all to be next to each other like that?
• Design: Rework some of the executions of these – they’re in a bit of a mish-mash of styles, which is confusing to the eye
• Deploy: Once the three things above have been done, deploy it
• [Optional] Test: Using something like Google Optimiser, you can test different executions of creative on homepages quite easily to see which one drives the better results
• Rinse & repeat as required

Also…10x creative options on the homepage? I don’t reckon any visitors will (intentionally) see any of them past #2 or #3 – unless it’s been coded to be random (which it hasn’t at the time of writing).

This is a) a wasted effort for Route One, since coming up with 10x creative options each week/month/2 months is a pain, and b) will most likely just increase site load times. Since Google is looking to start rating sites on load time, it’s probably worth optimising this as much as possible.

E-Commerce trustmark

I’m giving this one it’s own little section, because it’s something I’m particularly interested in.

Route One are making use of an E-Commerce ‘trustmark’ – an image provided by a 3rd party that is meant to increase customer trust that a site is safe to use and do business with online. In this case, it’s been provided by Comodo. This currently sits on the homepage, but quite away near the bottom.

My issues are thus:

• Don’t hide it: If you’re going to use a trustmark, don’t hide it away
• Use it in a relevant area: As an extension to the above, use it where it’s most needed – at the checkout stage
• Who are Comodo? Why should I trust them over anyone else? Perhaps using someone like Verisign is a better idea. But the crux of the argument is…
• …their use is debatable: eConsultancy have run a couple of articles about the use of these trustmarks, and whether they’re worthwhile or not. The takehome? They’re not. Make sure your checkout journey is infallible – that will increase trust more than any graphic will.

As a parting shot on the subject, a company in the USA was recently fined by the FCC for purporting to offer dynamic trustmarks – when actually they did fuck-all and were just ripping off the sites that purchased them. Story here.

Messaging and hierarchy – product page

Here’s a screegrab of a product detail page:

Click to enlarge

Sparse, but the messages are clear. This is good. You can mouseover the image of the product and it magnifies it, which is also good. The main foible is that, whilst I like the functionality – it’s not immediately obvious: I only found out about it by accidentally hovering over the shoe for a second. This is a useful feature, so mention it somewhere!

I would also seriously debate the value of the cross-sell/tell-a-friend box. This is only:

• Taking up space: this is the fault of the execution rather than the principle. Cross-selling is a key method of increasing sales, but this isn’t really the way to do it because it’s MASSIVE. This space could be much better used.
• Distracting: How many people tell their friends about these DC Fitz skate shoes? Again, the principle is sound, but it should perhaps be more subtle.
• Duplicated: the ‘Add This’ button is already on the page which allows people to share it via Twitter/Facebook…does it really need an email option too? Perhaps choose one or the other.
• Takes a while to load: My browser (latest version of Firefox) takes ages to load the page. Whilst doing so, the Email a friend fields and the cross-sell box are all on one page:

Click to enlarge

Moving on from that, the way the site informs a user when something’s been added to the basket is good: an overlay that’s non-intrusive, but informative.

Navigation & technical

As mentioned above, the top nav is a mega drop-down, which is good. Getting deeper into the site, I also like the search/refinement options on the left: these really help users to drill down to exactly the item they’re after:

Technically, the site has also improved a lot: screenreaders should have a much better time of getting through the content here, and tables appear to have been abolished! Nice work.

My only gripe is a non-informative URLs: “www.routeone.co.uk/Store/product-is-45726″ doesn’t mean anything to anyone. However, you can use mod-rewrite to get round this and make these sensible/legible. This will also help in natural search results.

Conclusion

It’s definitely an improvement on the last site, and clearly a lot of work has gone into improving a whole bunch of issues that were present beforehand. However, there’s clearly still work to be done – though these feel more ‘executional’ (and therefore easily solved) than ’site-critical-everythings-gonna-blow-up’, as it was last time!

P.s: No favicon either…tut tut.

This is all well and good…but being a massive geek, I noticed something. Play the video above again, and listen to the noise the camel makes at 0:20. Hear that noise? That’s not a camel noise: oh no.

It’s a sound from a zombieman out of the DOOM video game.

Evidence? Why certainly:

• Download the sound clip (12.7kb WAV)
• Embedded sound clip (needs Quicktime): http://wadview.bigredtower.com/cwWADView.dll/Sounds/DSPODTH1?View&WAD=DOOM&Loop=false
• Doom Wiki with sound references: http://doom.wikia.com/wiki/Zombieman

Does anyone know who made the VISA ad?  (EDIT: Apparently Saatchi & Saatchi made it). I’d be interested to know whether the sound was officially licensed from (presumably) id software who own the Doom franchises. Or perhaps it’s so old that it’s now available in the public domain? Anyone know?

And yes, I fully accept I’m a massive geek for recognising a half-second sound clip from a game that was released 17 years ago.

p.s: Big thanks to http://doom.wikia.com: loadsa Doom knowledge!

I’ve installed it on this blog, so from now on if you visit via your iPhone, Blackberry or other mobile device, it’ll use an optimised theme that loads quicker and is generally more usable on the smaller screen. Hurrah!

Anyhoo, at least I didn’t get it quite as bad as whoever is responsible for sending out the OMG Affiliate Network newsletter:

Click to enlarge

Porn broker? Nice

For one reason and another, I was recently forced inclined to look for more information regarding weddings abroad – specifically in the Caribbean. Drop ‘caribbean wedding‘ into Google, and the Virgin Holidays (www.virginholidays.co.uk) brand appeared top of the results. Having worked for Mr Branson in the past (and generally thinking his products are pretty good), I went and had a look.

How did I get on? Was the site virginal, or did it more resemble a loose woman of the night? Read on…

First impressions

Not good. The main issue I have with this site (and really you can probably stop reading after this paragraph as it contains the synopsis of my rage) is that the entire weddings section of the site is presented in a shockingly crap embedded PDF/brochure arrangement – complete with epically tacky ‘turnable pages’ instead of … oh I dunno: usable navigation, maybe?

Why do this? It’s bad for navigation, bad for spiderability, and bad for user experience. It would not surprise me in the slightest if people were dropping out of this content at a massive rate.

And, Richard, just for your information: No one wants to be forced into entering their email address just for the privilege of being led around this farcical merry-go-round of a website:

That’s right: you’re not allowed to carry on in to the content unless you provide a valid email address. What the hell? So after entering an entirely fake email address (yep: I’m a rebel), I’m allowed into the hallowed sanctuary of the Weddings content.

Before that, though, I thought I’d find out why they wanted my email address, and clicked on the ‘Further details’ link (which, let’s be fair, is hardly descriptive and doesn’t really indicate that this is where a user should click if they want to find out why Virgin are harvesting their email addresses).

Sure enough, I’m led to the privacy page, which proudly tells me the only 4 instances where Virgin will ever want my email address are:

1. When making an online booking (which I’m not)
2. When ordering a brochure (which I’m not)
3. When signing up for email updates (…which I’m not)
4. When applying for jobs using an application form (guess what? I’M NOT.)

If I were a lesser being (which I’m not – hah look: continuity humour!), I’d perhaps be concerned at this stage that something were amiss with the Virgin website and perhaps I was giving over my email address to unscrupulous hackers, since I wasn’t doing any of the things listed above…yet was still being asked for my email address.

Bad journey so far, and we’re not even in the content. Great start, Virgin.

Usability and navigation

Using this embedded brochure, the user is presented with this bizarre website-within-a-website effect: three sets of navigation (browser, embedded left/right buttons, and a right-hand tabbed affair), complete with tacky page-turning effect and tiny font size.

It is abundantly clear at this stage that, instead of developing a good quality website for happy couples to explore and find out more about what Virgin can offer them, they’ve instead opted to simply digitalise their offline brochure and stick it on a webpage. My personal rule #1 of website design:

Offline designs do not often work online.

Why? Because your audience, and how they want to use/interact with the medium, is completely different between off- and online. Interaction is the keyword here, and trying to replicate an offline brochure in an online space is, frankly, retarded.

Flicking through a printed brochure is part of the experience: looking for any nice pictures or headlines that catch your eye, passing it over to the missus so she can make wilting and unfair comments about the bride in that particular picture looking like a horse…that kind of thing.

Similarly, it’s also fair to assume that if your reader is on a fact-find mission, they’ll persevere a little since a) the brochure is in their hands, and b) usual stuff like prices and related crap is generally at the back in a big, hard-to-understand table. It’s all part of the printed glossy thing. People know what to expect.

Websites are different and need to be treated as such.

• There’s less time for fannying about, as users make decisions much quicker on the web
• There’s no loyalty: Google is just a click away, and therefore so are your competitors
• There may be a higher degree of fact-finding involved in an online mission (as there was in mine), and the information needs to be laid out differently – and be way more findable and accessible

This brochure tries to lead the user through offline bullsh!t, and really just gets in the way of actual useful content. Here’s the first page:

How is this of any use to anyone? Tiny text, massive imagery, a table of contents that – whilst it does actually link to the right pages – is not obvious that it’s clickable! Plus you have to zoom in to read anything, which then makes navigating round the rest of the page a complete faff.

Add to this the fact that there’s no noscript alternative, and you’ve got a completely inaccessible site. Wonderful.

Final thoughts

There are one or two parts of the site which are ‘regular’ HTML, in that they can be accessed without the need to dive into this shitty brochure, but they don’t contain much (if any) useful information. Being forced down a badly designed, badly executed and technically inaccessible site is really bad practice.

Virgin Weddings: you’re officially a slutty loose woman of the night. Fail.

Introducing “What Do I Do With This?” (www.whatdoidowiththis.com), a site dedicated to recycling/reusing surplus building and decorating material. Designed to be used by both individuals and trades alike, it’s aim is to help reduce waste and help people find the building materials they want at a lower-than-retail price.

It’s literally only had the bubblewrap pulled of it last night, so there’s no content on it yet…but there’s a parternship strategy in the wings that will hopefully solve that.

In the meantime, if you or anyone you know has any spare paint, wallpaper or similar surplus DIY-related gubbins they don’t know what to do with – point them to www.whatdoidowiththis.com.

Any feedback or comments welcome.

A bit of recent digging revealed that maybe the spam team have just been held up whilst sifting through the weird link-building campaign that Aviva have been embarking on. Admittedly, this could also be the ‘Caffeine’ update coming into effect, but the evidence is a bit…damning, frankly.

Last week, Aviva were ranked #2 in Google’s natural SERPs for ‘Life insurance’ – a coveted and popular search term, up there with ‘car insurance’ and the like – second only to Money Super Market (who, let’s face it, will probably be dominant for insurance-based search terms until hell freezes over).

As of today, though, Aviva are not even on the first page.

The reason? A quick check through Yahoo Site Explorer reveals inbound links from noted and respected life insurance authority sites such as:

• http://www.zen.org.au/reiki.html (an Australian Reiki site)
• http://www.goddess.com.au/Playshops/ (an essential oils site)
• http://www.carpetsofkashmir.com/silk-carpets.html (’nuff sed)
• http://www.sharkfreemarinas.com/LC/catch-release.shtml (my personal favourite: “Tags for sharks are as important as life cover for humans”)
• http://www.setox.eu/projects.html (the Slovak Toxicology Society)
• http://www.bujinkancornwall.co.uk/training/kihon-happo

Nice work! A quick squint through those pages reveals links dropped into the content that’s is (in my personal opinion) quite clearly there purely for search engine gaming. Perhaps there’s hope for spam detection yet…?

It’s essentially a fancy ‘email a friend’ mechanism, but it’s been quite nicely done – with options to wrap your present and send a personalised e-card to your friend, informing them of their new present. It’s not ground-breaking, but I like it.

Screenshots below!

Click to enlarge

Click to enlarge

Click to enlarge

Click to enlarge

Click to enlarge

That in itself was all well and good: throwing it open to the public and offering cash to the winner is a great way of engaging with their users and – incidentally – getting shitloads of design options created for what is essentially a fraction of the price they’d have had to pay an agency (if you were to include all their associated fees etc).

Anyway, one of the flaws of the competition – in my personal opinion – was that it insisted one use the imagery from the Alamy collection. No real problem in that, but it meant that in order to enter a design which featured imagery, one had to buy the imagery from the site.

That annoyed me, since I was quite willing to create free designs for them – but I’m damned if I’m about to be forced to pay for the privilege. As such, I abandoned the competition with literally a few hours to go ’till the closing date.

Perhaps egotistically, I thought the designs I came up with were ok…so I’ve decided to put them up here to be scrutinised, criticised, and generally pulled apart by anyone who has an opinion – and that should mean you, whoever you are.

Want to see them? Reckon it’s about time I got critique’d myself after I’ve been reviewing all these websites? Fancy an insight into what kind of twisted logic my mind goes through? Read on!

Wireframes

I decided to build the ‘new customer’ version of the homepage – one that’d include images – so to start with, I developed a bunch of wireframe versions to eek out what might work well.

#1

I wanted to make sure the site would work acceptably in 1024×768 screen resolution, so I started by creating a template that size, and dropping in the basic elements (nav, search box, footer links and header links) and seeing how they sat.

Click to enlarge

I wanted the search box to be prominent (as that is most likely to be the primary activity of a new visitor) with a big background image to capture visitor’s attention. The top header and bottom footer links weren’t negotiable according to the rules, so that’s where they stayed. This particular design wasn’t a massive departure from the existing site layout – and it kinda obscured the background image – so I felt more work was required.

#2

To differentiate a bit, and to give more space over to the background image, I moved the search box into the top-left of the main window, and reduced the size of the background image space. Not convinced, I moved the search box again, and aligned it to the right, underneath the top header box.

Click to enlarge

It felt lopsided, so finally settled for placing it in the header box itself. This way, maximum space was given to the image, whilst retaining the key functionality for new users…

#3

Click to enlarge

Now I had an idea of where things were gonna go, I started to fill in the details and work out the functionality and so on.

Mockups

The next thing to do was work out how these designs would work in larger screen resolutions (in this case, 1280×1024).

I created all the mockups with one main question in mind: will these work on a larger screen? That’s why these following screenshots have large tracts of grey in the lower half – I was seeing how they’d work.

In order to better work out colour and functionality, I dropped a holding image into the background and fiddled a little more with the tabs. In deference to the fact that I didn’t want to buy any for this kind of freebie exercise, I decided to use the selection of free wallpapers that Microsoft provide in Windows Vista as background photograph examples.

Click to enlarge

I actually kept quite faithful to the current colourscheme of blue and white, as I felt this was quite clean, fresh and if my ideas about the background image were to come to fruition, they had to be fairly neutral so they didn’t clash horribly.

The next issue was how to deal with the interaction between these functions and the new layout. Just sticking them on wouldn’t work, as it’s look too paper-and-scissors. I decided on overlapping tab devices, as the header was looking a bit cramped with all the functions stuffed in there:

Click to enlarge

Aware that the nav could look slightly cut-out, I went for a subtle drop-shadow on the header bar, tabs and footer links section.

I still wasn’t happy with the colours, ‘cos they now felt a bit heavy – so I ditched the blue for the function bar, and went for a light blue in the search bar. I also moved away from the current Alamy logo, and instead used the one they’d supplied – but with nothing around it.

Click to enlarge

Lastly, I tweaked the colours for the header bar (including the opacity & heaviness of the fonts), and then also tried it with a few different images to make sure the background interacted ok with the nav.

The final result

Click to enlarge

So there you have it. What do you do think? All comments welcome.

Predictably (why else would I be mentioning it?), they’ve recently relaunched it – so I thought I’d share my views of it with you. Does it do the job it sets out to do? Have they taken a step back? Read on!

(Ok so I accept I’m late to the party with this one because eConsultancy have already written an excellent review of the new site – but I’m going to try hard to differentiate, just so you don’t get bored…)

First impressions

Firstly, to jog our memories, let’s look at the old site, in case you’d never seen it before:

That’s not the best screenshot, but you can already see it’s cramped, dated and no thought was given to the actual utility of the site (i.e what visitors wanted to do the most). Wonderful.

The site was relaunched in December 2009 and if the first impressions are anything to go by, they’re on to a winner. It apears to be set into a grid layout (the benefits of which are well-known, and the New York Times’ designer Khoi Vinh was key in drawing attention to these).

Hierarchy & functionality

Firstly, the site has good top-navigation elements that function not only to get you around the site, but also act as a breadcrumb.

The main thing that strikes visitors is the really obvious key function of the site: the massive train time finder box dominates the homepage.

It’s accompanied by good AJAX functionality that automatically recognises station names and/or the 3-letter station codes. This is really helpful if you’re heading somewhere that you’re not sure of the spelling of.

Unfortunately, if for some reason you don’t have JavaScript enabled, this bit of functionality becomes redundant – and also throws the page layout into mild disarray to boot:

This is a bit disappointing, and could have implications for users who – for whatever reason – don’t/can’t have JavaScript enabled.

The results page is pretty well laid out too, giving clear indication of what you’ve searched for, where you’re going and any associated alerts.

The results also have a little alert symbol tagged onto the end to let you know of any service disruptions that might affect the journey. There’s also a “Show me live departures & arrivals” box that’s further down the homepage. This, for me at least, is really key – since given the recent slew of bad weather, I want to know if the signalling systems in Wales have let us all down again by being unable to cope with a bit of snow.

Also, when searching for a certain journey on the homepage and then jumping to, say, the Season Ticket calculator, it will remember the journey you searched for on the homepage. Neat.

As mentioned in the eConsultancy review, the site doesn’t seem to deal too well with heavy traffic. During the heavy snowfall of Jan 6th/7th, the site was intermittently unavailable, which didn’t bode well…

Imagery and graphics

Iconography-wise, the site’s doing really well. I feel the graphics used throughout the site are apt, explanatory and helpful. It’s great to see some thought going into their use, and how they can help signpost users to relevant bits of info/content. They’re used well in the ‘Travel Centre’ on the homepage, which allows users to set up SMS alerts for their regular journeys and similar stuff.

The rest of this site uses graphics sparingly, other than in the footer and in an ‘Ask Lisa’ boxout, which is their automated, natural-language FAQ function.

The site carries ads, which I personally find annoying. This isn’t an issue, since AdBlocker removes them…but this leaves large areas of bizarre whitespace in the site which look weird. I fully accept this isn’t National Rail’s fault, but I wanted to whinge about it. Whinge whinge.

Conclusion

This is a real improvement. I used the old site for years, and this is definitely a relaunch to be proud of. Some comments on the eConsultancy review said the site didn’t work for them: one can only assume user error, since it works flawlessly for me.

Well done National Rail, and Fortune Cookie for the redesign work.