Benjamin,

Front end developer.

HomeServe homepage on a desktop.

Why change

The reason for a change was pretty simple, the majority of users were now accessing the HomeServe.com website from either a tablet or mobile device rather than desktop. The issue was that the previous version of the website wasn’t friendly to these devices and although a user could get around ok it could be massively improved, and anything that can improve a user journey is a good thing.

I guess another reason could be that every now and then a homepage does start to feel dated and could do with a simple refresh, most designs or layouts won’t last forever.

anything that can improve a user journey is a good thing

Me, just then

Iterations

The rebuilding process began months before the eventual homepage went live, starting with simple pencil sketches on paper into wireframes with Axure and then HTML, CSS prototypes. It was these prototypes that would then be shown around the business or in user testing scenarios to iron out any early issues before real development started.

Some of the original prototypes were very different to what was deployed, but by creating these “dream” versions we created elements that could work in more standardised designs. The reason the deployed version “won” was that it didn’t drift too far from the existing homepage look and layout, a worry for some was that a big change to layout and design would adversely affect users, i didn’t agree.

An idea we called the dream.
An idea we called the dream.

Changing the layout is not enough

Simply making a page look better on a small device is not enough, the user may also be on a slower connection where every second counts. The new responsive version of the homepage had a near 50% reduction in file size, 9 less scripts, 5 less style sheets and nearly 20 less images to request from the server (80 files to 52) *.

* Source, Firefox Web developer toolbar comparison.

The page could still be improved, there are a number of redundant tags and those files that are left should always be minified and gzip’d and every image through be run through a tool such as TinyPNG.

HomeServe homepage on a mobile.
HomeServe homepage on a mobile.
Likes
  • The fact the homepage is now responsive
  • It’s the start of something good for the whole user experience which can’t be a bad thing
Dislikes
Lessons learnt
  • Don’t try anything too clever / different from the norm, a lot of people can be scared of a drastic change