As an ecommerce brand, you know you need to be implementing pop-ups on your website. There are thousands of case studies being published every year that prove their increasing  effectiveness and worth. The question is, what makes a pop-up great, and what makes a pop-up fall flat?

To find out, I spent some time analyzing current and historical pop-ups that are appearing or have appeared on top ecommerce brand websites. My goal in doing this was to uncover a few trends and develop some actionable recommendations that you can use to build better pop-ups for your website.

After looking through hundreds of pop-ups from brands selling all types of products, here are the top 5 ingredients I’ve identified that can help improve the effectiveness of your own pop-ups

Ingredient #1: Simple Design

To begin, it’s important that you keep things simple when designing your pop-up. Because the action of a pop-up appearing on a website can be interpreted as somewhat obtrusive for a lot of website visitors, you should do your best to avoid building pop-ups that look clunky, messy, too colorful, or unnecessarily busy.

When building your pop-ups, keep the following design recommendations in mind:

  • Utilize white space. Give your pop-up room to breathe. Don’t overwhelm visitors with too much information at once.
  • Make it easy to read. Use fonts that are easy to read from both desktop and mobile. Make sure your font is big enough and dark enough to still be readable from a smartphone.
  • Use no more than 2 colors. Don’t overdo it with too many colors. Keep your pop-up consistent with and complimentary to your brand styling, and only test unfamiliar colors in the CTA button.
  • Allow your pop-up to contrast against your website. Make sure your pop-up doesn’t blend in too much with your website.
  • Don’t add unnecessary animation. Keep friction to a minimum (more on that later). Allow a pop-up to appear or fade in, but don’t include any necessary jumps, spins, or other obtrusive animations.

To illustrate the power and effectiveness of simple designs in pop-ups, let’s look at a two examples:

Screen Shot 2017 03 21 at 2.30.58 PM

Example from Kate Spade

Screen Shot 2017 03 21 at 2.38.08 PM

Example from Tom’s

In both examples, notice the use of white space. Also notice that each uses the brand logo at the top as a way to provide context for the visitor. Finally, both only use a few colors. Kate Spade uses a hint of blue to add more contrast to their pop-up, while Tom’s tests a vibrant green in the CTA button.

The Takeaway: keep pop-up design simple.

Ingredient #2: Thoughtful Copy

Perhaps even more important than design components are the words that you ultimately choose to incorporate into your pop-up. We talk about copywriting a lot on this blog, and that’s because it matters a great deal. You can have a beautifully-designed pop-up, but if the words you use aren’t compelling or thoughtful enough, you’re not going to be able to convince people to act.

When building your pop-ups, keep the following copywriting tips in mind:

  • Focus on benefits, not features. In order to connect with your prospective customers in a matter of seconds, focus on writing copy that sells them on benefits, rather than features. In other words, don’t tell them what your product is—tell them what your product can do for them.
  • Don’t use unnecessary jargon. To make your pop-up as readable as possible, use simple language and avoid using terms that could potentially confuse non-customers and first-time visitors. If you have to get technical, save it for your product pages and product descriptions.
  • Don’t try to be too clever. Try to come across as human and authentic in your pop-up copy, but don’t force it. Think about the overall voice and style of your brand and try to match it as closely as possible in your pop-up copy. If you create your pop-up and it reads nothing like the rest of your website, scrap it and try again. Consistency is key when it comes to building trust among online shoppers, so use your pop-up to set the right expectations right off the bat.
  • Remember that less is more. This goes back to utilizing white space—but this time the focus is on the amount of copy you ultimately use in your pop-up. Use the least amount of words you can in your pop-up in order to get the message across and drive your website visitors to act. Again, use your product pages to get more detailed and specific about your products.
  • Get to the point, fast. You only have a few seconds to convince your website visitors to act. Be clear, and get to the point as fast as possible. Help visitors understand exactly what it is that you want them to do.

Let’s look at two examples of ecommerce brands that effectively utilize copy in their pop-ups:

Screen Shot 2017 03 21 at 3.14.30 PM

Example from Bonobos

1

Example from GlassesUSA

