Search the site:

Copyright 2010 - 2018 @ DevriX - All rights reserved.

How to Design Your Website for Conversion Rate Optimization

There are a number of ways how a website could help your business grow. Some well-established companies may think that they don’t need a website for them to attract local customers. But according to a survey conducted by WebVisible and Nielsen, 86% of consumers said they had used the Internet to find a local business. While 78% use the Internet more during that time to find a local business than they did two years ago.

But we are not here to convince you why you need a website. We are here to tell you that having a website does not guarantee more customers to your business. And having a website does not mean that it will generate more traffic to your site.

So how would you make your website “work” for you?

Let us show you how.

Key Terms You Need to Know

First things first, before we proceed you have to know a few key terms that will be discussed in this tutorial so you will have a better understanding of the topic.

Key Terms

A/B Testing or Split Test is a scientific process of comparing two versions (A and B) of a web page to know which one converts better. You can test your headings, images, call-to-action buttons, and colors to name a few.

Call-to-Action (CTA) is a button or a line of text that urges your visitors to take an action. It tells them what to do when they are visiting your website. Some examples of this are a “sign up” button on a web page, a “buy me” button on an e-Commerce shop and the “download” button used by an app developer.

Conversion happens when a visitor or a lead completes a desired action. It means that the visitor successfully signed up to your website or checked out an item in your shop.

Conversion Rate is the percentage of visitors who take a desired action to your site. You can get your conversion rate by dividing the total number of conversions by the total number of visitors on your website.

Conversion Optimization or Conversion Rate Optimization (CRO) is a systematic approach of refining your website so it will increase the number of visitors to your site who take a desired action. If your goal is to increase your email subscribers, then you will want your visitors to sign up for your newsletter. Or if you want to increase your sales, then you should make them hit that purchase button.

The Landing Page is usually the home page of a website, but it can be any page on your site where the visitors would land to convert them into leads or customers.

Multivariable or Multivariate Testing (MVT) is the process of testing multiple variables on a particular page at the same time. It involves creating different elements in order to find out which combination converts the most.

Why Having a Website is Not Enough

Every website is an asset. Your website should be a money-making machine for your business. Your goal should not be just to bring the desired number of visitors on your site. The goal is to convert your traffic into profit.

“In a crowded market, having a website that simply serves as a brochure is no longer competitive.” — 2016 Small Business Marketing Trends Report

In traditional marketing, the challenge for business owners and advertisers is to get a prominent space to place their ads. But these days, the problem lies with the internet users’ attention span. Did you know that humans today have a shorter attention span than a goldfish? A research study conducted by Microsoft found out that from the average attention span of 12 seconds, it has now fallen to eight seconds.

So, what does this mean for digital marketers and website owners?

It means that they have to look after the design of their websites to maximize conversion. In order to reduce their bounce rate, they have to catch their visitors’ attention within eight seconds.

Elements of Web Design That Converts

If you want to create or redesign your website, here are the things you should consider in making a visually-appealing website that converts:

1. Images

Images play a prominent role in every website. They are used to easily attract and engage visitors, although that is not always the case. You should know how to use images properly to maximize its potential.

Website Images

Here are some tips on using images effectively on your site:

  • Pick Images with Human Faces

When you use an image of a person on your site, it gives your visitors empathy and strong connection.

“When we see a face, we are automatically triggered to feel something or to empathize with that person. If we recognize content on a website — such as a problem, dilemma, habit or whatever else — we feel connected and understood.” (Not Just Pretty: Building Emotion Into Your Websites by Sabina Idler)

Take a look at how PayPal use this technique on their landing page:

PayPal's Landing Page

  • Optimize The Images

When creating a website, it is important to optimize the images that you will use so they will not affect the loading speed of your site. Studies have shown that even a one-second delay in page response can reduce your conversion rate by 7%.

The idea of optimizing images is to make your images light by compressing them without affecting their quality. Some of the image optimization tools that you can use  free are:

  1. Tiny PNG
  2. Compressor.io
  3. JPEG Optimizer
  4. Optimizilla
  5. Kraken.io
  6. Ranking Easy
  7. Resize Photos
  8. Compress Photos
  9. Convert Image
  • Use Hero Images

To make things clear, hero images are not images of a super hero. A hero image is a big web banner image placed at the top of the website. They are commonly placed in the background with a line of text or call-to-action buttons.

Here’s an example:

Netflix Hero Image

