UX Design Process Examples Popups to Improve User Experience

Every online store that is focused on profit is also focused on getting more conversions out of their website visitors: encouraging them to buy or – at least – subscribe.

To increase conversion rates, more and more ecommerce stores are using onsite retargeting – and their results speak for themselves.  Well-thought-out UX design using popups can improve the user experience. Below are some great UX design tips, examples of successful campaigns which use onsite retargeting from OptiMonk:

using popups without ruining user experienceThe common characteristic of these campaigns – and the secret to their success – is that they were sure to use their popups without ruining the user experience of their site. They wanted to make their popups truly useful for their visitors with relevant content and did not want their popups to be seen as annoying “obstacles”.

In this article we’ll look at 5 ways you can use onsite retargeting without ruining the user experience on your site. Let’s see how you can build a successful onsite retargeting campaign with popups that are really user-friendly!
  1. Display Popups Based on Engagement
  2. Segment Your Visitors
  3. Customize Your Message
  4. Stay focused on one value proposition and goal at a time
  5. Less is More
  6. Conclusion

Back to the Top

1. Display popups based on engagement – don’t use entry popups

There are few things that are more annoying on the web than traditional entry popups. These are popups that appear immediately when you open a website and contain frustrating advertisements.

Entry popups:

  • are extremely disturbing
  • interrupt the typical browsing and reading flow
  • prevent visitors to get access to the desired content
  • often contain irrelevant (or outdated) content
  • makes visitors feel confused

Overall, they are always more annoying than helpful, and will really degrade the user experience on your site.

I’m sure you’ve already closed your share of annoying entry popups while browsing the web:Annoying entry popupsThe overuse of traditional entry popups containing unwanted, irrelevant advertisements is why Google has created webmaster guidelines to avoid the use of these popups, and using them can impact your search results. The popups are prohibited because they open in a new window and disrupt or block your visitors’ activity. So, entry popups should be avoided.

Unlike typical entry popups, which are annoying and can actually hurt your conversions, OptiMonk popups appear in the same window of your visitor’s web browser. They don’t prevent visitors from accessing the navigation bar and they’re absolutely Google-friendly.

Instead of bothering your visitors with entry popups, let your visitors get to know your website first and show your popup when their behavior shows they are ready for a secondary message.

Here are some typical solutions to display your popups based on engagement and make them more user-friendly:

  • Display the popup after ‘X’ second(s) when someone is reading your actual page to catch the attention of inactive visitors – inactivity may show that these visitors are stuck, and require further information or engagement to continue shopping.Popup after x seconds
  • Show the popup after a visitor has scrolled down on your page at least ‘X’ percent to catch the attention of actively reading visitors – scrolling down, on a blog for example, can mean that a visitor has finished reading your article and they’re ready for some new content.Popup after scrolling down
  • Recover your abandoning visitors by displaying your popup on exit-intent. This catches the attention of visitors who are leaving your site without converting.Popup on exit-intent

However, it’s vital that you take into account how many times a popup can appear per visitor. Pay special attention to the maximum number of times when the popup can appear, typically you want to limit this to 2 times or only once per visitor. You can also specify the time period between two appearances.

Popup appearing timesHere’s a good example of how to use popups based on user engagement. Zooji.com, the shoe retailer, displays its exit-intent popup based on engagement: this “$8 off” discount can be only seen by visitors who are abandoning their carts.

Zooji.com popup

Back to the Top

2. Segment your visitors

Your popup will only be useful and potentially “loveable” for your visitors if it provides a solution to their problem. Of course, it’s impossible to learn each individual visitor’s problem without contacting them personally – however, by segmenting your visitors, you can determine some groups of visitors that contain people with similar needs and characteristics.

These segments vary by industry and product line. However, all businesses can segment their visitors intro groups based on their interests, and even their stage of the buying process.

To work out your visitor segments, try to think like your customers (Who are they? What do they want? When do they want that? Are they ready to buy?) and think over your “customer journey” (What are the steps of customer acquisition? Do your visitors need some additional information or extra persuasion before buying?).

Let’s take a look at some typical segmentation options:

1. New vs returning visitors: Returning visitors or customers (or logged in visitors) are usually more engaged people who are closer to buying than new visitors who are learning about your website for the first time.

2. Cold vs hot prospects: Instead of handling all your visitors like they are “hot prospects” who are ready to buy right away, you should create different conversion goals for hot and “cold prospects” those who need further engagement before making a purchase decision.

For hot prospects the conversion goal is simple: you should encourage them to make an immediate purchase. You need to show these prospects content directed towards a sale, for example a discount or deal.

But for cold prospects you need a secondary conversion goal, typically to make them subscribe. After getting their contact details, you will be able to communicate with them over time and nurture your relationship with them until they are ready to buy. For this reason, you need to show cold visitors content that makes them subscribe, for example a downloadable eBook in exchange for signing up.

