15 Spectacular Popup Designs That Carry Outcomes

Popups are controversial. On the one hand, they help business owners and marketers advertise, build email lists, and drive leads to take specific actions.  

On the other hand, website visitors tend to hate them so much that the inventor of the popup, Ethan Zuckerman, apologized for creating them.  

Popups interrupt the user experience and can be intrusive. But they don’t have to be. Popups can add to your website without spoiling the user experience when deployed correctly. 

The best practices for a successful popup strategy are: 

• Using popups only when necessary: Every popup should have a clear purpose. For example, if you aim to reduce your website’s bounce rates, use popups for onsite retargeting. 
• Using popups to enhance the user experience: Make popups relevant and interactive, increasing visitor engagement. 
• Making your popups brand consistent: Choosing the same color and typography as your website makes popups less jarring. 
• Ensuring appropriate popup timing: Poorly-timed popups disrupt the user experience. Test variations to find the most suitable time to activate popups. 
• Including incentives: Popups must add value to justify the interruptions to browsing. Offer discounts or access to other content. 

Marketers continue to use popups because they work. They allow you to capture visitor information to build your email lists and nurture relationships with the target audience. For example, popups on product pages draw visitors’ attention to discounts or content they might love. Adding exit-intent popups slows down how fast visitors leave your website.

Types of popups

Developing a popup strategy will help you get the most out of them. The strategy will help identify the business goals you hope to achieve with popups, the best popups suitable for your needs, and how to use them effectively. 

Popups vary depending on format, placement, timing, and purpose. Here are some common types of popups: 

• Exit-intent popups: Exit-intent popups are triggered when visitors move their mouse pointer to leave your site. They are most effective at getting visitors to stay when used with incentives like a promo code. 
• Timed popups: Timed popups are triggered when visitors spend a certain amount of time on a page, meaning engaged customers will see them. 
• Scroll popups: Triggered when visitors scroll down to a specific portion of a page, which also can indicate engagement. 
• On-click popups: On-click popups are activated when visitors click specific images or links on your page. 
• Hello bars or bar popups: Popups that appear at the top or bottom of a website as a fixed bar. They don’t distract website visitors from page content but also don’t get nearly as much attention as other types of popups.

These are just the standard popup options you’ll find on the internet. Experiment with colors, format, and placement to discover the popups your customers prefer. Use microcopy to reduce fears people might have with interacting with your popup. Remember that mobile users make up 50% of all internet traffic. Therefore, you’ll also need to create mobile popups for your mobile visitors.

The bottom line is this – the best popup meets your business goals without compromising your customer’s experience.

15 inspiring popup design examples

Not all popups are created equal. Successful popups must be well designed to catch visitors’ attention and compel them to act. Dynamic elements like animation and effects break the monotony of static popups and are more likely to attract engagement from site visitors. Therefore, getting your design spot on is instrumental when you want to create effective popups. 

How do you ensure your popup designs are compelling, and not distracting? The good news is you don’t have to reinvent the wheel. You can simply take inspiration from existing popup designs that have proven to be effective. On that note, here are 15 popup design examples to inspire your popup campaigns.

1. Neil Patel
2. Blue Apron
3. Banana Republic
4. Old Navy
5. Zappos
6. Sephora
7. Social Media Examiner
8. Varley
9. Frank Body
10. Exploding Kittens
11. Inbox Collective
12. The Hustle
13. Smart Insights
14. Key Portal
15. Email Monday

Popup design example #1: Neil Patel 

Source: Neil Patel

Neil Patel is a famous digital marketing expert. He helps companies like GM, Viacom, and Amazon grow revenue through paid campaigns, SEO, social media, and content marketing. His exit-intent popup innovatively collects contact information. Rather than asking for email information, Neil engages visitors with a five-question quiz about increasing web traffic.  

Visitors are then prompted to share their phone and email information to receive the quiz results. Most customers don’t mind exchanging their contact data for the results. They’ve already invested time answering the quiz and are intrigued by what the results may say. Also, Neil promises to deliver a seven-week action plan alongside the results. 

Key takeaways:

Interaction-based popups not only attract visitors’ attention but invite them to engage with the popup and hopefully take the desired action. Additionally, offering a personalized incentive improves the performance of your popups. You need a similar strategy to create effective popups. 

Popup design example #2: Blue Apron

Source: Blue Apron

Blue Apron is a food delivery company offering meal kits with fresh ingredients. This exit popup example from their product page offers customers irresistible discounts in exchange for an email opt-in. Customers have the option to join immediately, join later, or not at all. An image of a delicious meal drives home the message of irresistibility.

Something else brilliant about this popup design is its simplicity. The business only asks for an email address. Nothing else. This makes the form much smaller, making it seem more convenient for prospective customers.

Key takeaways:

This popup works because attractive offers and mouthwatering imagery are hard to ignore. Furthermore, it multitasks between lead conversion and lead generation by giving customers the option to convert immediately or at a later date. Also, follow their model and aim to keep your popup form as short as possible. Don’t ask for more information than is necessary.

Popup design example #3: Banana Republic

Source: Banana Republic

