1. Web Design
  2. Conversion

A Beginner’s Guide to Successful Conversion


Converting visitors into valuable users is arguably the most fundamental element of managing a website. We’re going to take a closer look at conversion, discuss what it is, cover some common pitfalls, and tackle improving your site’s conversion rates.

I’ll never forget what my high school economics teacher told the whole class during our first lesson:

“The single most important motive for any entrepreneurial activity is profit.”

Simple, yes. Cynical, perhaps. But to forget this mantra is to fail in business.

Equally, in web design, it’s easy to forget a website’s raison d’être and become distracted by the finer points of design and development. Whether a site aims to promote a business profile, sell products, or gain a subscribed following, it has specific goals and therefore specific conversions to achieve.

What is Conversion?

Conversion is a marketing term which describes the completion of a desired action by an individual (web site visitor, in our case). These actions can take many forms; subscription to a newsletter, completed sale, application for more information, to name but a few.

Relevant Terminology

Let’s cover a few more of the basics to avoid confusion later..

Conversion Rate: The quantity of successful conversions relative to the amount of casual visits. conversion rate = number of goal achievements / visits.

Impressions: The amount of times an advert is delivered (appears on a web page).

Click Through Rate (CTR): A way of measuring the success of an online ad campaign. click through rate = clicks on an ad / ad impressions. For example, a banner ad delivered 100 times (100 impressions) which receives one click has a CTR of 1%.

Conversion Funnel: A method used in analytics for determining a route taken through a given site. The funnel may begin with an ad or search system, continues through navigation and finally a completed conversion.

Goal: A desired result determined by those who manage a website. Google analytics provides tools for laying out funnels and goals, and measuring their effectiveness.

Conversion Rate Optimization (CRO): Analysis of conversion, failed conversion, and solving any problems encountered.

Whose Responsibility is it?

Optimizing a site’s conversion rate is down to everyone.

Everyone involved in the development of a website plays their own part. In a typical project the client may be responsible for the content and copy, functionality and efficiency may be down to the developer, whereas the visual flow and structure sits with the designer. Conversion should be forefront in each individual’s mind, and success relies on a combination of efforts.

So how do we measure conversion rates in order to optimize them?

Goals and Funnels

Google analytics allows us to track, not only if users reach our goals, but how they get there. We can define goals in the form of urls (even urls which don’t generate a pageview, such as on-page actions) and track how many conversions are realized. As we’ve discussed, these goals can assume the form of a definite url; a purchase confirmation page, a newsletter subscription, even a download file. But your desired goal may just as likely be defined as a specific amount of time spent on the site, or a minimum number of pageviews. These are all valid goals and they’re all trackable.

The following image shows the setting up of a (definite url) goal in Google analytics. Pretty straightforward; you enter a name by which you can recognize the goal data, then the type of goal it is, its url (in this case) and - if the conversion can be valued monetarily - you can whack a value in at the end.

Here we’ve determined our goal as being "thankyou.html", a page which is reached once someone has completed the contact form on our site. Once data has been gathered, a metric, just like the graphs you’re used to in Google analytics, will be generated. We’ll be able to see the fluctuating success (or failure) of this goal.

So we can see how our goals are performing, but it’s more valuable to be able to see where along the process strengths and weaknesses may lie. That’s where funnels come in. A funnel represents a specific route which you expect users to take to reach your chosen goal. By determining possible paths through your site, you can clearly see how many users follow them, complete them, or at which points they abandon hope and go elsewhere. Let’s edit our existing goal setup and add a potential funnel:

We’d already specified our goal as being "thankyou.html", and here we’ve specified one way of getting there through the homepage, a portfolio page, and then the contact page. This is an ideal path which we’d like to encourage our users to take, and now (thanks to funnels and goals) we can see just how realistic that is.

Take a look at this (albeit fabricated) visualization report for the funnel we just specified:

Consistently deteriorating traffic..

The figures may be fake (genuine conversion rates tend to be a fraction of this!) but you can clearly see users gradually dropping off the radar as they approach the goal. Visualizations such as this highlight the weak links in the chain, enabling you to target the problem areas of your site.

At this point, you’ve been made more aware of possible pitfalls in your site structure. For the sake of argument let’s say you know there’s a problem with your contact page - plenty of users are reaching it, but a high proportion are failing to complete the form. How do we go about nailing down exactly where the problem lies?

How do I Improve my Conversion Rate?

Conversion Optimization is about analysis on a case-by-case basis. Examine the success of your goals, scrutinize where problems may lie, and experiment with solutions until you’re confident of the results.

In spite of what you may read elsewhere (largely by companies which offer quick fix solutions), there are no magic remedies for poorly performing sites because there are simply too many variables at play. What works well for one site, may be disastrous for another. Analyze your issues and apply common sense.

