CRO Guide - Self Guided

Use this free guide to understand how each element on your website affects your conversion rate.

Click on the comments below to learn the best practice and how it will impact your conversion rate.

Click the button below to take the guided tour.

Cro Guide

Build Trust

Adding a phone number is one of the most impactful trust elements you can add to your website.

It will increase calls (but not as much as you may think). It provides peace of mind for your users.

It shows users that:

  1. Real people are likely to support the website.
  2. You can be contacted if there is ever an issue.
  3. You are not likely a scammer outside the U.S. if you share your phone number.

Logo Placement

When a user lands on a website, they ask themselves three questions before doing anything;

  1. Where am I?
  2. How do I feel about this site?
  3. What do I do next?

Your logo can effectively answer the first question at a glance on any page they enter your website on.

Place your logo in the top left corner because this is where users will look for it (Jacob's UX Law).

In summary, Jacob's Law states that...

"Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know."

This means that users will transfer expectations from other sites to your site, and by leveraging existing mental models, we can create superior user experiences.

Navigation

Ensure that your top-level navigation aligns with the users' goals and journey.

Too often, we see navigation that makes sense to the business; however, when we review heatmaps, we see the actual user journey is totally different.

Install heatmap software on your site and get a few months of data to truly understand the path your users are taking, then align your navigation to that user journey.

For heatmaps, we recommend Microsoft Clarity (Always FREE) or HotJar (Limited FREE).

Calls To Action (CTAs)

Always include a primary call to action (CTA) in your top-level nav!

You may also choose to have a secondary CTA present as well.

Providing a quick way for users to get started is a great way to lower bounce and increase engagement.

 

Proper CTA Design

IMPORTANT! Your CTAs should look like buttons. Buttons predate the Internet from the industrial age.

Studies support that we inherently understand how to interact with buttons, which is a great way to encourage engagement.

  • Primary CTAs should be visually biased to stand out from the page.
  • Secondary CTAs are less contrasted/biased than the primary so they do not compete with the primary CTA.
  • Your CTAs will ALWAYS be designed the same anywhere on your website!

It is normal for the CTAs function to change from page to page and even section to section depending on the user journey; however, they will always look the same throughout your entire website.

In some occasions, a textual tertiary CTA may be used.

Do not use more than two button designs... EVER!

 

Eliminate Distractions

Keep your hero (top of page) banner distraction-free. 

Eliminate any animations and movement from the page, including auto-playing videos. To be clear, there are some rare occasions where auto-playing video (no sound) is beneficial to conversion.

Instead, opt for a minimal background image with a dark overlay.

The overlay should be transparent but strong enough to eliminate the eye drawing into the image and offer great contrast for text.

An even better option is to use color blocks and design versus an image to save on page load speed. 

Get Clear on Messaging!

Create a title, subtitle, and 3-5 user benefits (bullets). Then add a primary and secondary CTA.

Example using an imaginary dog grooming membership website:

TITLE: Be clear and concise; tell users what we do.

  • Unlimited dog grooming for one low monthly price!

SUBTITLE: Tap into emotion and show the user what a life with your service FEELS like.

  • Enjoy the peace of mind of a happy, healthy pup with our grooming and wellness membership.
  • This is using an NLP tactic called future pacing.
  • We provide the user with the desired outcome and then bridge the gap with our service, product, etc...

USER BENEFITS: User benefits are not the same as features. People buy benefits, not features! Again use actionable emotional copy.

  • Enjoy the convenience of a set grooming schedule with unlimited flexibility and extended hours.
  • Love your canine cuddles with a soft, fresh-smelling pup.
  • Relax knowing your pup gets a comprehensive wellness check with every visit.
  • Take advantage of our technology with instant SMS notifications, easy online scheduling, and wellness tracking.

PRIMARY CTA

  • [Explore Membership Options]

SECONDARY

  • [Learn More] (anchors deeper in page)

Consider shortening the banner height if possible to allow more content to peak above the fold.

Trust

Add more trust below your CTAs!

By adding trust below your CTAs, you can expect an immediate conversion lift.

The trust should be designed minimally, so it does not compete with our CTAs for attention.

No color, possibly grey scale or solid with opacity. We want users to glance at them, feel good and move on. The best designs are the ones we do not notice.

For companies that do not have third-party ratings yet, you can use your current guarantees, return policies, and satisfied customers.

You can design trust!

Take each of your trust elements and design them into a badge or seal to look official and clean. Limit to 3-4 words, and you have increased your conversion rate significantly. 

Another option is to borrow brand authority from your client's and/or affiliates' logos. 

For example:

As seen in... [logo] [logo] [logo] ..

Hero Video

If you have an explanation/intro video, you may opt for using it in the hero banner.

Research shows that a video on a landing page can increase conversion by up to 80%. However, there are some recommended guidelines to get the maximum results.

Be sure to add microcopy above the video telling the users what they can learn and how long it will take them.

  • EXAMPLE: Watch this 30-second video to learn how we pamper your pooch.

Using the 16x9 aspect ratio is a visual cue for users to understand interaction (a playable video).

Use a well-contrasted play icon on the video

Use an eye-catching thumbnail for the video.

Alternative Creative

Here are some alternate options for using trust and without video.

Design For Clarity

Use subtle design elements to separate sections and make it easier for the user to skim the content. Keep in mind users do not read until they find something that is meaningful to them. Until then they will skim and scan the copy for ideas of interest.

Zebra striping uses a subtle background color to provide a visual separation. Avoid using strong colors. Instead, use barely noticeable hues of your primary colors or a subtle grey.

Horizontal lines <hr> work also.

Section Titles

Every section should have a clear title!

This helps set expectations for the user and eliminates confusion. Users know exactly where they are throughout their experience.

Subtitles and Descriptions

Try to add a subtitle or description to provide even more clarity for the user in each section. 

This is also where you can place microscopy, telling the user how to interact with the section.

For example;

Click on an image to learn more.

Visual Navigation

One of the first sections on your homepage should be your visual navigation.

For Lead Gen and Niche Product Sites

Visual navigation highlights the top 3-6 options for your users. These items should be in your top-level nav, and when possible, they should even be in the same order (by importance).

The visual nav will add more context with the following;

    • Imagery (where possible)
    • A short description (aim for ten words or less)
    • A clear CTA.

When these are done properly, users with high intent will self-select here to drill down to content that is most relevant to them.

For e-commerce websites.

Visual navigation highlights the top 10-12 options for your users. This will be your most popular and/or profitable category listings.

There is no hard rule as to how many you should list. Just understand the more options presented, the more cognitive load. More cognitive load equals conversion barriers.

You also risk leading users to the Paradox Of Choice (POC). POC is when the user has too many choices and is essentially paralyzed in the decision-making process. Paradox Of Choice often makes it easier for users to leave than to stay and make a decision (this equals work).

It is your job to simplify the shopping experience!

To do this, you will need to make the user think less and do some of the heavy liftings with well-thought-out funnels. 

Introduce social proof here!

There is incredible value for users knowing that other people have tried your service before them.

When possible, use short third-party reviews. If no short quotes are available, pull excerpts from a longer one and end with the ellipsis to signify that there is more to the quote.

Show a real name or initials for privacy. 

If you have many, then you can create a carousel like the one shown in the wireframe. The carousel should not move unless the user engages with it. You can scroll the entire row (2-3 reviews) at a time if you have many, or you can scroll one at a time if you only have a few. In both cases, limit the scroll action to 3. 

The reviews will not link anywhere. Do not use third-party plugins/APIs if they auto-link back to their site. Do not link these to another page on your site. Keep the user in the homepage experience!

We only want to demonstrate that we are making people happy with our product or service. 

If you are limited on reviews, use a single static review full width for the same benefits of added social proof.

Section CTAs

Provide microcopy with at least one CTA for one of our primary goals. Do not link to see more reviews!

After they have seen proof that we can do what we say, we want to invite them to go deeper into the funnel.

That may be [shop now], [contact us], or even [how it works] that anchors one section below.

Yes, offering an anchor for only a few pixels of the scroll is a great option. It is a micro-conversion that brings the user further into your sales funnel.

A micro-conversions is a small yes from your users. They are actions that lead the user one step closer to a macro-conversion (our primary desired action).

Enough micro conversions will lead to a macro conversion!

How It Works

Provide the user with a simplified idea of the process. This is where we set expectations.

Whether you are selling a unique product or a service, here is where you can outline the process.

The goal here is to show how simple it is for your users' life to improve with your product or service. 

Always use the last item in the section to show the user enjoying the solution. 

For example (same dog grooming example);

  1. Book your appointment online
  2. Drop your pup off
  3. Pick up your pup and enjoy the fresh-smelling cuddles together.

Try to keep your process in as few steps as possible. That said, tell the user EXACTLY what to expect. We are setting expectations, and if you fall short of your promise, you will upset your new customer.

Section CTAs 

Invite your users to take action. Set expectations for your primary and secondary CTAs.

Now that we are further down the homepage, we can introduce new, more direct copy and CTA microscopy. In other words, we can be a bit pushier. 

For example;

Don't wait one more day! Your pup will thank you for it. Sign up now to book your appointment.

[Sign Up Now] [Speak To A Pup Pro]

Optional Thin Banner

At this point, we can start offering alternatives to our primary and secondary goals.

Here is an example of a thin banner that we could use for a newsletter sign-up.

The key here is to offer something of value. Users don't just sign up because you asked. We have to show that there is something in it for them.

For example;

  • A high-value download.
  • Free consultation or free trial.
  • A discount on your product or service.

Here is an idea using our dog grooming example.

Get a free wellness check on your furry best friend!
Join our newsletter for exciting offers and how-tos for your pup.

[Yes, Please! Sign Me Up.] (Please note, this is the primary CTA because, in this section, this is our primary desired action.)

Optional Content Section

Here we can try to get the user to engage with the content. Whether you have a successful blog article or a long content video, either will work well here.

Use this section to educate and inform versus sell. At this stage of the experience, they have learned enough to know what we do. We want to try to get the user engaged in some way. At the very least, let's show them that we know our stuff and try to educate and inform them. 

Optional Content Section CTAs

The CTAs here will be about the content piece. We can take them to the article page for our primary and offer to take them to or our blog (other content) for our secondary.

Anything we can get the user to do to self-select deeper into our website.

Final Invitation

I recommend ending every page with one final invitation to our primary and secondary desired actions. 

You would be surprised how much this is clicked. If users make it to the bottom of your homepage, there is still intent. Sometimes one last offer is all they need to get started. 

You can experiment with various layouts, copy, and designs across different pages but always offer the option to convert as the last item on the page before the footer.

Scroll to Top