Banana Republic is a clothing company for men and women. This entry popup offers a 15% discount to customers for their first purchase. Even if customers aren’t yet ready to buy, they will still receive the offer by signing up for a free account. This type of popup entices new visitors to act and primes them to take further action later.

Key takeaways:

The effectiveness of entry popups like the one above depends on the content or message. Offer discounts to motivate prospective buyers to take the desired action. These popups are usually successful for ecommerce businesses.

Popup design example #4: Old Navy

Source: Old Navy

This Old Navy slide-in popup appears by clicking the ‘Offers’ bar at the bottom of the webpage. It increases sales conversion by presenting buyers with exclusive and time-limited offers. Because the popup activates with the customer’s intentional actions, it is unobtrusive and non-aggressive.

Key takeaways:

Popups don’t have to be intrusive to be effective. Popups that appear when customers demonstrate the buyer’s intent do not interfere with the user experience. Also, they can be high-converting since they are triggered by the user’s actions.

Popup design example #5: Zappos

Popups can be used to share information in real time. The Zappos out-of-stock click popup is a wonderful example. 

When items customers are looking for aren’t available, the popup appears by clicking the unavailable size option. Customers have two options: they can leave their email and get an email notification when it comes in stock, or they can choose an alternative product.

The Zappos website popup design is also an excellent example of a personalized popup. The Zappos system uses the details entered by the customer to recommend appropriate products. It already knows the shoe size and type the customer is looking for. So they’re recommending a similar shoe type and size available in stock.

Key takeaways:

Just because a product is out-of-stock doesn’t mean the sale is lost forever. Out-of-stock popups allow you to communicate with customers, build relationships, and improve the customer experience.

Also, your popups don’t have to do only one thing. Zappos, for example, offers its shoppers the option to either provide their contact details and receive a notification when the item is back in stock or shop for other available items.

Popup design example #6: Sephora

This Sephora popup is made for sales conversion. It is triggered when customers add items to their cart. Admittedly, it does have more things going on compared to other popups we discussed above. However, this popup design aims to streamline the shopping experience, as well as checkout. 

Moreover, Sephora uses the popup for cross-selling. You can see that from the carousel under the “We Think You’ll Also Love” section. When visitors click the recommended items, they are redirected to those product pages. 

Customers also receive a free shipping code through the popup. The goal here is to motivate check out and reduce cart abandonment. Also, the red shipping code letters and checkout buttons stand out against a white background, drawing visitors’ attention.

Key takeaways:

Don’t be afraid of experimenting with detailed popups. However, you have to do so creatively, as Sephora has done. These popups provide more information, which can be effective for driving sales and lowering cart abandonment.

Popup design example #7: Social Media Examiner

The popup example from the Social Media Examiner is an exit-intent popup that retargets users back to the webpage. 

The popup lives on the company’s Crypto business event landing page and offers users a sample of the content they’ll experience at the event. The aim is to convince first-time visitors to register for the event by previewing valuable content. 

Key takeaways:

Onsite re-targeting is a great way to keep customers on your site. Just as they try to leave, you entice them with content they may find interesting. Ecommerce stores may use coupons to invite customers to keep shopping.

Pro tip: Learn how to use coupons effectively with our ecommerce discount strategy guide and grab this handy discount cheatsheet to stay on track.

Popup design example #8: Varley

Source: Varley

Varley’s simple yet elegant newsletter popup is timed, appearing after several seconds. As a timed popup, this strategy will likely appeal to site visitors who are already engaged. Also, the 10% discount will likely get prospects’ attention.

This popup is simple yet classy. The way their popup matches the rest of the site, making it feel like an extension of the page rather than an intrusion, is a great example of how to implement a popup with class. Furthermore, the microcopy explains the purpose of data collection, reducing anxiety about having emails shared with third parties or receiving spam mail. Customers know what they’re getting.

Key takeaways:

Popups feel less jarring and more like a part of your site’s experience when they match your site’s style, color, and typography. Adding text explaining how your company uses customer data reduces their hesitation about signing up.

Popup design example #9: Frank Body

Source: Frank Body

Frank Body is a coffee-based skincare brand with a distinct brand voice that carries into its popups. The headline of the timed email subscription popup is creative and attention-grabbing (more so than the 15% offer). Like the Varley popup, the Frank Body popup is an extension of the website. The playful, tongue-in-cheek brand personality is prevalent throughout the website, including the popup.

Key takeaways:

Popups provide exciting opportunities to display brand personality. Incorporating your brand voice in popups creates a consistent customer experience. It will resonate with customers and increase conversions.

Popup design example #10: Exploding kittens

Example: Exploding Kittens

Exploding Kittens is a game company created by former Xbox game designer Elan Lee and The Oatmeal’s founder Matt Inman. Those who are familiar with Matt’s cartoons can immediately identify his designs and often-ridiculous sense of humor, all of which are visible in this popup.

Not only is this popup’s design creative and on-brand, but it’s also very clever. This three-step popup appears upon entering the Exploding Kittens store. It starts by offering a 10% discount on your first purchase. When visitors click the call-to-action button (CTA) to redeem the offer, they’re asked to provide their email address and country name. After they’ve made the initial commitment and entered their details, the offer gets upgraded to 15%, but only for those who also provide their phone number.