In both examples, you’ll notice that the copy is fairly straightforward. Both pop-ups get to the point as fast as possible, and both focus on the benefits of taking action (in this case, getting a discount).

The Takeaway: Be conversational, be compelling, focus on the benefits.

Ingredient #3: Minimal Friction

If you’re going to display pop-ups on your website for new visitors to see, you need to make it incredibly easy for them to dismiss. When you launch pop-ups that can’t be easily closed or minimized, you prevent your visitors from accessing your website and learning more about your products, which is why they came in the first place.

To build pop-ups that don’t unintentionally send traffic away from your website, try to minimize as much friction as possible. That means you need to make sure of the following when building and designing your pop-ups:

  • Make dismissing simple. Make sure your visitors understand where to click to dismiss or minimize your pop-up.
  • Ensure that it loads correctly. Make sure that your pop-up is functional across all browsers and operating systems, as well as mobile devices.
  • Track users so you don’t show them pop-ups too often. Make sure you are not showing the same pop-up to the same users within the same web session. Allow your pop-up to display once, then set a delay that prevents it from showing again until a certain amount of time passes (usually days).

Let’s look at two examples:

Screen Shot 2017 03 21 at 3.30.22 PM

Example from Tommy Hilfiger

Screen Shot 2017 03 21 at 3.31.27 PM

Example from Filson

In both examples, you can see that the dismiss ‘X’ is located in the top right corner, which is where most online shoppers expect it to be. In the first example, it’s worth noting that the ‘X’ is somewhat hard to read because of the weight of the font and the image placed behind it. In the second example, the ‘X’ is much easier to see. In addition, you’ll also notice that you can still see a good portion of the website behind both of these pop-ups—this helps reduce friction and reminds visitors that there is still products for them to look through once they take action on the pop-up.

The Takeaway: Make it easy for people to interact with your pop-up (no matter what that interaction is).

Ingredient #4: Clear Offer & Relevant CTA

The most effective and compelling pop-ups are the ones that present clear offers and call-to-action buttons that are specifically-relevant to the overall messaging and theme of the pop-up.

When you’re building your pop-ups, you have to be crystal clear when it comes to helping visitors understand what it is that you want them to do when they see your pop-up. You also need to make it clear what you are offering to them in exchange for interacting with your pop-up. For example, if you want their email address, you need to help them understand (within seconds) what’s in it for them. Can you offer a discount? A free gift? Access to a VIP community? Make your offer the focus of your pop-up, and design your pop-up in a way that makes your visitors feel like they’ve already gotten the offer—all they need to do is fill out a simple form field box to actually use it. Note: in order to achieve this, you need to make your offer compelling enough.

It’s also important to add relevancy to the CTA button that you include in your pop-up. In order to drive the action that you want, don’t use the standard “SIGN UP” or “SUBMIT” language that you see on every pop-up on the web. Instead, focus on what you’re asking for, or what you’re giving away to visitors once they do subscribe. For example, use language like “ENTER YOUR EMAIL,” or “GET YOUR DISCOUNT,” or “START SHOPPING, or “GET VIP ACCESS.” Again, make it incredibly clear to your website visitors.

The Kate Spade pop-up mentioned above perfectly illustrates this concept. I’ll include it again below—this time, look for the offer and notice the language used in the CTA button:

Screen Shot 2017 03 21 at 2.30.58 PM

The Takeaway: Be as clear as possible with your offer and your CTA messaging. 

Ingredient #5: Personalized Experience

Finally, take the time to ensure that your pop-ups are personalized based on whoever they are being displayed for. In WisePops, for example, you can create custom pop-ups for different audiences, based on things like location, traffic source, browser, language, operating system and device. Want to give it a try? Sign up for a free 14-day trial now.

By personalizing your pop-ups, you’re creating a more familiar, more inviting experience for your website visitors. When your website visitors feel more comfortable, they’re much more likely to trust you and much more likely to take the actions that you ultimately want them to take.

The Takeaway: Make your website visitors feel like you already know who they are and what they need. 

Over to You

What ingredients didn’t appear on this list that you think should have? Tell me in the comments below.

  • Rob Wormley