A Recipe for CRO Success: Step-by-Step Instructions for Website Optimization

by Cecilia Haynes

Last updated on December 3rd, 2018

Recipe for website optimization success

You don’t know what you don’t know, and this adage goes doubly when it comes to website optimization. With all the planning in the world, you never know how your audience will respond or if they’ll take the actions you want them to take.

While you know your product, software, and content inside out, the same can’t be said for your target audience. No amount of guesswork will help you — but customer data will.

Where do you start getting answers to why people are not clicking through multiple pages, not adding items to their cart, not getting through the signup process, and not subscribing to your site?

Enter our CRO recipes!

These step-by-step guides give you a starting point that you can easily use whether you’re at the beginning of your website optimization efforts, or 30 A/B tests in.

We’ll continue to release more dedicated recipes for specific industries and markets, but for now, this beginning recipe will set you on the right path regardless of your business type.

Recipe 1: The Basics of Analysis

We begin this first recipe with the reminder that you need to approach your website as a stranger. Keep an open mind and hold no assumptions. Most importantly, don’t try to focus on too many goals at a time, or you run the risk of getting overwhelmed.

When you limit your scope you’ll not only get a better understanding of what’s working and what’s not, but also be able to collect meaningful data for the next round of website optimization.

In this particular recipe we’ll use Quick Sprout’s “contact us” form as an example.

Quick Sprout get in touch form

Recipe Step 1: Going Through Your Desired Action

One valuable starting point is to go through your ideal customer sequence yourself.

Pick your top goal and then try to execute it as if you were arriving on your website for the first time.

This can be anything from watching an overview video, clicking through to a product page, submitting an email, or heading to your pricing page.

Keep an eye out for:

  • Pop-ups
  • Distracting imagery
  • The need to scroll down to reach your desired action
  • A lack of information on what your business provides

Pay attention to CTAs that are hard to access, and check if you’re presenting too many choices so that people don’t know where to go.

In the case of the Quick Sprout form, the only obvious impediment is the very long infographic keeping people from getting to the form quickly.

Recipe Step 2: Creating a Snapshot

Using Crazy Egg terminology, a Snapshot is a digital screenshot of your page that we use to track the click and scroll behavior of your website visitors. Snapshots come in 5 different flavors: Heatmaps, Scrollmaps, Confetti reports, Overlay reports, and List reports.

We’re going to go over the use cases of each one today, using the Quick Sprout contact form for reference.

Think of Snapshots as a visual representation of the aggregate behavior of your website visitors.

They give you a bird’s eye view of how your audience is responding to your site and whether they’re skipping over crucial elements. We even log information like referral source, whether they’re new or returning visitors, search terms, and much more.

Creating a Snapshot of your page with the optimal settings will ensure that you are set up for success with your website optimization.

We recommend choosing to separate the tracking of each of your traffic sources so that you aren’t faced with mobile data interfering with your desktop analysis, and vice versa:

Crazy Egg Snapshot settings

Under our additional settings, make sure to pay attention to the pop-ups option. If there is a large pop-up obscuring your page, then you’ll need to omit pop-ups or omit another specific element so that you can actually see how visitors are responding to your page.

Website optimization: Handling popups

In the case of the Quick Sprout form, there are no pop ups that could obscure the capture of user behavior on their “Contact Us” page.

Recipe Step 3: Recording Individual User Sessions

Visitor recordings are what the name implies: videos of your visitors’ navigation and click behaviors as they move through your entire website.

While we provide pre-filtered playlists for you to view, the aim of this guide is to get you to hone in on the data around a specific visitor goal.

Crazy Egg's Recordings playlists