By splitting the popup into multiple steps, the EK Team lowered the friction caused by their form. Those who are not willing to provide their phone number can still sign up to receive a discount code and make the purchase. And those who are OK with entering more information get an extra bonus for their effort. Had the EK Team asked for all of the information in one step, their overall conversion rate might have gone down.

Key takeaways:

If you want to ask your visitors for more information, consider splitting your popup into multiple steps. And if you’re asking for sensitive data that could cause friction, be prepared to offer them an extra discount to sweeten the deal.

Popup design example #11: Inbox Collective

Source: Inbox Collective

Inbox Collective is a consultancy specializing in email marketing and growing businesses through newsletters.

In this popup, they’re promoting their “Not a Newsletter,” an online document where they share industry news, best practices, and ideas for email marketing programs.

There are a few things that stand out about this popup, starting from its newspaper-like design. The color scheme, font, and comic-style image resemble the style often associated with traditional magazines and newsletters. It works particularly well, considering the fact that Not a Newsletter looks like this:

Next is the use of social proof, where Inbox Collective highlights the fact that their document is the go-to resource for over 9,000 email marketers. This makes you feel that they’re trustworthy.

Lastly, the thank you message not only shows gratitude, but also sets expectations for what content you’re about to receive and how often. You immediately know it’s time to dig into your inbox.

Key takeaways:

Use your popup to set up the expectations about when, how often, and what kind of content you will send to your audience. Plus, make sure the popup’s design matches the style of your communication so that the same “scent” is carried across all channels.

Popup design example #12: The Hustle

Source: The Hustle

The Hustle is one of the most popular newsletters on the web. If you’ve ever seen one of their emails, you know that they’re short, informative, and full of contextually-relevant emojis. The same can be said about their popup.

This exit-intent popup catches website visitors’ attention with a question and three quick reasons why it’s worth joining their subscription. It clearly sets the expectations as to what you’re signing up for, how often you’ll receive it, and how easy it is to opt out. To ease up the decision-making process, they’re only asking for your email address and highlighting the fact they’re read by over 1.5 million readers.

Key takeaways:

Use your popups to emphasize your unique value proposition and overcome your audiences’ doubts. If possible, use social proof like the number of subscribers reading your emails to carry your point home.

Popup design example #13: Smart Insights

Source: Smart Insights

Another way to demonstrate your expertize and overcome visitors’ hesitation is to add authority signals, such as logos of brands you’ve worked with.

You can see the tactic used here by Smart Insights, an online publisher and online learning platform that covers all things digital marketing.

If you’re a marketer looking for advice on online marketing, you’re likely going to trust a brand that has helped companies such as HP, Ogilvy, or Unilever.

Key takeaways:

Sometimes it’s not about quantity but quality. By adding authority and trust signals to your popups, you can overcome your visitors’ fear of giving away their precious contact details.

Popup design example #14: Key Portal

Source: Key Portal

Key Portal specializes in selling software licenses for private and company users. They create a sense of urgency to drive sales through their popups. The page-stop popup appears within 10 seconds of visiting the page with a timer counting down to the end of their 35% discount offer. The minimally designed popup brings focus to the timer.

Black Friday sales are a big deal because businesses leverage the psychological hack of scarcity or fear of missing out (FOMO) to compel customers to shop. It is easy to persuade customers to buy now when they believe an item or offer has limited availability. As many as 60% of buyers make purchases within 24 hours because of FOMO.

Key takeaways:

Countdown popups are aggressive but incredibly effective at increasing conversions. They can be effective for lead generation as well.

Popup design example #15: Email Monday

Personalization is all the rage these days. As the world becomes more digitized, people are looking for more human ways to connect with brands. 

This popup example from Email Monday has an employee photo and uses a friendly, personal introduction to build trust with audiences. In addition to personalization, this popup stands out from other popups with its circular shape as opposed to conventional rectangular or square-shaped popups.

Key takeaways:

Adding personal touches to popups helps customers connect to your brand and feel valued. Another way to personalize popups is by adding customers’ names. 

Start building your list with these popup designs

As we said up top, popups get a bad rap. The assumption is that people generally view them as annoying at best, or suspicious at worst. It doesn’t help that they are used as clickbait or to install unwanted software. Still, marketers and business owners use them to connect and convert leads. Why? Because they work, so long as you avoid deploying them as clickbait or in spammy ways.

When deployed correctly, popups effectively generate leads and drive conversion. They catch visitors’ attention, guaranteeing that your message will be seen. No other marketing channel can boost this. But grabbing users’ attention and converting them are two different things. That’s why popup design matters. Dull, irrelevant, and jarring popups scare visitors.

In this article, we featured 15 examples of popups designed to bring results, whether it’s building your email lists, retargeting, or making a sale. GetResponse offers a free, user-friendly popup creator you can use to recreate the popup examples we discussed in this post.

And if you want to see it in action, watch the video below. Better yet, sign up for your free account and build your first popup today!