6 Must-Know Popup Design Principles to Generate More Leads (Examples Included)

Except, this isn't true for all popups. 

Generic popup design templates that beg people to sign up while giving them no reason they should are bound to fail.

On the flip side, a carefully designed (and timed) popup with a compelling, relevant offer can see conversion rates upwards of 10%.

So, how exactly do you create a popup design that stops visitors in their tracks and gets them to take action?

This post's got your back. We cover the six must-know best practices that go into designing popups that both look great visually and convert. Plus, we've added popup design examples to show all the theory in action—and even put in some templates, too.

On we go 👇

The different types of popups 

Website popups come in different shapes and styles. So before we go into greater depth, let's solidify the different types typically used by marketers.

The two broad styles that are most prominent are:

1. ‍Overlay popups. These tend to take up the entire screen's focus, overlaying themselves on top of the content visitors are viewing.‍
2. Hook popups. Sometimes known as slide-ins, site messages, or sidebar popups, these appear on the side of the browser's screen without interrupting the view of the main content.

From here, you'll then usually have different trigger options to control when the popup shows.

These trigger options are:

• On-click. The popup shows up when a user clicks on a button, image, or link on your site.
• Exit-intent. A popup shows up when a viewer shows an intention to leave the page.
• Scroll-point. The popup shows up once a visitor has scrolled to a pre-defined point on the page.
• Time delay. The popup surfaces only after a user has spent a specific time on the page.

6 popup design best practices

With the basics out of the way, let's get into the meat of the matter with six best practices for creating a high-converting popup design.

1. Create a compelling offer

Gone are the days of generic "sign up for our newsletter" popup offers. 

Unless you've built up a ton of street cred with your newsletter (like The Hustle or Morning Brew), an offer like this is simply nowhere near compelling enough for most people. For a high-converting popup design, you need to answer the "what's in it for me?" for readers.

‍Instacart, for example, is loud and clear about their offer of quick deliveries in this popup:

The question now is: what makes an offer compelling enough for people to share their information with you?

Three key things:

1. Make it specific. Start with being clear on exactly what a subscriber will get by sharing their details or taking action. Will you give them an email course that'll help them grow their sales? Or a special promo code that only subscribers get? (Even better If you can include hard numbers—3 shopping guides, 25 content marketing templates, or "as little as 2 hours.")‍
2. Make it relevant. This depends on your visitor's demographics and where they are in the buyer's journey (more on this coming up 😉)
3. Solve a problem. Whatever your offer is, remember that it should solve a problem at some level for your audience. This could be anything from a direct purchase, to using a free tool, or downloading a PDF.

If someone's fishing around your site to shop spring wear, a generic "get our style guide" won't help. Instead, "get 10% off your next spring wear purchase" will make for a click-worthy popup design idea.

Demographics play the same role.

Glossier throws a super-relevant offer when I head on to their site, letting me know they can't ship their products to me. But, they'll let me know when they can 🙌

How'd they do it? By tracking my IP location and displaying the popup based on this.

2. Meet your visitors where they're at

Doing this will help you get more targeted with your messaging, so it's more relevant (and appealing) to visitors—therefore encouraging action. 

But there are two parts to this:

Firstly, meet them based on site location

A standard site-wide popup is just way too generic to expect any meaningful results from. So, try mixing up the content and offers on your popups to engage your audience.

A few ideas:

• Lead magnet forms
• Signup forms
• Quizzes
• Segmentation surveys
• Cross-selling product recommendations

These (and more) can all be utilized within a popup on different page URLs and site locations—in order to better align with the content and likely user-intent on that page.

At ConvertFlow, for example, we've multiple, relevant popups.

Really simple case in point is our post on how to personalize your website, which has an ultra-specific hook popup:

The result is a very solid conversion rate approaching 5%:

Why? Since website personalization is the reason someone is reading the post, the chances of conversion are much higher than a generic "sign up now" popup.

Secondly, meet them based on the buyer's journey

Right, so you've decided to set up multiple popups.

But here's the thing: to turn up the volume of conversions, think about taking a true conversion marketing approach by matching the popups to your audience's problem at the particular funnel stage they're in.