Let’s take a look to see how it works in action. Here’s a great example from BOOM!’s campaign that engages visitors with specific messages relevant to them depending on their place in the buying process.

They provide an eBook as a lead magnet for early-stage visitors who are interested in their product range pro-age cosmetics but aren’t ready to make an immediate purchase:

BOOM!'s lead generation popupIn addition, they use another exit-intent campaign to offer an instant 10% off coupon to their hottest visitors – people who have expressed the most interest in BOOM!’s content or are about to abandon their cart.

BOOM! popup coupon3. Geotargeting: If you sell internationally, location-based targeting or geotargeting can be a great way to boost conversions. With geotargeting you can create as many different messages for as many target countries as you’d like.

Segmenting your visitors based on their location allows you to provide them deals, such as offers on shipping. Here’s an example:

Popup shipping4. Target visitors based on their stage in the buying process: In a typical buying process or “sales funnel“, your first goal is to get visitors into the funnel — this is known an Awareness. You also need to guide them through the subsequent of the buying process – Interest, Consideration, Intent and Evaluation – before arriving at their final destination, Purchase.

Buying processIt isn’t practical to communicate the same message to early-stage visitors and to visitors who are in more advanced stages of the buying process, or those who have at least considered buying a solution for their needs.

Most likely, you can identify these three customer groups:
1. Early-stage customers = Awareness + Interest stage
2. Middle-stage customers = Consideration + Intent stage
3. Late-stage customers = Intent + Evaluation stage

Next, start to create different content and messages for these three groups:

1. For early-stage visitors, your primary goal is increasing their engagement and awareness of your offer. You can also use them to grow your retargeting lists by labeling and adding them to your “cold traffic” list. You can increase engagement and awareness for early-stage visitors by using relevant and useful blog posts, social media updates, infographics, audio and video podcasts, digital and print magazines, and more.

2. Middle-stage customers are more engaged visitors who are now familiar with your business. For these visitors, your most important goal is lead generation, or list building. These visitors are part of your “warm traffic” so it’s also important to add them to a different remarketing list from the early-stage visitors. For these middle-stage customers, it’s better to use educational and useful resources, webinars, events, discounts or coupons, or even quizzes and surveys to be able to communicate the most relevant messages at this stage in the buying process. These resources and content can be where you make your customer acquisition.

3. Your most valuable visitors are late-stage visitors. These are your most engaged prospects. In their case, lead nurturing is one of your most important goals. In addition, you also need to keep working hard to maximize perceived value, and driving towards a sale. Growing your retargeting list is important at this stage as well – for example, you can create a specific list for visitors who abandon their cart. You can engage late-stage customers by providing discounts, offers, and package deals. You can also offer demo products and free trials, presenting customer success stories, presenting different comparisons and holding webinars and events.

In addition, you also need to take your visitors’ onsite behavior into account if you really want to communicate the most relevant offer to them. On this basis, you can control who should see your popup. For example, visitors who:

  • have been on a subpage for at least ‘X’ seconds
  • opened at least ‘X’ number of page(s)
  • are from specific source URLs
  • are browsing one of these pages
  • have previously visited these pages
  • have spent at least ‘X’ seconds browsing the website
  • filled in or have already seen the following campaigns
  • have not visited a page during the recent period of time
  • have the following custom variables set
  • have specific items in their cart

This allows you to display different popups to visitors coming from Facebook and AdWords ads, show another campaign to prospects who have visited a special landing page but didn’t buy anything, or even target visitors who have already added some items to their cart. It’s as easy as that.

Back to the Top

3. Avoid the “one size fits all” approach and customize your message

You may have heard the phrase: “If you’re selling to everyone, you’re selling to no one”. This is especially true with popups on your website. Your visitors are different: they have different interests and concerns, and they’re looking for different products to achieve different goals. Why treat them all the same…?

Once you’ve separated your visitors into groups based on their interests, demographic or geographic variables, and even their stage in the buying process, you can show them the most appropriate message.

For instance, if you sell electronics and a visitor is interested in smartphones, “25% OFF Smartphones” is much more effective than “25% OFF Selected Products”.

Customized popups

There are four basic levels of customization for the messages in your popups:

  1. Everyone gets the same message – in other words, you broadcast a general offer towards all of your website visitors. This is not recommended.
  2. There is an offer for hot prospects and cold prospects – that is, you divide your audience into two major segments based on their engagement. Even this simple segmentation can make a difference.
  3. There are several offers for each of the main visitor groups – in this case, you divide your visitors into several different groups based on relevant variables and reengage them with customized messages for each group.
  4. Everyone gets a customized message using Dynamic Text Replacement – this is the highest level of relevancy which makes 1:1 customization possible, ensuring a completely tailored user experience.

With Dynamic Text Replacement, the text in your popups will update automatically based on the variables you choose.

