• Build a landing page in the Unbounce Builder's new Preview mode
  • Case Study: How I Created a Viral Ebook Landing Page – Using ThemeForest, PayWithATweet, Qualaroo and Unbounce

    Want to plug great online tools together to create higher conversions? Me too.

    Today I’ll show you how I created and optimized a professionally designed, socially viral landing page for an eBook, and how you can do the same in just a few hours, without writing any code.

    The goal of my page was to spread the word about a new PDF eBook based on a blog post I’d written over at SEOmoz (“The Noob Guide to Online Marketing“), and to build a page using self-sustaining viral features that leverage the network effects of social media marketing. (Insert dream of perpetual motion here).

    Plus, I’ll share some surprising results and stats I learned about the “fear of public tweeting”…


    Embed this graphic on your site


    Introducing the Tools

    I used three online services and one page design marketplace to bring my vision together as quickly as possible, each of the tools is either free or has a free plan to let you try out your concept with the minimum of fuss. The only cash outlay came from buying the page design – for about the price of two cups of coffee.

    Here’s what I used and why:

    1. ThemeForest: For my landing page design shopping experience I headed to ThemeForest to check out their new landing page section.
    2. Unbounce: I used Unbounce (obviously) to construct the landing page in a code free WYSIWYG editor.
    3. PayWithATweet: This great new free service is what adds the viral secret sauce to your page.
    4. Qualaroo: Once the page was ready, I used this to gather customer feedback on the page. There were some surprising results and lessons learned.

    Step 1: Shopping for an eBook-Style Page Design at ThemeForest

    As is often the case, I was feeling too lazy to design a new page from scratch (I’m a slow designer at the best of times), so I started with a little retail therapy over at ThemeForest, where they’ve started putting together a great section of marketing focused landing pages (86 at last count) ranging in price from $2-$10.

    The Premiere Landing Page template from ThemeForest

    Each template comes packaged with Photoshop PSD files and they usually have a variety of color palettes to choose from.

    My goal was to find a page template with a nice big hero shot of a book cover to showcase the eBook I wanted to give away.

    The Premiere Landing Page theme had exactly what I was looking for and at $8 was a no-brainer.

    Step 2: Building the Page in Unbounce

    The ThemeForest files typically include images already cut up for you (great for people without Photoshop experience), but I sometimes cut them up myself in case I want to make any customizations to the design. The screenshots below show some of the steps I took to re-construct the design in Unbounce.

    First, I started with the blank page template and added a “page section” for the primary content area and uploaded a background image as shown below:

    I made the page section tall enough to contain the background image and set the background to stretch to the page edges.

    Next, I added our logo and tagline, along with the primary headline and description. For creating text, you can either use the built-in text editor (makes it easier to change for testing or updates), but in this case I wanted to maintain the font used in the design (which wasn’t a web font), so I chose to upload a graphic of the text that I’d saved from the Photoshop file.

    All page elements can be freely moved around the page to position them wherever you need.

    Some templates (such as this one) show the hero shot of the product at an angle which makes it harder to replace with your own image. Luckily, the designer of this page had included very precise instructions for how to recreate the angled view in Photoshop. I created the cover according to the sizes specified in the help docs and after ‘skewing’ it for perspective, I uploaded the angled image to Unbounce and dragged it into position.

    Here you can see that I have the image selected. After moving it close to the right spot, I nudged with the arrow keys for an exact placement on the product box.

    For the bottom half of the page, I added another series of images containing the bullet points and section titles. I also used some 1px thin box elements to create the gray separation lines.

    Adding a video

    To provide some context for who wrote the eBook, I wanted to put a short showcase video onto the page. I started by adding a colored box to act as a border for the video, then added the “Custom HTML” widget inside the box (the “Custom HTML” widget is the gray box shown). The screenshot below shows how I pasted in the embed code that I grabbed from our video hosting provider Vzaar.

    You can also paste in the embed code from YouTube, Vimeo or any other video site.

    Adding a lead gen form

    I wanted to add a simple form in the footer to capture email addresses in exchange for a special Unbounce promo. I usually stay away from having more than one call to action, but wanted to experiment to see if people would be interested. The screenshow shows the form builder (with only one field in this case). I made the field label invisible so that I could include my own custom text “Email” label beside the form.

    The form builder lets you easily add a lead capture form to your page. You can then pass the data through to a list at an email provider like MailChimp or AWeber and receive automated notification email updates whenever a new lead is captured.

    Step 3: Add the PayWithATweet Button

    If you’re paying attention, you’ll notice that I haven’t added the primary call to action (CTA) yet. That’s because I’m saving the awesomeness for this step. PayWithATweet is a social payment system from Innovation Thunder that allows you to require that your visitors tweet a message about your product (my eBook in this case) which also includes a link back to your landing page – completing the circle and inviting others to check out the page.

    This is the part that facilitates your page and product going viral.

    This clever network effects means that the more people pay for your product with a tweet, the more new people will get to hear about it – perpetuating the flow of traffic to your landing page.

    I took the button from the Photoshop file and changed the wording to say “Get it for a tweet!” and added a cute Twitter bird icon I found on Smashing Magazine, to reinforce the nature of the resulting interaction.

    To set up your social payment you will need to upload your file (my eBook PDF in this case) to your web server, then fill out the form on http://www.PayWithATweet.com/sell.php. The image below shows the type of information you need to provide.

    You decide what the default tweet text will be, but your customers can edit it before it’s posted to their stream. They can’t remove the link back to your page though which is how the viral nature is preserved.

    After clicking “Create my Button” you will be presented with a few standard buttons to use and also a link that you can just ad to your own button (if you want a custom designed button like the one in the ThemeForest design I’m using). I grabbed the link, set it as the target for my button and set it as the page conversion goal in Unbounce (so that I can track how many people click the button).

    After this was done, my page was ready. I published it (single-click and no pesky I.T. people) and started driving traffic to it via Twitter.

    Tip: if the viral sharing mechanism is Twitter – then you want to focus your marketing on that environment (because people on Twitter use Twitter, duh!). I also placed some links strategically around a few pages to generate some extra traffic, but Twitter was the primary inbound source.

    Step 4: Gather Visitor Feedback with Qualaroo to Improve Conversion Rate

    After watching the conversion rate hover around 25% I decided to try and figure out why more people weren’t clicking my CTA.

    To do this I added the Qualaroo (formerly KISSinsights) survey widget.

    Qualaroo is a small interactive widget that appears in the lower–right corner of your page either immediately, or after a predetermined delay (I set it to 20 seconds to give people some time to digest the page messaging).

    It allows you to survey your visitors with simple questions to gain insight into their experience.

    Adding the Qualaroo feedback widget

    Similar to the video I added earlier, adding the Qualaroo widget is just a matter of cutting and pasting a Javascript snippet into the “Scripts” panel. You can watch a complete instructional video which shows you how to create a simple survey question and how to add the Qualaroo script into Unbounce.

    When you set up your account at Qualaroo, they provide you with the script to paste into Unbounce.

    As you can see, I asked two questions to try and uncover what was going on:

    1. If you didn’t click the “Get for a Tweet” button, why is that?
      To try and assess the reasons for any click fear.

      • I wasn’t sure what would happen when I did. (Can you decribe what you thought would happen?)
      • I didn’t want to Tweet about it. Why not?
      • I’m not interested in the eBook – was just checking out the page. Why were you here? – It all helps :)
      • Would rather have given an email address than tweet about this page
      • Other
    2. Do you think a Tweet is a fair exchange for a free eBook?
      To see how valuable the eBook was perceived against the currency of a tweeted recommendation.

      • Yes
      • No (Here’s why…)

    I was pretty surprised by some of the results, which I’ll explain below along with the steps I took to optimize the landing page based on the feedback I gathered.

    Results, Lessons Learned and Conclusion

    Overall 7% of visitors answered the survey questions. After digging through hundreds of responses, this is what I learned:

    Results and insights

    • Click fear: 5% of people didn’t know what would happen when they clicked the button. Does it tweet on my account automatically? Will I get a chance to edit the message before it appears on my Twitter stream?
    • Unknown quality: Some people were reluctant to publicly support something that they hadn’t yet read.
    • Email vs. tweet: Very surprising to me was the fact that 39% of people answering the survey would rather have offered an email instead of tweeting. Digging into individual responses it seems that the primary reason for this was that people would rather tweet about it after having read the content and established an opinion about it’s value (as noted in the last point). I suspect that there would also be a fairly large number of people that would use a false email if they could – it’s important if you do an email exchange that you specify that the eBook will be delivered via email – preventing fake information being entered.
    • A fair exchange: This was a bit of a shocker. Only 70% thought that an eBook for a tweet was a fair exchange. Maybe I needed to communicate more effectively what was contained in the PDF. The statement that it was 62 pages long wasn’t enough. It also sheds light on how protective people can be about what they say via Twitter – again, it makes total sense when you consider that someone is effectively giving you a recommendation (often to thousands of people who have come to expect a certain standard).
    • Tire kickers: 6% of visitors were just checking out the link. I recall seeing one individual that tweeted that they could resist clicking on it because the word “noob” made them laugh. Others were simply curious about the mechanics behind the PayForATweet concept.
    • I don’t want to tweet about it: 25% of respondents said they didn’t want to tweet about it. Reasons were a mix of the points already mentioned, but it also included people that didn’t have a Twitter account – making them feel left out.

    Steps taken to improve conversion rate

    After digesting the feedback, I made a few changes to the page:

    • Overcoming click fear: I positioned two statements close to the CTA stating that you will have the opportunity to edit the tweet before it gets sent.
    • Infographic preview: On the hero shot I placed a link to an enlarged view which launched a modal Lightbox style overlay containing the infographic, allowing people to see it and judge the quality.
    • Text content preview: As the PDF was based on a blog post, I linked to the post, explaining that it represented the content of the eBook, again allowing people to see the quality of the content.

    The outcome

    After implementing these changes I observed the following:

    • Conversion lift: The conversion rate peaked at 35.7% and seems to have settled in at the 33% mark which represents a conversion lift of 32% from the initial conversion rate of 25% – pretty decent!
    • Traffic: The recurring aspect of this model has resulted in thousands of tweets in a few weeks, and even after I’ve stopped promoting it, there’s a constant stream of 50-100 people tweeting and downloading every day which is really cool.

    Future testing

    Ideally the content preview would be a single chapter of the eBook in PDF format, because I suspect that a portion of my visitors are clicking through to the blog post and are content to consume the information there (not needing or wanting a PDF version). I’d also like to try offering up two options side by side – a BuyForATweet button and a lead gen form, to let people choose their purchase medium. Part of me is a little reticent to offer the email option as the viral nature of the tweet is lost with this method.

    The Finished Landing Page

    You can see the final landing page below and can visit it here: http://try.unbounce.com/noob-guide-pdf/

    The final page using the PayWithATweet social exchange button. Also shown is the Qualaroo widget in the lower-right corner.

    What do you think of this tool combo?

    If you have any thoughts or other ideas of things to test, I’d love to hear them in the comments .

    — Oli Gardner

    About Oli Gardner
    Unbounce co-founder Oli Gardner has seen more landing pages than anyone on the planet. He’s obsessed with identifying and reversing bad marketing practices, and his disdain for marketers who send campaign traffic to their homepage is legendary, resulting in landing page rants that can peel paint off an unpainted wall. A prolific international keynote speaker, Oli is on a mission to rid the world of marketing mediocrity by using data-informed copywriting, design, interaction, and psychology to create a more delightful experience for marketers and customers alike. He was recently named the "The 2018 Marketer to Watch," in the under 46 category, by his mother.
    » More blog posts by Oli Gardner