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”…
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:
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.
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.
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:
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.
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.
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.
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.
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.
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.
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.
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.
As you can see, I asked two questions to try and uncover what was going on:
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.
Overall 7% of visitors answered the survey questions. After digging through hundreds of responses, this is what I learned:
After digesting the feedback, I made a few changes to the page:
After implementing these changes I observed the following:
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.
You can see the final landing page below and can visit it here: http://try.unbounce.com/noob-guide-pdf/
If you have any thoughts or other ideas of things to test, I’d love to hear them in the comments .