I Took 5 Online Brands and Remade Their Email Popups. Here’s What Happened.
Af Sam Thomas Davies Chef for indhold
@ Sleeknote

Today, I’m doing a makeover. But not just any makeover…

A popup makeover.

#SleeknoteStyle

Here’s the deal:

  • First, I’ll take five online brands that are using website popups to grow their list;
  • Then, I’ll address what they could improve; 
  • Finally, using Sleeknote, I’ll redesign their popups based on how they could perform better.

Let’s get started.

Popup Makeover

1. Allies of Skin

2. Calvin Klein

3. History

4. Bombas

5. Hotel Chocolat

1. Allies of Skin

Founded on the belief that skincare shouldn’t feel like a chore, Allies of Skin offers “effective formulas designed to suit adventure-seekers and go-getters alike.”

The Problem: Two Conflicting Popups

At the time of writing, Allies of Skin are using not one but two website popups. 

The first triggers automatically to all website visitors, offering a 15 percent discount before checkout.     

The second, which appears shortly after, offers a 20% discount.

Therefore, Allies of Skin has two contradictory popups that show to all visitors a coupon with two opposing values (15 and 20 percent).

Here’s how I would fix that.

The Solution: Consolidate the Best of Both into One Superior Popup

First, I would disable both popups. Then, I would take the copy from the first…

…And combine it with the design of the second.

Here’s the popup I made using Sleeknote’s Campaign Builder:

Finally, I would add the following rules:

i. Show only to new visitors. (If I wanted, I could create a second campaign for returning subscribers, promoting a new offer.)

ii. Show only on product pages as that’s where engagement is likely at its highest.

iii. Show after 8 seconds. (We found from our research of 1+ billion popups that 8 seconds converts best.)

Here’s how that popup might look to a first-time visitor browsing a product page:

There’s no harm in having multiple popups. In fact, we encourage having multiple campaigns running simultaneously. Just remember to have specific audiences in mind for each.

2. Calvin Klein

Describing itself as “iconic fashion reimagined,” Calvin Klein needs no introduction.

The Problem: One Popup for All Visitors

I recently landed on Calvin Klein’s homepage and saw this:

While nicely-designed, Calvin Klein’s popup:

  1. Shows to all visitors, regardless of whether they’re first-time or returning visitors;
  2. Ignores the visitor’s preference; and
  3. Lets itself down with generic copy (“Sign Up for The Newsletter” and “Subscribe”).

Let’s see if we can do something about that.

The Solution: Use Page-Level Targeting

As mentioned above, Calvin Klein has a nicely designed popup, so I’ll copy that for my design.

Here are a few changes I made:

  • Rewrote the headline.
  • Improve the body and CTA copy;
  • Removed the terms and conditions copy;
  • Added a name input field; and
  • Deleted the radio buttons for preference (more on that in a moment).

The biggest change I would make is where Calvin Klein could show its popup. In the original, if you recall, the popup shows to all visitors on all pages.

In the revision, though, I’ve created a rule so that it will show only to first-time visitors on category pages for men. 

What’s more, I created a second campaign that will show only on, you guessed it, category pages for women.  

Of course, if I wanted to make it even more personalized, I could add more gender-specific copy to the body (e.g., “Get Updates on New Arrivals for Men.”)

3. History

Filled to the brim with extraordinary, entertaining, and groundbreaking stories and characters, History is the premier destination for historical storytelling.

The Problem: Ambiguous Copy

After watching Columbia: The Final Flight on Netflix, I was reading an article about the disaster when I saw the following popup:  

History’s popup wasn’t bad; it was timely and had a decent design. But it didn’t excite me enough to join its email list. Getting “intriguing stories about the past” is ambiguous and doesn’t speak to my interests. 

Before reading on, consider what you would do.

Ready? Okay. Read on for my answer.

The Solution: Add Specificity 

History categorizes its content by “Topics,” with my Challenger article filed under “Space Exploration.”

