Introduction

In this guide, we’ll show you 14 ways to improve your websites design and increase how users engage with your site. From design strategies to A/B testing.

You can use the links above to skip to a section if one area interests you more than another or if you’re already familiar with certain areas of improvements.

Map the user journey

Content around design or design around content? It sounds obvious but it’s not uncommon to see a website design that’s been developed for the content to be added in afterwards. It may look nice but it won’t convert your visitors into customers, and that should be your main objective.

Don’t just start designing your website before you’ve mapped out how customers are going to get from point A to point B. The start of any good web design project is to map out the user’s journey first.

It’s sometimes easier to reverse engineer this process. Start at the end and work backwards. For example, if you’re selling products, your end goal is probably for your websites visitors to add products to the basket and then checkout.

Image showing a layout of a users journey through a website

If your site is information-based, your goal may be for them to get in touch for more information or to book a consultation.

One way of mapping out your customers flow throughout your site is by using a board and sticky notes. Think about the path you’d like your customers to take and map it out visually. Start by writing down each step of the user’s journey and place it on a board so you have a visual representation.

To understand the user’s journey, you first need to identify the four types of search intent. This will help you when you’re considering the customer’s path throughout your site.

E-commerce sites will have different journeys compared to service-based websites and the user journey will differ dependant on what type of products or services you sell.

Before doing anything, map out the user journey.

Think about structure & navigation

Good structure and navigation will help your users find what they’re looking for. You’ve mapped out the user journey and have a good idea now of how users will flow from point A to point B, but not all users will enter the journey at the same stage.

Image showing website structure and navigation

You should consider this when thinking about the structure and navigation of your site. Keep it simple, keep it clean. In your main navigation (normally located in the header), you’ll want to have all the pages you consider to be most important.

For medium to large sites, you’ll have a lot of pages you want to be easily found. However consider placing the top priority pages in your main menu, and additional links in your footer. This keeps everything within a couple of clicks but ensures navigation remains simplified.

Ideally, try to use fixed navigation. Hamburger style, pop-out menus don’t have as much user engagement on desktops as they do on mobile.

Keep your web design clean

We live in a busy world. As technology evolves, people seem to have less time and are distracted far more easily. How often have you been watching something on Netflix to quickly get your phone out to Google something?

Less is more. You don’t want a crowded site as it detracts from the user experience. When designing a website you want to keep a focus on usability.

What makes a website clean? Some areas, like white space and colours, we’ll be covering shortly – but the main essence here is that less is more. Simplify your web site design to get your message across clearly and declutter pages that are overcrowded.

Utilise white space

Utilising white space, i.e. the areas of your webpage that are white and don’t contain any visual elements helps break up your messaging and keep focus.

There are tons of sites where you’ll see examples like this but Apple is a prime example of doing it right. See how you instantly focus on the MacBook?

And as we talked about above, the navigation is kept to a minimum.

Image showing a screenshot of the Macbook air webpage

However, a lot of clients don’t like this space as they feel it can be better used to advertise products and services. With that being said, a good website design team will always try and utilise as much white space as possible during website development. Studies show that the correct use of white space increases user attention and engagement.

It’s like we said above, less is more and when it comes to the design, that’s certainly the case. If your site is cluttered and messages are not easily read with a quick scan of the eye, user engagement rates will decrease.

It’s worth noting that white space in web design, doesn’t have to be white. When we say white space we are simply referring to a single colour around an element.

Choose a single colour and keep it consistent. Think of that picture you’ve got on the wall. Chances are it’s not surrounded by anything other than a single colour which brings focus to the picture itself.

Use colours to your advantage

There’s a lot of psychology around colours and different colours evoke different messaging.

Is your business within the creative industry? Maybe try Purple as your primary colour. Or are you trying to promote trust? If so, Blue is a good option.

Whatever colour scheme you decide to go for, make sure you choose a palette that complements other colours.

Image showing colour scheme example for a website

Primary, secondary and accent colours are all you need but more often than not, we’ve had requests for this element being a certain colour, and another element is another colour. For no reason other than ‘we like that colour’. Try to avoid this approach and plan ahead.

The point here is don’t pick a colour scheme simply because you like it. And once you do have a primary colour in mind, use free digital marketing tools at your disposal to create a palette that works well together.

A good place to start is with the Adobe Colour Wheel. Looking for a bit of inspiration or feeling a bit lazy? Try Coolors.

Make your site responsive and mobile-friendly

More and more users are turning to mobile as their primary viewing source. We’ve reached a point where more than half of all web traffic comes from mobile devices.

If you’re using Google Analytics on your website, you’ll be able to view a breakdown of which devices and browsers are most often used to view your site. For the majority, this will be mobile.

In 2015, Google rolled out its mobile-friendly update and announced that it was to become a ranking signal. Basically put, if your site wasn’t mobile-friendly, it would impact where you appeared within search results.

Starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results. Consequently, users will find it easier to get relevant, high quality search results that are optimized for their devices.

Illustration showing a laptop and a phone, demonstrating a responsive web design

In March 2020, Google announced that they were moving to mobile-first indexing for all websites as of September 2020. That’s a big change in the way websites are crawled and indexed and now means its more important than ever for your website to be mobile-friendly.

While Google recommends not having separate sites for desktop and mobile as was once popular, you should look at your layouts, and utilise CSS to display/hide elements that may only be suitable for certain devices.

Implement attractive call to actions