For example:

Let's say a returning visitor is surfing your product page and a popup offering a PDF guide shows up. Maybe they've already downloaded this previously, or are just much further along in the buying process—either way, the offer in the popup is of little use to them... and is a wasted conversion opportunity.

Conversely, going straight in for the kill trying to make a sale or push a customer case study might be off-putting for new, first time visitors.

The key here is to use your popup to segment your audience, then direct each visitor to the most relevant place.

So you could use a survey to get incoming traffic to self-identify which segment they fall into. Like Nicholas Scalice at GrowthMarketer does:

Or you could create a quiz to then give people more personalized recommendations on products, services or next steps. Like Warby Parker does with this quiz inside an on-click popup:

PRO TIP:

Try making use of an on-site retargeting strategy to start showing different messages to new and returning visitors in your popups:

3. Make your popup design attention-grabbing

The offer and value prop in your popup (which we've already talked about earlier) definitely plays a role in grabbing someone's attention. But the visual design is also critical.

Of course, you can get your popup designed professionally. But if you don't want to wait on designers and developers, you can always use customizable popup design templates to DIY the job.

In that case, the following design tips will help:

• Be creative. Doing something a little different (like striking colors and cut out images) can take users by surprise, winning their attention when they habitually ignore popups (technically, called banner blindness).‍
• Use ample whitespace. All the space around your popup text, CTA, and other design elements is whitespace. Use it sufficiently to make your design breathable, attractive, and to allow focus on what's actually being offered.‍
• Follow your brand guidelines. In other words, stick with your brand colors and fonts to design a popup that's more a part of your site than an alien.

Here's a great example from Jay Acunzo of a popup design that's both visually pleasing and attention-grabbing:

Notice how the design looks clean with plenty of whitespace. But, there's a nice bit of creativity with the arrow, button color, and odd shapes.

4. Write persuasive copy

You'd assume a sentence or two that sounds good to the ear will do. Think again. Words, when used carefully, can convince people to take action.

You don't need a crash course in persuasive conversion copywriting (although it's a good idea to take one). The following tips can help you:

• Benefits > features. In other words, make the popup's message about them, not you. E.g. for a quiz popup, say "Learn which skincare routine suits your skin," instead of just "Take our quiz."‍
• Use power words. Also known as 'trigger' words, these evoke emotions and response. Some examples include Free, Ridiculous, Now, Proven, Secret, Bold, Effective, Boost. (Check out this complete list of over 801 power words for even more.)‍
• Leverage social proof. We're all slaves to herd behavior. Or, the "if someone's doing something, they must be doing it right, so I'll do it too" mentality. This means it can can be highly persuasive to share customer feedback, testimonials, reviews, ratings, subscriber numbers, etc.‍
• Lean on community & exclusivity. This makes viewers feel special and part of a community. A good example would be: "join our secret community and learn marketing hacks that pros use."
• Be clear. Describe your offer and why someone should take action in super obvious and easy-to-read terms. Keep things simple and don't overcomplicate—especially for a simple popup.

SEE MORE: Conversion Copywriting: Principles, Formulas & Real-Life Examples You Need to Know For More Successful CTAs

5. Have a clear call-to-action (CTA)

A clear call-to-action tells site visitors exactly what action you want them to take. In a popup, it's usually a button or short form:

Want them to fill in their details? Subscribe to your newsletter? Buy from you? Go ahead, tell them. But, make sure you're crystal clear about what you want them to do and how to do it.  

Here are six key things to remember when writing a clear CTA for your popup design:

• Use command words. Command words assign tasks. They're all zero-fluff, action-provoking words that tell site visitors exactly what to do. E.g. fill, buy, get, and subscribe.‍
• Be concise. For an irresistible popup design, less is more. Particularly, when it comes to the CTA copy, a few words help send a clear message. Ideally, you'd want to stick to 2-5 magic words here.‍
• Make it legible. A clear CTA is easy to read. This means you need to use a readable font—one that's clear in terms of both size and font type.‍
• Use contrasting color. Notice how most CTA buttons on popup design examples shared so far tend to use contrasting colors? The reason is simple: it's to make the CTA stand out, which, in turn, encourages visitors to click.‍
• Add urgency. Tell people they're missing out by not taking action right now—use FOMO, limit signup numbers, or set an offer deadline, etc.
• Handle objections. Ok, your popup can't have a full-on FAQ section. But it can try to overcome the biggest objections your visitors might have. E.g. "no spam," "no credit card needed," "instant download," or "free forever."