Consider the idea that your users have arrived at your site, fully committed to fulfilling your goals. Every poorly designed bit of navigation, every vague instruction, every illogical layout is another hurdle between your user and succesful conversion. Hurdles can take many forms and they may not always be obvious, but identifying them is (clearly) important.

Sometimes, we get caught up trying to sell people, when all they really want is for us to make it easier for them to buy. KISSmetrics

"Good design" combats all possible problems, so I’m not going to list every last detail of what makes up a succesful solution. There are, however, some common sense areas which (as a designer) are definitely worth experimenting with…

Calls to Action

The term Call to Action describes a web page element which solicits action by the user. Often found in the form of a "click me!" button, a link which entices visitors to take the next step, calls to action can be the make or break of your conversion rate.

Typically, size, contrast, and positioning play an important role. Your call to action must grab the users’ attention and convince them to dive in. Check out this experiment by Josh Porter highlighting the benefits of a simple color change to his site’s "Get Started Now!" button.

“As always, we cannot generalize these results to all situations. The most we can say is that they hold for the conditions in which they occurred: in this page design, on this site, with the audience that viewed it.” - Josh Porter

What should you take away from this? No, not that you need to change your buttons to red. Simply that the aesthetics of a call to action button can affect the outcome of a user’s behavior. Check out Paul Boag’s article 10 techniques for an effective ’call to action’ for some sage advice.


Forms are a classic culprit for scaring users away. How many times have you gone to purchase something, only to give up when presented with a mammoth info-greedy form?

Take CAPTCHA inputs for example. Perceiveably neccessary to prevent spam filling your inbox, but they’re proven to be large walls to climb over for many users. A report by Casey Henry back in 2009 pointed out the direct effect CAPTCHAs have on conversion.

Examine the following images; both illustrate conversion across 50 websites, the action in question being successful submission of a form. The first shows activity with CAPTCHA turned on, the second with the CAPTCHA turned off. (Green areas represent failed conversions).

The results of this experiment would suggest that preventing SPAM isn’t worth also preventing conversions.


This ties back in with our look at calls to action; consider where you place your elements for interaction. The fold (the area of a website visible without having to scroll) is technically awkward to define these days, thanks to different devices displaying various resolutions and proportions. However, it’s safe to say that a user should be made aware of their following action as soon as possible.

Analyzing heat maps makes it clear where users focus most of their attention on any given web page. This report from a couple of years ago highlights areas of attention on scrollable pages. Looking at the image below, we can see that most attention is given to the top of a web page, falling as the page is scrolled down. A secondary peak of interest occurs when the footer is reached.

These thoughts would suggest that it’s wise to place calls to action prominently at the top of a web page, and again at the bottom.

OK. So we’ve covered what conversion is. We know how to measure the conversion rate of our site, and we’ve looked at some possbile areas of improvement. How do we now work out what works and what doesn’t?

A/B Testing

Having established that there’s a problem, it’s time to (once again) lean on Google and see if we can figure out how to fix it. We turn now to Google’s Website Optimizer tools.

Setting up an experiment (known as an A/B Test, or a Split Test) here will allow us to compare conversions across several versions of the same page. For example, we have our existing contact page, this will act as our control. We then duplicate the page, making some deliberate alterations which we believe may improve (or worsen) the chances of our users completing a conversion. We may decide that the contact form has too many fields, that we’ve applied unfairly restrictive form validation, that the form is poorly positioned on the page. There are many variants which could alter the outcome, so make a few versions of the page and set them up in an experiment.

Once you’ve added your pages, plus a destination page to track conversions (the "thankyou.html"), you’ll be prompted to add a wee snippet of javascript to each page, after which you can upload them to your web server. When a user reaches your original page, they’ll be served one of the alternatives and carry on as normal. Data is collected about the varying success of each page (obviously, the more data collected, the more accurate you can expect results to be)

A tested combination typically needs about 200 conversions to get statistically significant results. Web Optimizer Help

Matrices are made available for your analytical pleasure:

What you’re aiming for is a High-confidence winner, a page which, after enough data has been collected, is perceived as being the most successful candidate amongst your page variants. You can then confidently implement the winning configuration in your site and hopefully experience a higher rate of conversion. Better still, you may recognize exactly what it is which makes your "High-confidence winner" so outstanding and be able to apply that magic to the rest of your site!

For more information on A/B testing, check out Lara Swanson’s recent article A Primer on A/B Testing on A List Apart.


If you weren’t previously aware of the concept of conversion, I hope I’ve given you a good understanding of it. If you’ve had experience of goal/funnel analysis, and A/B testing I’d love to hear your thoughts! When all’s said and done, conversion is pretty important. I’m going to leave you with one final thought:

“Forget about pulling in more traffic until your site successfully converts the visitors it already gets.”

Additional Reading

Looking for something to help kick start your next project?

Envato Market has a range of items for sale to help get you started.