Popup signup forms and how to optimize them

I mean honestly, who doesn’t know popups? They occur everywhere on the web and they range from insanely annoying to intriguing.

If you have a webshop, a blog, or any type of channel, then you most likely thought about using popups.

The stats all universally show that popups work, at least if you put some thought into them. You can find lots of free templates online and often email marketing services offer them as well.

already after 2 seconds, the eyes are searching for the ‘close popup’.

But what should you focus on? There are just so many factors that you can tweak:

Timing
Copy
Imagery
Offer
Call to action (CTA)

Today we’re going to look collectively at the copy, imagery, the offer, and the CTA.

Part of a previous project of ours with Coach, was also to see how we could improve their popup signup form.

Unfortunately, for the popup itself we did not have any numbers regarding its conversion rate. But we can be sure to analyse how people react to the form itself when it shows up and that’s exactly what we did.

This is the popup signup form that they used.

What did we do?

During our test, we showed the popup form to 100 testers. While the testers were viewing the popup form, we recorded their eye movements, their emotions, and their heart rate through their webcam.

We only showed the popup for 10 seconds, which is more than enough, if you think about how fast you click them away.

The great thing about these measures is that we can dissect the popup form fully. What did people look at and when? How did that part make them feel? Were they convinced by the copy, design, offer, CTA?

Answers to these questions provide great insight and leaps in optimisation.

Results

Let’s start by looking at the summary results. How did all the testers ‘feel’ about what they saw?

You can see by the Valence, which is a simple positive/negative emotion score, that people didn’t seem too thrilled about the popup itself.

If we break it down into the most prevalent emotions present, we can see that Anger and Disgust are dominating.

This is already not great.

What led to these emotions?

Let’s check the heat map of the eye movements.

From this it looks like the headline itself has received most of the attention. Second in line, is the copy. Very little went into the signup fields themselves and the CTA was, compared to the headline, neglected.

What is quite telling about how the popup is received, is that the ‘x’ to close the popup received a substantial amount of attention.

Valence map

To know what exactly of the popup led to the emotions, let’s see what the Valence map says. It’s a combination of the eye movement heat map and the valence that we measured.

From the Valence map itself, it looks like the headline and the copy were not received very well. With the headline being received the worst.

Attention over time

As a last step, we looked at the pattern of eye movements over time. This can tell us what is looked at first and the following order of how the rest of the popup is perceived.

You can see that viewing starts out with the copy and the headline. What is very important to notice, is that already after 2 seconds, the eyes are searching for the ‘close popup’.

That simply means that the message of the headline and the copy did not convince at all. They did the opposite, leading people to exit as fast as possible!

Conclusion and impact

From the results, we can directly see that the headline performs worst and the copy itself is a close second.

Looking at the content of these, the offer in itself is very generic and not directly coupled to an offer now.

In contrast: “receive a 30% discount on your next purchase.” Would directly couple the signup to something in return, now.

It further tries to generate fear of missing out, also known as FOMO. The problem is that because it isn’t coupled to something directly in return, it is not working well.

The CTA of the button is ignored, here though it most likely is driven by the headline and copy. Visitors are not bothering to look further if those are not compelling in the first place.

The headline itself is also a CTA, but it starts with “don’t”. It would be better to chose action rather than inaction in the phrasing. “Be the first to know” would be much better.

Finally, we have the design of the popup. It is very minimalistic, which isn’t bad in general. But Coach has a lot of engaging images. If that was coupled with a good offer, then the popup itself will improve substantially.

Improve conversion rate with emotion tracking: the Coach example

Every webshop knows the problem of conversion rate optimization. How to improve conversion rate has been addressed many, many times all across the web with a lot of tips. At the end, they all boil down to one thing though, A/B testing your adjustments. One post had a list of 39 things you can adjust. My question to you is, when was the last time you ran 39 A/B tests?

Instead of just giving the standard, ‘do this and then that’ outline, I’ll tell you how we analysed the webshop of the popular fashion brand Coach.

Coach reached out to us in July 2018 with the goal of improving the conversion rate of their webshop. Apparently they went through multiple A/B test scenarios and none of that was working well and was actually making them lose money.

The most important aspect for us was to ask the question, ‘what is it exactly that you’re after?’. Is it the conversion rate of one particular product that should be improved or something within the conversion funnel itself?

When it comes to conversion rate optimisation, a lot of variables can be tweaked. To narrow it down, it’s always important to ask yourself or your client these questions first.

The answer came quick: ‘We don’t know, we just want the conversion to go up’.

