Fixing Up Websites Using A Heatmap: A Case Study

Lots of people know about heatmaps, but are unaware just how useful they can be for fixing UX issues. Here at Ptengine, we get requests every day from people looking to improve the experience of their visitors. We put our powerful heatmaps to work and see what problems we can find.

Here, I am going to walk you through some work we did for a San Francisco Non-Profit. They were looking to gather more donations for their food bank, so we loaded up Ptengine and got to work….

The Glaring Problems

Suggestion 1. Remove Trigger Happy Banners

Our trusty “scrolling heatmap” revealed the first glaring problem. Their banners were too big.

As you can see above, lots of people simply aren’t scrolling past the major banner at the top of their landing page. They are less likely to click the ‘download’ button, and are unlikely to see the “Feeding America” Logo, which is there for a reason!

The donate button is located at the top of the pages (see above). This means the large banners are actually distracting people from clicking it. Also, we noticed the Donate Now button redirects to a separate domain, which has to be tracked separately. This can impede the tracking of conversions in terms of donations actually completed.

On top of reducing the banner size, we suggested that they don’t use multiple campaign banners running on a slider. Just choosing one and sticking to it won’t distract users from the Donate Now button as much.

Suggestion 2. Remove Redundancy

There are almost no clicks on the Learn More banner button versus a high interest on the About Us button at the top of the page — they both take users to the same page. We suggested that they remove the Face of the Community Banner. Users are reaching and getting the information they need through the About Us button. (The image can be moved to the about us page as well)

Suggestion 3. Create Events

There are no events created to track key metrics’ conversion rates. This is making their job harder.

To create an event for the Donate Now button in order to measure what its conversion rate is:

  • From Ptengine’s main page, click on “Event” and select the page where you want to create the event.
  • Then select which element you want to create an event for.
  • Click Define.
  • Name the event, select where the event is located, add a description, and click “Confirm”.
  • With the event now created, click on Settings, Conversion, and + Add Conversion.
  • Select the event you want to track, name your conversion, and save it.
  • With this event and conversion set up, they can now track conversions and filter heatmaps to see how users that converted behave differently from users that didn’t. This will give them valuable information!

Suggestion 4:

Use the high traffic of the volunteer page and add a sentence there to stress the need for donations as well, something along the lines of: “We value deeply your support and willingness to help us nevertheless donations are also very important to us. Please donate now.”

Suggestion 5:

Create a Volunteer Now button and place it beside the Donate Now one. This would take the majority of users directly where they want to go and could potentially bring more attention to the Donate Now button.

Suggestion 6:

For the Lemonade Stand banner: Create a funnel to track how many users click on the Download Here button and actually download the file.

  • First thing is to create events for both buttons following the same procedure mentioned above for the Donate Now Button.
  • With those done, we can create the funnel, which is similar to conversions with a small difference. Go to Settings, Conversion, and + Add Conversion.
  • Select the event you want to track, name your conversion, and turn Funnel On. Now add the extra event that completes the funnel.
  • With this we can track how many people are lost by clicking the first button and how many people actually download the file, giving us the conversion rate.

These are some of the more glaring problems/suggestions to be made, but we threw in a few extras, just to be sure…

Extra, Bonus Suggestions:

Create a Thank You page group that gathers the data from all thank you pages and their a unique identifier for each person that has donated.

If all users were redirected to this page automatically after completing the donation, we could also use it as a funnel to track how many people click the Donate Now button and actually complete the donation.

  • From the Data Center dashboard, click the page button and select page group.
  • Click on the page group field and select Add Page Group.
  • Select + Add Page Group.
  • Create the rules that will enable you to gather traffic only from the links you want. We are using RegEx because it enables us to track the information even with an unknown variable as the identifier id.
  • With the page group created, we now need to create a conversion to it as we did for the donate button. The difference is that we are selecting a page group as a goal and not an event.
  • With this, we can also filter the behavior of users that have reached the thank you page and we can also see what its conversion rate is — ideally we would need a direct redirect to this page for the conversion to have a higher accuracy.

Landing pages usually have to address the interests of many stakeholders — and SF-Marin Food Bank page could well suffer from some internal disputes over changes to their site. However, a report like this, backed up by a tool like Ptengine can help interested parties reach a beneficial compromise, moving them closer to their organization’s main goal.

If you liked this case study, and you are interested in letting Ptengine take a look at your site, you can sign up for our free trial!

Have a lovely day,

Guy Geeraedts

Work-wise I’m a complete nerd, started playing with computers and nerdy stuff back in the days when I was a little kid. Grew up with tech, IT, software and marketing. Studied a lot to become a marketing guru...

Leave a Reply

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

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