It is easy to focus so hard on doing a good job for your clients that you disregard your own online marketing/presence as a result. Every few months we like to reflect on how we are going to market via our website and review how we can improve it based on the sort of advice we would give to our own customers. After all, if we aren't embracing the leading trends ourselves, what right do we have to recommend them to our clients?

This post aims to outline some of the logic behind the changes we have made. With a bit of luck it should will give you some food for thought on how you approach things with your own web presence.

Improving desktop user experience

Here is how our home page was structured before the changes (excuse the lack of text on here, we had to take the print screen from an archive of how the site looked before it was populated with the final content):

And here is how it looks at the time of posting this article:

The previous design ticked the marketing boxes: Position your services with imagery; have a clear value proposition; aim to navigate users through to where you would like them to be on the site; etc. However, the issue was that it was too text heavy and with the amount of calls to action in the rotator actually acted to reduce the need for the user to browse and explore the website. By positioning one clear call to action to explore our capabilities we hope to increase user engagement with our content within pages that are specifically designed to communicate what we do in the best way possible.

One thing we did incorrectly was positioning our value proposition as 'what' we do. Inspired by this TED talk we realised that people are more interested in the why. "We make complex web project simple"... So what? The real value is in why. So earlier in the year we sat down as a team and gave some real thought as to why we do what we do, in order to come up with "We challenge thinking to empower growth through (digital) innovation, because we enjoy what we do and believe in developing our business alongside our customers". This value isn't just echoed by our management, but by our entire workforce too as we now recruit with these values in mind.

In redesigning this element of the website we also considered the BaseCamp A/B testing case study, in this example they found that paid signups increased by 102% in having a more personal design compared to a cluttered one filled with calls to actions. The picture of the smiling young lady on our new design is no coincidence and aims to learn from what BaseCamp were able to achieve.

One final point on the desktop experience: You will notice that the small rotator within the smart phone rotates quickly and only displays portfolio examples. The whole structure of this does several things:

• Provides proof that we live up to our value proposition.
• Shows lots of examples quickly to capture the visitors interest and attention.
• Doesn't overload the user with information as each slide is purely visual.
• In displaying the content on the smart phone we are subtly communicating that working with mobile devices is part of what we do every day.

Optimising mobile user experience

Though the older version of the site "worked" on mobile and the elements of the page scaled to fit the page, it wasn't actually optimised with respect to the user experience and focus of the messaging. This was an issue considering that most people will dis-engage with a site if they find it difficult to use. Our demographic user is fairly young so we get a reasonable 350-450 hits per month from mobile traffic so engaging this user base is critical, especially considering we will be expected by our clients to practice what we preach.

Let's take a look at a side-by-side comparison of what we changed:

First thing that should be obvious is the way we have positioned "Above the fold" elements on the page. Content that is "Above the fold" is the area of the page that is viewable without the need to scroll. It isn't enough to prevent horizontal scrolling, you need to be giving though to how the user will engage with the content they see. The new view tells people what we do, why we do it and gives credibility to our cause by showing some examples, all viewable without the need to scroll. If you visit our home page on mobile you will also notice that the whole top red area is clickable and takes the user though to a page that sells our web and app development capabilities. 

When designing for a small screen it is tempting to try and squish the words in to fit and achieve this by dropping the font size. This is a convention that should be avoided and here is a really nice article things to consider regarding structuring responsive typography. Our previous home page fell into this trap, but now the font size is very clear and readable on all devices where the above the fold space is concerned the.

Sundry usability changes

Altering the navigation display process

One convention that a lot of out clients are opting for is a navigation bar that always stays in view as you scroll down the page. The benefits of this are obvious, it supports usability as where to go is always presented, and it can also be used to position important calls to action. We think the time.com website does this well in the way it unobtrusively positions the call-to-action to pay for a subscription to its content.

Though it can improve usability it is also a double edged sword as the persistent presence of the navigation bar also reduces the total amount of horizontal screen real-estate. To balance this we implemented HeadroomJs which is a nice little module that hides the navigation as you scroll down, but then shows it again as soon as you scroll up:

 We like this as it maximises the amount of the site that can be viewed on screen but also makes it very easy for a user to navigate around. Think, what is the first thing you do when you have finished reading an item of content? You scroll up to go back to the navigation. By binding the action to display the navigation on the scroll-up event we speed up how quickly the user is able to find what they are looking for anyway.

Simplifying the navigation

Here is a comparison between the old and new navigation aesthetic:

The feedback we were getting around the old design indicated that the distinction between the navigation for the site and the content wasn't particularly clear. Though it's obvious as to what the navigation is, it was acting to clutter up the site and reduce browsing user experience. In addition the secondary navigation (Client login, newsletter and search) wasn't even being used by many of our users, so there was really no need to have it so prominent. To combat this we chose to conform to more modern "Flat" design heuristics: flat colour, big fonts, simple edges. In doing this we keep the header on-brand, make it stand out when visible and only position the options to the user that they really care about seeing. We will have to wait to see how this effects bounce rates and browsing habits but initial feedback has been extremely positive.

Context related calls to action

To improve user flow through the site and to reduce bounce rates you need to have relevant and well positioned calls to action to visit the various pages on your website. We had this previously in the form of a "latest project" box but as part of this round of changes we have implemented it as a related project instead:

On the surface of it this may seem simple, on each page you just need to select a portfolio item that relates to it right? Unfortunately this isn't as straightforward: The portfolio constantly changes and we have over 200 pages on the site. To combat this we have implemented a tag based approach. We tag each portfolio item (e.g. website, web application etc) and then give each page a tag that it relates to, this way the site automatically picks a related portfolio item to display based on the content itself. This way it doesn't matter if the portfolio changes and we have the ability to roll this out quickly across the whole site. What's more, if a page doesn't have a tag set then it will pic a project from our entire portfolio.

Conclusion

With the web and it's standards in constant flux it is important to re-evaluate how you are marketing and engaging your customers and our recent changes reflect our take on what our users expect from our website. In all of this we have worked within the following rules of thumb:

• Trim the fat and simplify the number of options you display to your customers.
• Keep your navigations structure clean and simple.
• Give people what they want when and where they expect it.
• Personalise your marketing with pictures of real people.
• Don't just communicate what you do, remember why you do it.
• Consider your demographic.

If you found this article useful you may also be interested in some of the information around responsive website and user statistics in our free white paper: