CONVERTABLES OVERLAY LOOKBOOK SPRING 2017

Transcription

1 CONVERTABLES OVERLAY LOOKBOOK SPRING 2017

2 Overlays can be beautiful too They say beauty is in the eye of the beholder, and we at Unbounce think overlays are beautiful. Actually, let us rephrase: We think some overlays are beautiful. Others are less so we d even go as far as saying they re downright offensive. But what makes an overlay beautiful to us? It s not just one thing, it s many. Of course, design and copy best practices apply, but so does our three-point rule, which can best be summed up in a question: Is it timely, is it valuable and is it relevant? On the following pages, we re going to share with you eight Unbounce-built overlays, and point out just why we think they re so beautiful. Not all of them may have the haute couture aesthetic found on the pages of Vogue, but they all present the right offer to the right visitor at the right time, and that folks is a thing of beauty. 2

3 Table of Contents Shopify Plus 2 15Five 6 Hotjar 10 Lawpath 14 License Desk 18 Campaign Monitor 22 ESET 26 Claims Unit 30 BONUS 9 Unbounce 34 3

4 01 SHOPIFY PLUS Industry: SaaS (Ecommerce) Goal: Generate leads by offering a resource Overlay type: Lead generation Overlay trigger: On exit Frequency: Show on every visit, until they convert Targeting: URLs that contain enterprise 2

5 3

6 4

7 Why We Love It The button copy Keep me posted is focused on what the user will get from clicking, not what ShopifyPlus will get. We love gold and so does ShopifyPlus. The overlay aesthetic and color palette matches ShopifyPlus distinctive monochromatic design. Business hint text. By asking visitors to use a business , Shopify+ is getting better and more accurate lead data, which will help when they want to nurture their leads. Apt placement. Visitors browsing enterprise-focused pages are likely looking for a robust tool, and a live demo is a great way for prospects to determine whether ShopifyPlus ticks all their boxes. Convertables are AMAZING. We ve had some incredible growth in a very short period of time, and it ll be a key part of my stack moving forward. Tommy Walker, ShopifyPlus 5

8 02 15FIVE Industry: SaaS (Employee engagement and performance) Goal: Divert abandoning visitors to learn about a 15Five s new Objectives Overlay type: Traffic shaping Overlay trigger: On exit Frequency: First visit only Targeting: Homepage 6

9 7

10 8

11 Why We Love It The headline and subhead are short yet incredibly information rich. With just a few words and a single image we know that 15Five has a new feature that allows companies, departments and individuals to easily create, track and manage their OKRs. Show, don t tell. The screenshot of the tool gives visitors an insider s peek of 15Five s simple interface. A unique use case for overlays. Rather than simply letting abandoning visitors bounce, 15Five uses an overlay to entice them to learn more about their new feature, which might very well mean the difference between a bounce and a sale. PRO TIP: Use traffic shaping overlays (i.e., click-through overlays that direct visitors from low-converting to high-converting pages) on company pages (e.g., About Us ), blog posts/articles and other high-traffic pages with low conversion rates. 9

12 03 HOTJAR Industry: SaaS (Analytics Tool) Goal: Lead generation, but also,...to prove whether there was a case for using overlays. Overlay type: Lead generation Overlay trigger: On exit Frequency: Once Targeting: Pricing page 10

13 11

14 12

15 Why We Love It The headline is subtle yet totally persuasive: Hotjar is a successful company, and by downloading their guide you can succeed like them. The subhead copy really highlights the benefits the visitor will get. Uncover [my] best growth opportunities? Take my (and my first born). That hero shot! By including an image of the ebook, visitors get a tangible idea of what they ll get. Can we talk about the button copy, too? It finishes the sentence, I want to which is why people just can t help but click it. It s tough to get visitors to convert on a Pricing page if they re not quite ready to purchase, using an overlay to at least gather some lead info is a great way to nurture them to conversion. Convertables are getting us new users per month. Nick Heim, Director of Inbound Marketing at Hotjar 13

16 04 LAWPATH Industry: Legal Goal: Generate leads by offering a free legal document Overlay type: Lead generation Overlay trigger: When the visitor scrolls 40% down the page Frequency: Show on every visit, until they convert Targeting: Blog 14

17 15

18 16

19 Why We Love It By specifying the value ($99), Lawpath makes an offer you can t refuse: You share your name/ address and we ll give you a custom legal document valued at nearly $100. You can t see it in the image, but the overlay background is actually a looping video. It s not distracting enough to lure your eye away from the offer, but it definitely adds a certain pizazz. The button copy along with the subhead copy, sign up now indicates you won t have to wait for your legal document, but will get it immediately perfect messaging for those folks who love instant gratification. The orange button pops against the grey background and the copy focuses on the visitor, not Lawpath. Presenting the offer after a visitor has scrolled 40% of the way down the page is smart, because it shows the visitor is engaged with the content maybe even engaged enough to test out Lawpaths services. PRO TIP: Never use generic CTA copy like submit. Instead, lead with the result or benefit of the action the user is taking, like Get My Coupon or Enter the Sweepstakes. 17

20 05 LICENSE DECK Industry: IT Goal: Get abandoning visitors to book a free consultation Overlay type: Lead generation Overlay trigger: On exit Frequency: Show on every visit, until they convert Targeting: Lead generation landing page 18