Dynamically altering text allows you to gather leads more effectively, because it enables you to display highly targeted messages to different visitor groups – using only one popup. You can create one template and then alter the content to meet the needs of your audience. Using this approach reduces the amount of effort and ensures each of your visitor segments will see the most relevant content.

Looking at our example from above, the electronics store promotes “25% OFF Smartphones” when a visitor tries to leave their site from a smartphone category page or product page.

Customized popupHowever, when a visitor is browsing for laptop accessories and tries to leave the site, the word “smartphone” changes automatically to “laptop accessories” on the popup – speaking directly to the customer’s needs.

Customized popup

Back to the Top

4. Stay focused on one value proposition and goal at a time

A value proposition is how you convince your customers that they will benefit from your product. To maximize your conversions with onsite retargeting you should limit yourself to one value proposition or goal per popup and be sure to highlight it.

If you are trying to achieve multiple goals with your popups, you’ll decrease the chances of completing any of them. Convincing your visitors to take different actions at the same time will delay decision-making and leave people feeling confused. Ultimately, it will be hard to understand your message and the value of your offer, and it will deter visitors from signing up or making a purchase.

It’s also important to clearly display your message in your popup and not use any distracting graphics that make it hard to read the text. In the examples below, the popup on the right with no background makes the “$10 Off” discount the main focus of the popup.

Popup with and without graphics

Stay focused on one value proposition and goal at a time and your popups will be more effective. There are several goals that can be achieved by using onsite retargeting. Here are some possible goals, and how you should focus the value propositions or messages in your popups to achieve them:

  1. Driving sales:
    • Offer discounts and coupons
    • Promote special offers
    • Redirect to your best products and offers
    • Remind visitors who opted into an offer
    • Offer a “save cart” option
  2. Building your email list:
    • Highlight your newsletter subscription
    • Promote VIP membership
    • Offer email-only-deals
    • Provide discounts and incentives
    • Whitepapers and eBooks
    • Launch a contest or sweepstakes
    • Offer free giveaways and product samples
  3. Reducing cart abandonment:
    • Simple cart notification
    • Offer an incentive to complete checkout
    • Increase the sense of urgency
    • Communicate the scarcity of your offer
    • Cart notification with nanobars
  4. Upselling and cross-selling:
    • Upsell features and services
    • Upsell and cross-sell products
    • Cross-sell products dynamically
  5. Improving customer experience:
    • Ask for feedback
    • Display customer service options
    • Segment your visitors
    • Redirect to landing pages
    • Grow you social media
    • Highlight your warranty and return policy

You can learn more about how to achieve these goals using onsite retargeting in thisFREE eBook.

optimonk jb ebook com - UX Design Process Examples Popups to Improve User Experience

Back to the Top

5. Less is More – Don’t ask for too much information

The success of using onsite retargeting lies in providing value to your prospects. When you ask your visitors to sign up for your newsletter, you should give them a special reward in exchange for subscribing, for example: discounts, a free eBook, email-only-deals, free gifts, VIP membership registration, etc.

However, it doesn’t matter how valuable your giveaway is, if you ask for too much information, no one will sign up. New visitors may be hesitant to provide their information and they may be too busy to provide detailed information about themselves. On the other hand, you need to know as much information as possible about every prospect if you want to deliver personalized messages.

So, you need to compromise by keeping the following rule in mind: “less is more”. The less data you request, the more conversions you will have. By keeping your forms simple, you’ll get more people to sign up.

In many cases, an email address is enough, such as the example below.

Popup asking email addressTo be able to personalize your messages in the future, requesting only the first name and email address is another popular “less is more” approach, as shown in this example from Hulala.

Popup HulalaWhen you do request more information, it’s the best to make the additional input fields optional such as this example from InformatiX, a thought leader and strategist in business intelligence:

Popup InformatiX

Overall, any form elements should be easily understandable. You can lose leads by having a form which is difficult to read or navigate.

Here are some further best-practices for a “less is more” approach to creating popups forms:

  • Limit the number of text fields
  • Form fields should be clearly labeled and simple
  • Error messages should also be clear and simple when the information entered is wrong or missing

Back to the Top


By following these essential guidelines, you can use popups on your site without ruining the user experience. First of all, never use an entry popup, instead create popups based on engagement on your site.

Defining visitor segments and then displaying relevant offers is the next step. You can take this to the highest level of customization using Dynamic Text Replacement and automatically update the content of your popups for each visitor group.

Whatever segments you are targeting, avoid a “one-size-fits-all” and stay focused on only one value proposition at a time which is clearly displayed. Using a “less is more” approach with your popups and specifically your forms will also help increase conversions.

You can increase the conversions on your site and improve sales and signups without hurting the user experience. And, by following these rules, and displaying relevant content or redirecting visitors to your best deals, you can actually improve the user experience on your site!

Which guidelines do you think are the most important for the popups on your site?

Leave a Reply

Your email address will not be published. Required fields are marked *