CTA’s, AKA ‘Call to actions’ has a big impact on how users engage with your site and encourage users to go to ‘the next step’.

There are two key areas you’ll want to try to have a clear CTA. Above the fold (the area of the webpage before a user has to scroll down to see more) and at the bottom of the page to guide them to the next step of your journey.

A good example of an above the fold CTA is on the Adidas website. Product image, title, and a button. That’s it, and it works well.

Picture of Adidas website showing a clear CTA

CTA’s are psychology motiviated. Colours, locations and even the text itself can have a big impact on your sites conversion rates. This is a good reason where you should use A/B testing to measure and improve the results (More on that further down).

Google managed to increase its revenue by $200M per year by testing various shades of Blue within their ad results. A small change can make a big difference.

When creating CTA’s, try to remeber the following:

  • Above the fold works best
  • Use actionable text
  • Use colours that stand out
  • Use heatmaps to determine placements
  • Measure the results

Scroll vs Click

We’re guilty of it, but accordions or elements that you have to click to view additional content simply doesn’t convert as well as scrolling does when it comes to web design.

Let’s take sliders as an example. They look good and normally have a nice transition as they move from one slide to the next. But studies show that most of the impressions (often as high as 90%) go to the first slide with the additional ones receiving hardly any views whatsoever.

It’s the same story for accordions, often used for FAQ pages. We use them ourselves, but you should have an understanding of why to use one over the other.

Animated image showing how an accordion on a website works

Long scrolling pages convert better than shorter ones filled with slides and accordions. If you’re doing the web design and development yourself, this probably isn’t a problem. If you’re outsourcing to a web design company, however, the budget may be a restraint.

When should you use slides and accordions over longer based pages where you have to scroll through the content? If you’re thinking about your SEO strategy (more on this later) then accordions can be worthwhile as they enable you to get extra information in your web designs whilst keeping users focussed on the areas that are most important to you.

If on the other hand, you’re trying to convey important selling messages to your website visitors, then scroll-based pages defiantly win here.

Link Management

Placement can make a big difference to user engagement as it could start encouraging users to visit other platforms which probably isn’t what you intended.

Your website visitors may want to find out more about you, but they’ll find you even without those header links. That’s not to say you shouldn’t place social links on your website. Just consider their placement and positioning.

Image showing areas of a website header and website footer

The footer is more suited for social links. Users get to the end of the page and it shows them additional links. Placement in the header could mean a percentage of your users never got this far.

The same goes for external links. Whilst it’s always nice to link to external resources, be sure to limit this, and when doing so, make sure these links open in a new window.

Use A/B testing

If you’re not A/B testing, you are literally throwing money away. A/B testing is the process of serving one element to one group of users and another version to another group of users. I.e. different coloured buttons.

You then monitor how each version compares and which one performs better. Using this data you then implement the changes.

Mockup showing website A/B testing

From button placements, colours, CTA text, or whole pages (split testing), A/B testing gives you the data needed to see how your site is performing.

Implementing this form of testing into your website will partly depend on what content management system you are using so one size doesn’t fit all here. However, it’s defiantly something you should be implementing into your digital marketing strategy.

Optimise your page speed

Pagespeed is important for more than one reason. First, its a ranking factor used by Google. It also has a direct impact on your bounce rates and user engagement. Sites that take longer than 3 seconds to load, on average, will see more than a third of their users leave before viewing another page.

There are various ways to optimise the loading speed of your website. From making sure you use a solid web hosting provider to decluttering your site to reduce the overall page size.

Illustration of website loading speed. Browser in the background.

You should also look at more in-depth ways of increasing your loading times such as correct use of imagery, caching, minification and lazy loading.

Alongside these easy to implement methods, you should then look at the technical approaches to improving page speed such as caching, minification and lazy loading for images.

Identify 404 pages

The longer you’ve had your site, the more chances are that you have broken links, either internally or externally. These are not the type of links you want to have as they create more than one problem for your users and your rankings.

Users clicking on a link that leads to your 404 pages are more likely to leave the site and look elsewhere. That’s a customer you could potentially lose.

Browser illustration with 404 page not found inside

For search engines, this means dropped pages from indexing which could have been pointed elsewhere.

Identifying your broken links should be a regular activity that you perform and can be done as part of your website audits. (We’re covering this next). You can then do one of two things. Either fix the broken links or set up 301 redirects so the link juice flows to other relevant pages. This will help you reduce your bounce rate, and strengthen your brand positioning.

Perform a site audit

Regular website audits are crucial if you want to keep your site in top condition and improve your online visibility and user engagement.

Picture showing site audit overview within Macbook device

It’s an area often overlooked by web owners but the data insights revealed in audits not only sets a path to improve your search engine presence but also online conversions. Find out more about the benefits of website audits and how they can benefit your business.

Focus on your SEO strategy

If you followed everything in this guide, specifically site audits and A/B testing, you should be in the fortunate position of having a ton of data to work with. Be smart and use that data to improve how your website performs for you.

SEO icon with magnifying glass representing the 'o'

If you outsource your SEO to an agency, follow their progress. if you manage all your digital marketing internally, then create a roadmap from the data you’ve gathered and monitor the progress. You may just be surprised at the results you can achieve.

If you’ve found this guide helpful, consider sharing it by using one of the social share buttons at the bottom of this post. It encourages us to write most digital marketing guides to help businesses achieve organic growth.