21 19

22 20

23 Why We Love It It s the only overlay in the Lookbook that includes a testimonial. Although an anonymous testimonial is perhaps less powerful, it effectively illustrates how their business was positively impacted by License Desk s offerings. The button copy is specific and user-centered. What does License Desk want you to do? Book a FREE consultation, of course, and the button copy reflects that. Talking about button color can be superficial, since it s less about color choice and more about contrast between button and background. In this case, the orange button works because it contrasts the blue-hued background. Love that little curved arrow a directional cue which guides the visitor s eye to the single form field. It s an overlay-landing page love story! Did you know? You can also use overlays on landing pages, like License Desk has done. While the landing page features a three-field form to book a consult, the overlay triggers on exit featuring a single form field talk about reduced friction! PRO TIP: Trigger your overlay on exit when: your offer may save a potentially lost conversion (e.g., a coupon code or shipping discount) or you re offering free resources or collecting sign-ups that enable you to save a user s details for future communications. 21

24 06 CAMPAIGN MONITOR Industry: SaaS (Marketing Automation) Goal: Generate leads by offering a resource Overlay type: Lead generation Overlay trigger: On exit Frequency: Show on every visit, until they convert Targeting: URLs that contain variations of -marketing 22

25 23

26 24

27 Why We Love It The contrast is on point. The white against the blue are striking together and make the overlay really stand out from the page. Contrast bonus points. The green CTA button really pops against the white background. Effective button copy. It s specific ( free guide ), addresses the user ( my ) and invokes a sense of urgency ( now ). Yay, directional cues! And notice how the arrow is kind of shaped like a smile? Maybe it wasn t intentional, but it certainly makes us happy. The color palette matches the site s sleek and modern design. An marketing guide on pages with -marketing in the URL... Don t think you can get much more relevant than that! Convertables have given us a new way to engage with our audience, provide them with valuable content, and turn them into Campaign Monitor customers. Jayakumar Shamita, Senior Marketing Manager at Campaign Monitor 25

28 07 ESET Industry: IT Goal: Get people to purchase the software at a reduced price Overlay type: Revenue generation Overlay trigger: On arrival Frequency: Show on every visit, until they convert Targeting: Homepage 26

29 27

30 28

31 Why We Love It Two words: countdown timer. Nothing screams urgency quite like it. The countdown timer combined with the specificity of the $30 discount is a match made in conversion heaven. OMG plus a full year free? ESET is laying the deals on thick, making it hard to deny their offer. The post-conversion experience is a dream; when you click on the CTA, you re taken to your shopping cart with the coupon code populated and the discount applied. PRO TIP: If there s actually a time limit or limited quantities of your offer, let your audience know. Users are often more likely to convert if they feel an offer is time-sensitive. 29

32 08 CLAIMS UNIT Industry: Finance Goal: Send traffic from a low-converting page to a high-converting page with a form Overlay type: Traffic shaping Overlay trigger: On exit Frequency: Show on every visit, until they convert Targeting: Blog post 30

33 31

34 32

35 Why We Love It This overlay appears on a blog post-like page, which tend to be high traffic (though low converting) pages. By installing a traffic shaping overlay like this one, Claims Unit is able to direct visitors from a traditionally low converting page to a high-converting page, and that s just plain smart. The headline ( Can you afford not to check? ) and subhead copy ( Don t be the one that misses out ) plays on people s fear of missing out to elicit an emotional response. The color scheme of this overlay really makes it pop against the dimmed background. Plus it s got this real nice prism-y look to it, like a diamond. PRO TIP: While you may have heard that certain colors are more effective at producing conversions, the truth is it s different for every situation. That said, complementary colors (e.g., purple and yellow, blue and orange, green and red) consistently work well. 33

36 09 BONUS UNBOUNCE Industry: SaaS (Landing Page & Conversion Marketing Platform) Goal: Blog subscribers Overlay type: Lead generation Overlay trigger: On exit Frequency: Show on every visit, until they convert Targeting: On a blog post with a magic angle 34

37 35

38 36

39 Why We Love It Not to toot our own horn, but did you notice how we placed a magicthemed overlay on a magic-themed post? We call that relevance, and we did it on purpose. The (social) proof is in the puddin. 30,000+ marketers subscribe? Count me in, too! Choices but not too many. By offering users the choice between daily or weekly updates, they control how many s they receive from us. The CTA button is, of course, orange. But that s not what actually matters rather it s the contrast between the blue shades and the orange that makes the CTA really pop. And check out that button copy: Send me marketing magic. Tell me you don t kinda wish you could click it now. PRO TIP: The best overlays are the ones that grab your visitor s attention at the perfect moment. Use triggers (on arrival, on exit, after a delay, on scroll) to make sure it s timely and advanced targeting (like referral and cookie targeting) to ensure it s relevant. 37

40 Wanna try out some of the tips and see what works best for your offer in your industry? Using Unbounce Convertables, you can build on-brand overlays in mere minutes. Mix and match different targeting and triggers to present the most relevant, timely offers for your visitors. TRY CONVERTABLES FREE FOR 30 DAYS! Already an Unbounce customer? Log into Unbounce and start using Convertables today at no extra cost. 38