Using Conversion-Centered Design to Build a Killer Exit Popup

by Angus Lynch on January 19, 2015
2 Flares 2 Flares ×

Image Source

First off, hat tip to Oli Gardner from Unbounce for his awesome guide on Conversion-Centered Design.

Oli’s guide defines how conversion-centered design (CCD) helps marketers design high-converting landing pages.

But since an exit popup is essentially a condensed version of landing page, CCD can also help you design an effective exit popup.

And with a CCD-inspired landing page and exit popup working together, you’ll have an awesome conversion duo that works well as a team.


Image Source

The lowdown on CCD

In the guide, Oli defines CCD as “the use of design and psychological elements to guide prospects towards a single focused objective.”

The core principles of CCD are discussed; specifically how they focus on using psychology and persuasion to achieve business goals on landing pages.

And here at Rooster, we love landing pages for many reasons.

We love them because they’re the perfect launchpad for a successful exit overlay campaign, effectively serving as a larger, more detailed version of the overlay itself.

We love them because they focus on a single offer, allowing the exit overlay to repeat and reframe the same offer, and taking advantage of effective frequency.

And of course, we love them because exit overlays that launch from a landing page achieve far better conversion rates than those launching from a homepage.

So how do you use CCD to create a dynamic conversion duo?

Let’s dig in.

Principle #1: Contrast and color

Wandering eyes are the enemy of conversion rates.

Your exit overlay needs to create a ‘tunnel vision’ effect that directs your visitor’s eyes towards the call-to-action (CTA), free of distractions.

You need visitors to focus on what you want them to focus on: the value they will get by taking your desired action.

CTA text aside, your message (headline/body copy, CTA) must use contrast to stand out from other graphical elements.

After all the work it takes to implement an effective landing page and exit overlay, you cannot risk distracting from your viewers from the core message over something as trivial as colour contrast.

Diamond Candles uses contrast and ‘blank space’ effectively to ensure their message is read.

There is no perfect colour for CTA buttons, there are simply too many variables at play to make such a statement. The only wrong colours are those that don’t contrast the blank space.

Principle #2: Directional cues

Given how little time a visitor will spend looking at your exit overlay, using directional cues is a great way to steer them towards your desired action.

Good examples of directional cues are:

  • Arrows pointing towards what you want the user to do
  • Pathways (roads or trails)
  • Eyes looking towards your conversion target (people or animals—puppies work well)

Untitled uses a directional cue to focus attention on the CTA

Consistent use of directional cues on both your landing page and exit overlay will help steer hurried users towards your CTA.

Principle #3: Blank Space

Colour and contrast are important to making your message pop, but none of it matters if your design is too crowded.

Having empty areas within your exit overlay is important to making your CTA stand out. Since the colour isn’t important, we call it blank space.

Baby Age uses blank space effectively to make key elements stand out.

The purpose of blank space is that you want visitors focusing on your CTA. It doesn’t mean they’ll ignore the rest, but the CTA must be the primary focus in order to generate strong conversion rates.

Assuming your landing page focuses on a single goal and uses blank space effectively, having a consistent amount of blank space in your exit overlay is key to making it a strong sidekick.

Principle #4: Urgency & Scarcity

Urgency and scarcity have been used in traditional advertising for decades, so it’s no surprise they’re also important to conversion-centered design.

Your dynamic landing page-exit overlay conversion duo must convey both these feelings, but at different levels.

Since your exit overlay is meant to ‘sweeten the pot’ and convince an abandoning user to stay longer, it should ratchet up the urgency and scarcity established on your landing page.

For example, if your landing page mentions that shipping is free for a limited amount of time, your exit overlay could get even more specific by launching a timer, as per the example below.

Diamond Candles amps up the urgency with a countdown on free shipping.

However you decide to sweeten the pot, just remember that your trusty sidekick is there to build upon urgency and scarcity already established on your landing page, not introduce it.

Principle #5: Exclusivity

People love being in on a secret.

A desire to feel exclusive is inherent to our character. We like to be the first, and we like to know things others don’t.

Conversion-centered exit overlays can capitalize on this trait by conveying exclusivity. In the example below, ConversionXL conveys exclusivity by inviting visitors to join their “private” CRO newsletter.

ConversionalXL uses the word “private” in their subheader.

Sail Away also uses exclusivity well by inviting people to “Get on the List” and get a coupon code.

“Get on the List” for “exclusive access to new products”

Who wouldn’t want to be “on the list?” Use equal measures of exclusivity on both your landing page and exit overlay to increase conversion rates.

Principle #6: CTA Design & Messaging

The design, messaging and placement of your CTA is critical to the success of your exit overlay.

Your ultimate goal is create a powerful and descriptive button that is a) as short as possible and b) describes exactly what will happen when the user clicks.

From our experience, the most effective CTA buttons are two lines, with the second sentence supporting the message in the first line. Here’s an example below:

Image Source

As mentioned earlier in this post (principle #2 – Contrast and Colour), the CTA must stand out from the rest of the exit overlay. The colour isn’t as important—what’s important is that it stands out.

Placement of your CTA is quite simple: in between your headline and your opt-out text, as per every example you’ll find in this post.


The principles of conversion-centered design by can help make sure your landing page and exit overlay are on the same page by:

  1. Using contrast and colour to separate your CTA from the rest of the page.
  1. Using directional cues to steer users towards your desired action.
  1. Using adequate blank space (white space) to avoid clutter and help your CTA stand out.
  1. Conveying a sense of urgency and scarcity around your offer will increase your conversion and/or opt-in rates.
  1. Conveying exclusivity on both your landing page and exit overlay.
  1. Using a CTA that succinctly describes what happens when the user clicks.

If you’ve read any case studies on exit overlays, you know they’re generating some very impressive results for site owners.

But what makes them so effective?

Check out this post on 5 scientific reasons exit overlays are so effective to learn more.



No Comments

Be the first to start the conversation.

Leave a Reply

Text formatting is available via select HTML. <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>