New home page design

LCN home pageYou may have noticed we launched an updated home page design yesterday, so I thought I would take this opportunity to explain some of the reasons behind the changes.

We, like many others, use google analytics to gather data about site usage and help profile our customer base. One of the many useful tools provided by google analytics is site overlay. Using site overlay you can see percentage figures of where and what users are clicking on, these overlays are commonly known as “clickmaps”. This can be useful in identifying areas that are in need of change, layouts that are not working as expected or links that are not being understood by your end user. It doesn’t give you as much of a visual representation as some commercial clickmap software would (e.g. clickdensity) but it does give you a good starting point.

When updating our homepage we used both our clickmap data and feedback we had received from our customers. The key areas of change are explained below.

Top Navigation

We have made some subtle changes to the placement of links in the top sub navigation. We added a new “LOG IN” link to the top sub navigation based on customer feedback about not being sure where to log in to their account. We also removed the “I am looking for” drop down menu in the top right due to its poor usage figures and low relevance, considering the fact that in web page real estate terms it is premium space i.e. above the fold, it was replaced with our contact telephone number.

Higher Impact Banner

The most visually prominent section of the home page is the large banner running across the top directly underneath our navigation, we refer to this as our ”Impact banner”. We have spent some time optimising this to provide the highest “impact” possible. Our impact banner now contains a strap line stating clearly what we offer ”Domain names and web hosting at incredible value” and a bolder search box aimed at prompting the user to take action and search for a domain name.

Simplified Homepage Content

Some of the feedback we received regarding our old home page implied it was very text heavy and in areas difficult to read. Finding the right balance between SEO (Search Engine Optimisation) and usability requires constant attention, and the home page over the course of time had become a little bloated as a result of this imbalance.  We have simplified the content to only show the most relevant information to our customers whilst maintaining our SEO strategy. We re-styled a lot of areas giving them more spacing and clearer headings to allow information to be read at a glance. The home page now also contains domain name pricing which shows our visitors how competitive our pricing is and helps retain the attention of comparison shoppers without making them visit another page.

Footer

One of the most noticeable aesthetic changes is the improved footer section. We wanted a content area where we could convey sub-information to our customers in a subtle way without taking up valuable space in our main content areas. Our footer has been re-styled to look detached from the rest of the website and contains useful links to the majority of our pages. It also allows visitors to stay up-to-date with both our Tweets (Twitter posts) and blog posts.

Other improvements

Whilst re-designing the homepage we have been working behind the scenes to dramatically improve the way we handle CSS and images. We are now making full use of a CSS editing application known as CSSEdit (found here: http://macrabbit.com/cssedit). Using this application we have re-structured our main CSS styles into one easily maintainable style-sheet taking advantage of the very useful grouping functionality to help us organise our styles.

Over the last few months we have been more aggressively adopting a principle known as ”progressive enhancement”. Using the latest CSS techniques we have added additional styling to areas of website to benefit users who view our website in modern browsers. An example of this can be seen on our ”impact banner”, in Safari and the latest version of Firefox you can see drop shadows on the domain search form. Although very subtle these make the text look very crisp.

A lot more of the images found on the homepage have been combined into ”sprites” as a result of this images load quicker, make less requests and improves the speed of the site as a whole.

As a whole we feel the changes we have made will greatly improve the usability of our website, content is easier to read, key areas of the site are easier to find and it’s faster. As always feedback is very welcome, over the coming year we plan on improving our website even more and all ideas will be taken into consideration, so don’t be shy!

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>