The first step is to head to your settings and choose the page that you’d like to start tracking (in our example, this would be “https://www.quicksprout.com/contact/”).

Crazy Egg Recordings settings

Whether you choose to track customer journeys based on multiple pages or just a single one, you’ll be able to see exactly how visitors are interacting with your site. The value here is a dynamic video experience where you can take note of glitches on your site, and any factors that are blocking or facilitating conversions.

In the case of QuickSprout, they can identify barriers to completing their specific goal (contact form submissions). 

Now that Recordings are set up on this page, we’ll move on while Crazy Egg collects visitor data and check back in a few steps!

Recipe Step 4: Looking At Hotspots With Your New Heatmap

Once your Snapshots have had time to gather data*, it’s time to dive into the analysis.

*The time frame on this depends on your web traffic, but a good frame of reference is 5,000 visits.

The Heatmap is always a good beginning point when you begin a new website optimization project, because it gives you an overview of the click hotspots on your page.

Let’s begin with a Desktop view; we’ll cover tablet and mobile analyses in future recipes.

Crazy Egg heatmap

From even a quick glance before scrolling further down Quick Sprout’s “Contact Us” form, you can see click activity on the static image. The infographic is not linked to anything, so that would be a good starting point for website optimization.

The next step is to zoom out by clicking anywhere on the image, in order to identify the areas of concentrated clicks. In this case the middle region of the page doesn’t have many interactions, so I headed right down to the bottom of the page where the form was located.

Heatmap click activity - seeing the big picture

Since the main goal for people is to submit the form, and the form at the bottom is what is receiving the vast majority of attention, another good idea for increasing conversions on this page is to add another email capture form further up the page.

Now, let’s head over to the Scrollmap report to see exactly where that additional form should be placed.

Recipe Step 5: Identifying Key Attention Points With A Scrollmap

Scrollmaps help your analysis along by showing you the elements on your page where people are the most engaged with your content, and the areas of your page that are getting completely overlooked.

Looking above the fold with heatmaps

The most valuable real estate on any web page is the area above the “average fold.” The average fold is the aggregated screen size of all of your visitors; it tells you what they see when they arrive on your page without needing to scroll down.

As you can see in the scrollmap above, the area right above the fold would be a great location for Quick Sprout to add an additional “Contact Us” form since we observe that 99% of visitors are generating impressions on that portion of the page.

Now it’s time to zoom out again by clicking anywhere on the Scrollmap. This will let you see the areas of transition where people are scrolling without stopping to look at certain elements.

The drop offs in color tell you people were no longer interested in pausing to read the copy: red to green, and then green to blue.

Seeing the big picture with heatmaps

By the time we get to Quick Sprout’s all-important “Submit” CTA, there are only 35% of impressions logged. That’s an attrition rate of 65% of the audience!

This information reinforces the need to add in a primary form to the top of the page where the vast majority of the audience is paying attention.

Crazy Egg's recipe for website analysis

Now that we have the data that backs the hypothesis of moving the form up above the average fold, it’s time to see how we can make the infographic more captivating to audiences.

The first drop off occurs right below the average fold, where impressions drop from 82% to 44% within a single section.

Learning to read a heatmap

An almost 50% drop off in impressions is a clear signal that customers aren’t motivated to continue reading the infographic and scrolling down to Quick Sprout’s form.

Now it’s time to head over to the Confetti Report to learn more about the particular audience interacting with this page.

Recipe Step 6: Analyzing Visitor Demographics With The Confetti Report

While you may have a target audience in mind, the Confetti Report tells you about your actual visitor segments. You can sort each of the clicks on your page by 22 different criteria.

One of the most useful aspects of this report when you’re focused on website optimization is helping you determine the content that should be on the page based on whether it’s appealing to your most valuable leads or customers.

Tracking website traffic with Crazy Egg's confetti report

In this particular instance, we’ll focus on clicks from New vs Returning visitors. This info might be helpful in deciding the copy to add to that area of major drop off we saw in the Scrollmap report.

As it turns out, the Quick Sprout contact page has 4x more New visitors than Returning visitors. This speaks to the need for more education around why people should submit the form, and what they can expect once they have done so.

I’d recommend adding in visuals or copy to the drop off section that address this need.

Tips for reading a confetti report

As you can see, new visitors are also the ones clicking the most within the infographic, because they expect it to be interactive.

Crazy Egg's confetti report in action

Now it’s time to head to the Overlay Report so that we can dig into the data behind each click.

Recipe Step 7: Digging Into Desired Visitor Behavior With The Overlay Report

At this point, let’s focus on the form itself so we can learn more about the types of people who are clicking submit and converting on the Quick Sprout contact form.

Each element on the Overlay Report is color coordinated so you can easily see the most popular elements (red) and the less popular elements (green and blue).

You can also find out the exact number of clicks on any given element, and the audience segments that make up those clicks.

Crazy Egg's Overlay report

An interesting finding in this instance is that even though New visitors outnumber Returning visitors 4 to 1, 40.6% of the submit clicks are actually from Returning visitors! When it comes to conversions, that ratio is much higher.

This piece of information shows that Quick Sprout needs to do a much better job of convincing New visitors to submit the form, since they make up the much larger population on the page as a whole.

By adding in an additional form to the top, they can lower this barrier to entry and hopefully capture more of the New and Returning visitor populations.

To round out our report analysis, we’re going to use the List Report and Overlay Report in tandem.

Recipe Step 8: Gathering Action Items With The List Report

When we head over to the List Report, you can immediately see the most popular elements on Quick Sprout’s contact page.

How to use Crazy Egg's List report

While we’ve talked a lot about the placement and addition of another form on this page, we should also go ahead and explore how they can make the existing form even more effective at converting visitors.

Notice that while there are 1377 clicks on the message portion of the form, only 280 people are clicking “submit.” This is the time to experiment with copy around the form and within the empty form itself, with the aim of encouraging more people to click submit.

Quick Sprout's Contact Us form

Going back to the rest of the items on the List Report, the next line item is a non-interactive element. When you click on an element name, you’ll be taken to the Overlay Report where you can see that element’s placement on the page. You can repeat this process for each of the Text and Layout type elements within the top 10 on the List Report.

As the fifth most-clicked item on the entire page, it would make sense for Quick Sprout to make that non-interactive header a link that moves people to the form located at the bottom of the page.

Taking action from a List Report

Now it’s time to check in in our Recordings!

Recipe Step 9: Viewing and Interpreting Recordings

Website optimization is all about user behavior. While you’re watching a recording of visitors interacting with this page, keep these crucial factors in mind:

  1. How did people arrive on this page?
  2. How are people interacting with this page? Are you noticing any patterns?
  3. How are people leaving your page? Are there elements in your navigation that are acting as escape hatches for your visitors?
  4. Are there any particular triggers that cause visitors to complete your action?
  5. Are there any broken or faulty elements on your page that are creating a negative design experience?

Watching recordings of website visitors with Crazy Egg

We recommend watching multiple recordings so that you get a variety of perspectives of how visitors navigate through your website.

Plus, you’ll be able to see in real time any components that are causing a negative user experience so that people exit the page without completing your desired action.

It’s also valuable to note the pathways that people took to reach a certain page. You’ll be able to learn more about CTAs to add to different pages on your site that will direct people where you want them to go. You can also update the copy to more closely match a previous page’s information so you build a more seamless customer experience.

In the Recordings example above, you can see that this visitor first viewed the University page before heading to Quick Sprout’s contact form. It might be worthwhile for them to add in copy about the marketing education that visitors will receive when they submit their email.

Recipe Step 10: Coming Up With An Observation-Based Hypothesis

As you’re going through the analysis process, make note of each of the ideas that come up. You don’t need to leave every analysis session with 10 or 20 new ideas; even one to four will suffice.

The aim of this exercise is to have each of the different reports and data points validate each other so you can approach your design adjustments with confidence.

Here are the recommendations that we’ve rounded up so far:

  1. Add a form to the top of the page
  2. Make elements on the infographic clickable and interactive, especially those that have received the most clicks
  3. Add in more copy throughout the infographic educating people on why they should submit the form, and what happens when they do
  4. Optimize the existing form at the bottom of the page by changing the copy to be more encouraging of people to submit their message

There are many more website optimization tests that can be run, including removing the infographic altogether, and instead interspersing small images throughout the page. You’ll need to determine for yourself the scale of your improvements and how much of an overhaul you have the resources for.

Remember To Take It One Step at a Time

design-email-newsletter-template-conclusion

Before you head off to run your own website optimization experiments, keep this piece of advice in mind: focus on incremental improvements.

Whether your design resources are non-existent or infinite, you do not need to approach CRO as a monolithic task that requires you to invest in a massive round of website improvement.

Sometimes the smallest changes can make the biggest differences, so just take it one step at a time.

Your goal is to Always Be Testing. With every new test launch and copy change, you build a better experience for your customers and open yourself up to new opportunities for improvement.

No Comments

DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

Cecilia Haynes

Cecilia Haynes is the Product Marketer at Crazy Egg, working remotely from Florida and Hong Kong. She loves helping customers, traveling, and eating all the things. You can follow her on Twitter @unsettledtck.

NO COMMENTS

Comment Policy

Please join the conversation! We like long and thoughtful communication.
Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment.
Finally, please use your favorite personal social media profile for the website field.

SPEAK YOUR MIND

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Show Me My Heatmap

I love sites with - combine that with and it gives such a great set of data to inform /

Andrew Martin

@AndrewDoesSEO

What makes people leave your website?