The ultimate web design guide: Designing your website homepage to convert

Insights, Wordpress

Messaging

When beginning the design stage of your website, the team at Loop Web Design recommend putting yourself in the shoes of the type of site visitor you would like to attract. When you begin work with a design agency, they usually start by helping you build out a client avatar, as a detailed client avatar can help designers to go deeper on the implementation on how the brand impacts the client and create a much richer and precise outcome for you.

Many websites are not as strong as they could be, due to being unintentionally inwardly focussed by showing the site visitor what the company wants to tell the user about their service, rather than looking at the site from the client’s perspective. It is important to clearly state the user’s pain point and show what it might look like if their pain was resolved.

Further messaging notes

  • Give the viewer insight into the product, which builds excitement.
  • The overall look and feel of every landing page should be consistent with your core brand.
  • Before scrolling, the client should be able to see an attention-grabbing headline. This usually relates to the client’s biggest pain points.
  • Clearly answer the questions:
  • Who is this for?
  • What problem(s) does it solve?
  • What do I need to do next?

Images & Video

Who are they?

Show imagery that reflect your best potential clients, so they know you are talking to them. All imagery should support the copy.

Home page before scrolling

Menu Section

  • The company logo is visible at the top left of the page.
  • Navigation is limited to the essentials.
  • The primary call to action holds a prominent position on the top-right of the page. Click a button, fill out a form or call a number.

From menu section down to the bottom of the screen before scroll

  • Headline/sub-headline.
  • Supporting imagery.
  • Call to action immediately – give visitors a chance to act without scrolling.
  • Clearly answer the questions:
  • Who is this for?
  • What problem does it solve?
  • What do I need to do next?

Call to Actions

The page maintains a consistent primary and secondary call to action (CTA).

CTAs should always be repeated in the following sections-

  • On the Top Menu.
  • In the section directly below the menu (above the fold).
  • In the body of the rest of the page at least one more time.

CTA copy is clear and compelling, and the visitor knows the EXACT action they need to take (e.g. Click

a button, fill out a form, call a number, etc.) to progress to the next step.

Body of the home page

Text, images, and video clearly and concisely explain the following-

  • HOW the product/service works.
  • WHO will benefit.
  • WHAT the visitor needs to do next.

The sections are clearly labeled, and the copy is compelling and persuasive.

Trust Factors

You need to establish trust with the site visitor before they believe your message about how you can solve their problem. To help this along we display trust 3rd party endorsements – we call these trust factors. Trust factors should be used near top of the page and then peppered throughout the other content, finishing with a strong trust factor just before the final call to action.

  • Impressive logos from existing customers are featured prominently on the page
  • Industry awards
  • Statistics/numbers e.g. 4,000 projects completed
  • Customer case studies
  • Google/Facebook Reviews or Testimonials
  • Social Media Share/community size

We also make sure to include visible Privacy Policy and TOS in the footer as this can also increase transparency and trust.

In addition to all important and essential information

  • Expanded navigation
  • Physical address
  • Links to Contact Us
  • Terms of Service
  • Privacy Policy

The footer also serves as a resource directory for flagship content and case studies.

Forms

Forms as a method of call to action achieve approximately a 20% lower conversion rate when compared to phone, however they can be there all the time so are good to use.

  • Only ask for information you need – limit unnecessary form fields.
  • Forms often convert higher if they are triggered by a CTA button rather than sitting there open ready to fill. 

This is because the user responds to the CTA-like message before thinking if they are willing to fill in the form. Once clicked we humans like to think of ourselves as consistent and so because we have clicked the button to take action, we are more likely to complete the form. Also having an open form high on the page now a days feels like a bit of a hard sell tactic.

Open forms on the footer are fine and more expected.

Search Engine Optimisation (SEO)

How much text should be included?

The general rule is that user experience should come before SEO, so write as much copy as you need to convey the information that is needed for your visitor on that page. 

  • Too little text/information can leave the site visitor with unresolved questions.
  • Too much text makes the customer give up trying to find the information they are after.

If you can create a great user experience and maintain a minimum amount of text on a page to 350+ words you are more likely to succeed with SEO also. Even better if some other pages on your site have 1,000-2,000 words on them.

Use of Primary page title

Use H1 for the titles using the main keyword for the page

Google typically displays the first 50–60 characters of a title tag. If you keep your titles under 60 characters, our research suggests that you can expect about 90% of your titles to display properly. – Moz.com

Make content scannable by using H2 tags for subheadings

Proper use of subheadings throughout a site can help content become scannable, allowing the user to quickly find the information that is important to them.

Using keyword early

Using your keyword early in the title and body text signals to search engines the importance of the keyword to the rest of the content.

Meta descriptions

Make sure a meta description has been added for each page and that it includes your keyword.

Meta descriptions can be any length, but Google generally truncates snippets to ~155–160 characters. It is best to keep meta descriptions long enough that they are sufficiently descriptive, so we recommend descriptions between 50–160 characters – Moz.com

Alt text

Make sure alt text is added to images and include your keyword as these can rank in google image search.

Use appropriate Internal links to increase the number of pages viewed

A key metric that determines the quality of your site in SEO is how many pages within your site are visited, we note that about 2 pages is common however this is not good. Search engines assume that the more pages viewed the higher the quality of your site.

The challenge with increasing page views is that you could decrease your time on page and decrease conversion.

Time on page

Time spent on page is also an important metric that feeds into domain authority ranking. The more information on a page the better your site will do with this.

The challenge with increasing time on page is that you may combine pages to increase the content on pages, but then have less pages to link to that customers will be interested in.

Page Load Speed

Page load speed is an important indicator of user experience and feeds into your domain authority ranking. It is important to keep your page load speed below 3 seconds.

You can test page load speed with this tool https://developers.google.com/speed/pagespeed/insights/

NB: It is very hard to achieve a good mobile score – very few sites do.

Tracking code such as google analytics, google ads pixel, live chat widgets, pop up plugins all slow down page load.

Comments (0)