Use OmniKick to Acquire, Convert & Grow More Customer to Your Online Business

Start My FREE Trial

Sign Up

No credit card required. Get started in seconds.

OmniKick Blog

Popup-Design

Popup Design: How to Create the Perfect Popup

Over the past years, digital marketers have misused popups on their websites.

It has gotten to a point where web users don’t wait to click that “X” sign or “cancel” button on popups they see.

As a web shopper, I’ve seen many popups disrupt my shopping experience.

When you use popups in the wrong way, they could make customers stop visiting your website.

But when you know how to use popups, your conversion rates could increase by over 1,000%.

Nikki McGonigal is a full-time crafter and blogger. She owns the Etsy shop that sells handmade accessories. The name of her site is Nikki, In Stitches.

Nikki used popups to increase her site’s subscribers by 1,375%.

Southtree uses popups to turn visitors into subscribers and customers as soon as they land on their website.

southtree-using-popups-to-promote-their-brand

Popups force prospects to see your most important marketing message.

For example, Crocs wants you to sign up with your email address so that they can always tell you about new products and special offers.

crocs-wants-you-to-sign-up-with-your-email-address

Many websites use popups to collect visitors’ email addresses. This is because email is the engine of digital marketing.

ROI from email marketing is 4x higher than social media, paid search, direct mail and other marketing channels.

roi-from-email-marketing

Email marketing and popups are a powerful combination.

Popups allow you to capture email addresses, and email marketing lets you turn those subscribers into customers.

In this article, you’ll learn how to design popups that turn random visitors into email subscribers.

Bold your popup message

If a message is important, you should make it bold on your website.

Bold” conveys a sense of urgency and importance to your visitors. It gets their attention.

For example, The Atlantic bolds quotes on the site.

the-atlantic-bolds-quotes-on-the-site

Bold gets visitors’ attention on the web.

So, bold important messages in your popups too.

Coffee For Less bolded “$5 Off” in its popup.

coffee-for-less-popup-bolded-5-dollar

Web shoppers love discounts. By bolding “$5 Off,” it calls prospects attention to the popup.

AYR also bolds the most important message in their popup.

ayr-collecting-emails-on-its-site

Write actionable headlines

Actionable headlines make visitors take action.

If a headline in your popup doesn’t make a visitor want to act, then it is useless.

Use the Five W’s when writing headlines for your popups.

The Five W’s are who, where, what, when, and why.

Here’s how you use it to write a short but catchy headline:

  1. Who are the visitors?
  2. Where are they on your website? The headline should be related to the topic on the page where the visitor is.
  3. What do visitors want? The headline should introduce a solution or answer to visitors’ questions.
  4. When do they want it?
  5. Why do visitors want a solution?

A single headline may not be able to incorporate all the Five W’s.

If you can use two or three W’s in each headline, they will make visitors respond faster to your popup messages.

For example, the below screenshot of a popup has a headline that incorporates three W’s.

the-popup-has-three-ws

  1. Who? Freelancers, consultants, etc.
  2. What? More clients.
  3. Why? More cash.

The screenshot of another popup below has two W’s.

the-popup-has-two-ws

  1. Who? People who are struggling to get rich.
  2. What? More money.

The below popup incorporates four W’s in its headlines.

popup-with-four-ws-in-its-headlines

  1. Who? Entrepreneurs, service providers, e-commerce site owners etc.
  2. What? A free site audit.
  3. When? Now.
  4. Why? They want to convert more customers on their websites.

Test and improve your popups

No popup is perfect the first time.

The only way to gain more conversions with your popups is to a/b test them.

What is a/b testing?

“A/B testing (also know as split testing) is the process of comparing two versions of a webpage, popup or app against each other.”

In our case, we’ll be comparing two versions of a popup against each other.

Testing removes the guesswork out of your popup design process.

Run an a/b test on every element of your popup.

Here are the elements you should a/b test in your popup:

  • The offer
  • Headline
  • Image
  • The popup’s form length
  • The popup’s layout
  • The popup’s call to action copy
  • Button color
  • Button placement
  • Numbers in popup
  • Urgency in popup

Talking about button placement, for example, here’s a popup that has its button on the left side of the popup.

popup-has-button-at-the-left-side

And here’s another popup that has its button on the right side.

houzz-popup-button-is-at-the-right-side

A/B testing tells you which button placement drives the most conversions for your popups.

With Growth Funnel, you can a/b test any element of your popup and track results. You’ll get detailed reports in your Growth Funnel dashboard.

Use compelling images

You’ll notice that I’ve used a lot of images in this post.

Images are interesting to look at.

Why do people visit sites like Instagram and Pinterest?

They go there to see images.

Web users love images.

Images draw more attention to your popups.

use-images-in-your-popups

Your popups shouldn’t have too many texts. It makes reading boring.

The images you use in your popups should be customized.