History also uses a floating menu at the bottom of each article to invite further reading on the current article’s topic.

So, here’s how I would take advantage of that:

If a reader clicked on two or more articles under the same topic, I would show a popup addressing the articles’ topic in its copy, as with my example below:

How would I achieve such a feat? Well, with Sleeknote’s SiteData, you can trigger a popup based on any variable in your data layer, such as an article’s category (which is exactly what we do on our blog, by the way.) 

I would rewrite the headline using one of my favorite headline formulas, “Give Me/Us a Week and I/We’ll…” to evoke more curiosity and drive signups.

Nice work, if I do say so myself 😉

4. Bombas

Bombas is “a comfort-focused sock and apparel brand with a mission to help those in need.” 

The Problem: Has a Poor Optin Incentive

At the time of writing, it’s Black Week. So, it’s unsurprising that Bombas has changed its homepage copy to reflect its Black Friday promotion.

Bombas is reminding its visitors that it’s offering 20 percent off everything and will auto-apply a coupon at checkout. 

The problem, though, is Bombas hasn’t updated its website popup to reflect the change.

Why would you enter your email to get 20 percent off when it’s auto-applied at checkout?

If you’re making this mistake, here’s what you can do instead…

The Solution: Give Visitors a Reason to Join

Rather than repeat what’s already written on its homepage, I’ve rewritten Bombas’ popup copy to promote another incentive for joining its list: early access to its Black Friday offers. 

Building a Black Friday waiting list has three main advantages, including:

  1. Gauging interest from high-intent buyers;
  2. Building exclusivity among subscribers; and
  3. Driving urgency and scarcity.

Given the broadness of the offer, I would show this popup on all product pages and use an exit-intent trigger to capture abandoning shoppers who might not be aware of Bombas’ Black Friday promotion.

5. Hotel Chocolat

Hotel Chocolat is an award-winning chocolatier and cocoa grower on a mission to make the best chocolate on the planet.

The Problem: Ignores Post-Popup Action

As I mentioned above, I’m writing this article in November 2020. It’s Black Week, and many brands are pushing Black Friday offers. 

But Hotel Chocolat isn’t one of them, opting to promote it’s Christmas promotion instead.

After clicking “Reveal My Code,” Hotel Chocolat reveals a coupon that visitors can copy and redeem at checkout.

Upon first glance, one can’t fault Hotel Chocolat’s popup. The copy is clear, the strategy is sound, and the countdown timer is a nice added touch. 

What’s missing is what happens after visitors “Continue Shopping.”

Say I add a “Vegan Sleekster,” priced at £22.05, to my basket.

Because my order is £2.05 shy of the £25 coupon requirement, I don’t qualify.

And for that reason, I’m likely to abandon my cart.

No one wants that. Let’s fix that right away.

The Solution: Nudge Visitors to Spend More

As I’ve written about before, it’s worth having multiple popups to meet different goals. 

So, with that in mind, I would create a second popup to nudge visitors to spend more so they qualify for the coupon.

But I would go further than that and specify precisely how much they need to qualify. 

Here’s how I would do that.

First, as mentioned, I would create a second popup for those who:

  1. Added something to their basket; and
  2. Do not qualify for the discount 

Then, I would use a SiteData merge tag to show the remaining amount needed to qualify. 

Returning to the above example, I needed £2.05 to qualify for the discount, so the copy would reflect that in the headline:

Here’s how it would look on the product page.

If Hotel Chocolat wanted to expand on my popup, it could recommend popular or discounted products to help visitors qualify for the coupon.

Of course, that’s just the beginning. As is always the case when using SiteData, the possibilities are endless.

Conclusion

We’ve seen that even the biggest online brands make mistakes with their website popups. Even those who don’t leave some room for improvement.

I hope my makeovers have inspired you to correct any mistakes you’re making with your popups and maybe even inspired a future campaign or two.