PRO TIP:

When handling objections, you'll usually find a short bit of copy right underneath the CTA button. But you could also try adding it to the button itself:

Shout out to Harry Dry for this idea in his great landing page guide.

6. A/B test to find what works for your audience

Everything you're learning today is best practices—stuff that's proven to help you create a high-converting popup design. 

But, there's still going to be subjective things that will work better for your product and how it relates to your target audience. This is where A/B testing your popups can work wonders.

However:

While there are certain button colors proven to convert, testing minute details like this just isn't useful for the traffic levels of most businesses. Same goes for any other really granular variations.

Instead, try testing more macro variations in your popup design. Such as:

• Headline variations
• Copy length (short vs. long)
• CTA and button copy
• Value prop variations
• What you're actually offering in the popup

Unless you have huge data sets (like Amazon and Walmart kind of huge), testing things like button colors likely won't bring much insight. But testing the wider reaching and more general aspects can be a gold mine.

PRO TIP:

ConvertFlow lets you easily A/B test your popup designs and see detailed conversion stats for each variant:

Learn more about A/B testing in ConvertFlow

Popup design examples

Alright, we're done with the theory. Next, let's see all of what you've learned in action with these six popup design examples:

1. Frank Body

Talk about keeping things on brand. This slide-in popup that shows up on the home page uses Frank Body's color and font perfectly:

The CTA's a perfect contrast that stands out against the background. The copy clarifies what subscribing will give visitors: a 10% on their first purchase.

2. Revolve

Again, there's a compelling offer that makes this popup design example from Revolve a success:

The popup also plays an intelligent hand at understanding their visitors by asking them to pick their gender. This way, they can send personalized content to the subscriber.

Also, note how the CTA copy has a command word "get," and the copy above attempts to set expectations from the get-go.

3. BigCommerce

BigCommerce's exit-intent popup uses social proof to get people to subscribe. The copy is also clear on what readers are going to get by doing so:

In addition to the command word 'get' in the CTA, there's a power word "free," and the CTA button is attention-grabbing as well, thanks to its distinctive color.

4. Barkbox

This Barkbox popup design takes a different approach. Or, rather, a colorful one that catches the eye nicely:

More importantly, the copy uses two power words ("free" and "bonus") to encourage people to take action.

5. Pipedrive

This one from Pipedrive is another simple popup design that's a winner for leveraging social proof (95,000+ members) and a clear value proposition that touches on what to expect:

There's also a third factor at play–the idea of joining a community. Specifically, it's a "community of sales professionals"–an invaluable community for the target audience.

6. Grammarly

This exit-intent popup on Grammarly's site leverages social proof by including a testimonial from Forbes to entice people to use the tool:

‍Popup design templates

Designing your own popups from scratch is rarely the most optimal way of going about things. Instead, it's best to take what already works, and just tweak to suit your needs.

That's why we have a whole library of successful popup templates ready for you to customize and launch on your website.

Check out this one for driving newsletter signups:

Or this one to push those a little further down your funnel into a consultation or demo call:

Want to drive sales on an ecommerce store with a discount code? Try this:

Or build your own product recommendation quiz popup with this:

Don't forget, all of our popup design templates are fully customizable. So you can alter colors, images, text, form fields, the CRM leads are passed into, etc.

Start designing high-converting popups today

To recap, popups that successfully convince visitors to take action are relevant and offer something compelling in exchange for their information.

Don't forget, your popup's copy and design also play an essential role. So, be sure to play with command and power words.

As for the design? Luckily, you can get a head start on that by using popup design templates. Access (and customize) them today with a free ConvertFlow account.