Bonus Tip: Make sure that the images you use are responsive to provide a good user experience to your visitors.

2. Typography

According to Wikipedia, typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. It involves the use of typefaces, point sizes, line lengths, line-spacing, and letter-spacing, and adjusting the space between pairs of letters.

This video explains how typography has evolved from paper to screens:

Do you know how many fonts are there? The answer — no one knows. This is the reason why choosing the right font combination is not an easy task.

So, here are some font pairing tools to help you decide which combinations should you use:

  1. Type Connection
  2. Google Type
  3. Font Pair
  4. Type Genius
  5. Type Wolf
  6. Beautiful Web Type
  7. Fonts in Use
  8. Just My Type
  9. Typ.io
  10. Blender
  11. Font Combinator
  12. Typotheque
  13. Adobe Typekit
  14. Matcherator
  15. Typespiration

3. Whitespace

Did you ever wonder why Google doesn’t maximize the space of their website? That is because they are using the power of whitespace.

Google uses whitespace

Whitespace also called negative space, is a part of a website that is left blank or empty. You can use this on your landing page so visitors can focus on the call-to-action and increase your conversion. A whitespace does not necessarily mean that your site’s background should be white. You can play with colors or even use an image as a background. The goal is to make it simple yet give the best user experience.

Remember: A clutter-free website catches your visitors’ attention. Browsing a neat and well-organized site is a pleasurable experience for them.

4. Colors

Another important element to consider when creating a website is color. Keep in mind that colors have meanings so whatever colors you choose should reflect the message that you want to convey to your audience.

For example, most of the banks in the United States use the color blue as it signifies trust.

Major Banks in the US

Image credit: The Epoch Times

Take note of some of the positive and negative feelings that a color represents when choosing the right color combinations.

  • Black – In physics, black is not a color, although it also has a psychological effect on a person. It symbolizes power and strength but it can also represent death, unhappiness, and evil.
  • White – Generally, white represents purity and innocence. Hospitals use white to create a sense of sterility. However, it may also represent something cold, bland and isolated.
  • Red – This color arouses our emotions. It can be associated with love, excitement, and confidence. On the negative side, it symbolizes aggressiveness and anger.
  • Blue – It is the color of the sky, an ocean and is most preferred by men. The color blue symbolizes calmness, serenity, stability, and reliability. However, it may also represent sadness hence the term “feeling blue.”
  • Green – It is the color of the forest and often represents nature. Green means tranquility, optimism, and good luck.
  • Yellow – Just like the sun, yellow represents brightness and warmness. It is the most-attention getting color and that is why it is commonly used in road signs. However, it can also create eye strain due to the amount of light that it reflects.
  • Purple – It is the color of lavender. Purple symbolizes royalty and wealth, though some may interpret it as exotic or artificial.
  • Brown – It is an earthy and natural color. It signifies resilience, dependability, and safety. It can also mean sadness and isolation.
  • Orange – Similar to the color yellow, orange is also used to draw attention. It represents warmth, excitement, and energy. It is often associated with Halloween.
  • Pink – This color has a calming effect. It is associated with kindness, nurturing, and femininity. You should avoid using this color if you do not want your brand to look too feminine.

Bonus Tip: When you cannot decide which colors would be best for your web design, you can use A/B Testing or Multivariate Testing. It will help you to know which color converts better.

5. Mobile Friendly

In order to maximize the conversion on your website, it is very important that it should be mobile friendly. Due to the rise of the use of smartphones, people nowadays access websites in multiple screens –desktops, tablets, and mobile phones. Keep in mind that 8 out of 10 people use the internet thru their smartphones.

Man browsing on mobile phone

Use the following tools to know your website’s responsiveness for different screen sizes:

  1. Mobile-Friendly Test by Google Search Console
  2. MobileTest.me
  3. Mobile Friendliness Test Tool by Bing
  4. MobiReady Mobile Friendly Checker
  5. Urlitor
  6. Browserstack
  7. RankWatch
  8. PageSpeed Insights by Google

Remember: Mobile-friendly websites rank higher than those that are not.

Conclusion

When conducting conversion rate optimization, you should keep in mind that web design plays a big role in turning your traffic into profit. Follow the tips that we’ve provided above to prevent a high bounce rate on your site.

Choose a reliable and highly experienced development company who can do the designing and optimization of your website based on your technical specifications.

Leave a Reply

Your email address will not be published. Required fields are marked *