Ok, that was not very helpful, but our goal was to provide Coach with the biggest bang for their buck. Meaning, which changes would result in the highest return on investment (ROI) for Coach?

What did we do?

It is never a good idea to start testing anything blindly. To make sure we don’t take shots in the dark but rather deliver on their request, we asked Coach for their webshop analytics data.

Analytics data

When it comes to optimization, they understood that it’s good to start with data in the first place. They have provided us with analytics data of 1 week, having a total of 866130 visitors! Luckily that meant we got enough statistical power, even breaking it down into different landing pages would not be a problem. They also added that the percentages of conversions stay roughly constant with slight fluctuations in visitor rates. All these details matter when it comes down to how much we can rely on the data itself.

The bad apple

Going through the data, we started looking at the conversion rates based on landing pages. There was one landing page in particular that performed terribly. It was the landing page of the Dreamer handbag.

The conversion rate itself that resulted from this landing page was 0.05%. Now you might be thinking that this type of conversion rate is not so bad, especially when you compare it to average search statistics across the web.

Let me add two more details:

Other landing pages had on average 1.5% conversion rate
10% of the total traffic came in through this landing page

That basically means a lot of potential conversions are lost and advertising money is going down the drain. The next questions is, ‘why is the conversion rate so low compared to other pages?’.

Why?

The first, most obvious reason for this conversion rate could be the product itself. But is it?

To find an answer to that question, we looked again at the analytics data. The answer was quite clear: the product is not the problem!

The Dreamer handbag itself was responsible for 7% of the total revenue. That is massive for a single product, given that other popular products on the Coach webshop accounted for 7.84% of revenue, combined.

Then what is it on that specific landing page?

As you most likely found on multiple other online articles, now it would be time to go through the list of conversion rate optimisation tips. Oh and don’t forget to finish your guessing with an A/B test.

Luckily, we don’t have to guess blindly.

Testing

During our test, we exposed 100 testers to the Coach landing page of the Dreamer handbag. While the testers were viewing the landing page, we recorded their eye movements, their emotions and their hear rate through their webcam. We only showed the page for 10 seconds to really get the initial implicit reactions and viewing patterns.

This makes it much easier to understand what people are looking at and also how they process / react to it emotionally. From this, we can infer the ‘why’ much easier than guessing blindly.

Plus, we had all the data collected and analysed within 3 days. Generally quicker than preparing for all the A/B tests.

Results

From the raw data, we create easy to interpret visualisations. For the eye tracking we get a heat map. Red = most attention, blue = least attention, no color = no attention received.

From this is it easy to see that the image within the webshop and the slogan on top receive the most attention.

Now that we know what received attention, let’s have a look at how that was processed. For that we combine all the emotions we measure (7 in total, you can have a look here) into an easy interpretable Valence score, which goes from -100 to +100. Negative score means negative emotion, positive score means positive emotion.

The Average Valence score for this landing page was -0.7. You might be thinking that is not so bad considering the range of the score. But you need to keep in mind that this is just a webshop that people are looking at and nothing controversial, which would much easier stir up emotions.

This is already quite telling but let’s dive in 1 step further. We combined the heat map and the Valence score into a Valence map. This makes it simple to see where exactly what type of emotion was present. This way we know what exactly people felt when they looked at something.

Conclusion and impact

From the Valence map you can easily see that the strongest negative peak is caused by the the slogan on the landing page. Looking back at the timeline of the Valence score, that peak comes at ~6 seconds. The image on the left of the products doesn’t get a lot of positive reactions either.

After we saw this reaction to the image, we looked at the other landing pages and only then we noticed that they don’t have an image nor a slogan.

There are now 2 potential routes you can go:

Get rid of the image and the slogan
Tweak image and slogan

If you’d go down route 1, then with a fair amount of confidence, given the analytics data of other landing pages, the product itself, and the data we collected, the conversion rate should go up. But how much?

It should get close to the average of the other landing pages (1.5%), but let’s be conservative and say it will only go up to 0.8%.

The Dreamer handbag costs ~ $700, with a conversion rate of 0.05% and ~93800 visitors that means around $33k. Coach is a strong brand but they do use online advertising. Because they are such a strong brand they could potentially pay only $0.1 per visitor coming to their website via advertising. That means then $9380 in online advertising costs. That results in revenue minus advertising costs = $23620.

Redoing this with a conversion rate of 0.08% would result in the same costs for advertising but final revenue minus advertising costs = ~ $43k. Oh and remember that this is per week!

As you can see, the impact itself is quite strong and we managed to deliver the biggest bang for their buck.