If a visitor has seen an image you use in your popup many times before, they’re unlikely to be moved by it.

But if the image is new and interesting, they are more likely to pay closer attention to the message in your popup.

Use social proof

Social proof is when a lot of people are doing something.

It removes doubts from visitors’ minds.

Here’s a popup I saw on Jeff Bullas’ website:

jeff-bullas-social-proof

Jeff Bullas receives 400,000 visits on his blog every month.

If thousands of people are visiting Jeff’s blog, it shows that he knows what he does. It shows that people trust him.

Because of that, you’re likely to subscribe to his blog through that popup.

Razor Social used social proof in their popup.

razor-social-use-social-proof-in-their-popup

When you use social proof in your popup, you help visitors decide, feel confident in their choice and be excited in becoming part of something big.

If most of your family members, friends or neighbors something, you’re most likely to do it too.

social-proof-popup-for-dog-lovers

If you’re a dog lover or owner, you’ll want to sign up on the above popup.

Because 310,000+ dog lovers like you have given their email addresses, you’ll trust the site to provide them with your email too.

Make sure that you continue updating the popup as you get more email subscribers.

The bigger your social proof numbers, the better it is for popups.

Note: As a bonus for being a Growth Funnel customer, you can use our social proof tool that displays recent customers on your website for visitors to see. This is a powerful feature that can more than double your sales.

Rethink the timing and display of your popups

The best time to show your popup is when visitors are most open to seeing your message.

This time varies for different industries and niches.

On a blog that talks about getting rich quick, visitors are ready to act from the first second because they are eager.

But if you’re in a niche where you need to educate prospects, displaying your popup may annoy visitors.

For example, it’ll be wrong for a business like Elville and Associates to show popups on their site within the first seconds of a visit.

They are in the legal niche, and their visitors are highly-educated and fairly wealthy individuals.

Timing is one of the most crucial factors when using popups.

You don’t want to display your popup too early so that you don’t upset prospective clients.

And you also don’t want to show your popup too late so that you don’t miss out on potential sales.

How do you know the best time to make your popups appear?

The best way to know is to sign into Google Analytics and find the average time visitors spend on your website.

I recommend that you show your popups 50% – 60% of your site’s average time on page.

If your average time on page is 2 minutes, show your popups between 1 minute to 1 minutes and 12 seconds (72 seconds).

Inside the Growth Funnel editor, you can choose when to show your popups.

When you’re in the “Display Rules” tab, select “After” in the list of options and manually type the number of seconds you want to wait.

popup-display-rules-inside-the-growth-funnel-editor

Time isn’t the only way of measuring user engagement on your website.

Some visitors may open your website without reading the page. It could be that they are busy reading another page or doing something else.

Scrolling is another way to know if a visitor is ready to see your popup.

If a visitor has seen 50% of the content of a page, then he/she is ready to see your popup.

GrowthFunnel also gives you the option to display your popup according to how much content a visitor has seen on the page.

Inside the same Growth Funnel editor and the “Display Rules” tab, you’ll find the “After Scrolling Down” option. Choose from the range of 40% – 60%.

popup-display-rules-inside-the-growth-funnel-editor

Offer a content upgrade

If you’ve published many articles on your blog, chances are 10% – 20% of them drive 80% of your entire blog traffic.

Since these blog posts are generating most visits on your website, offer upgrades of those articles to visitors.

Let’s say you’ve published 100 posts on your blog, and 20 are bringing in most of the traffic.

Create 20 better articles that are related to each of the top 20 articles, and use it as the offer in your popup for each page.

Okay, let me give you a real-life example of how this works.

Gael Breton is one of the guys behind Authority Hacker.

He published a post titled “How To Get More Twitter Followers And ‘Automate’ Relationship Building,” and it became successful.

So, he created a content upgrade that is relevant to the article and offered it on the page’s popup.

authority-hacker-content-upgrade

Brain Dean used content upgrade to boost his conversions by 785% in one day.

You can use content upgrade as the offers in the popups of your most popular pages.

Because those popups will be so relevant to visitors’ needs, you’ll be able to capture even more email addresses on your website.

Here are some types of content upgrades you can offer your site’s visitors:

  • Checklists
  • Video or audio recordings
  • Comprehensive guide.
  • Exclusive interviews
  • Case studies
  • Free trial of a related product
  • Free courses
  • Swipe files

If you’ve installed Google Analytics on your website, it will tell you the most visited pages on your blog.

Start creating a personalized popup for each page on your site using Growth Funnel.

Growth Funnel lets you create popups that convert random visitors into customers.

Start your Growth Funnel free trial today.

(GrowthFunnel_Code)

LEAVE A COMMENT

Set Up & Run in seconds with just a tiny JS code

OmniKick works out of the box on most popular platforms including:

Start My FREE Trial

Get Started in Seconds