Jan 30 2013

Designing a Landing Page, Part II: Pre-Launch Optimization

designing part of a typical landing page

In Designing a Landing Page, Part I, we discussed the use of certain confidence builders on a landing page in order to persuade your visitors to answer your call to action. With input from our fictional client, Orange Walnut, we were able to construct a mockup that combined their vision, the confidence builders we selected, and the best practices that we’ve developed over the years. While client preferences and best practices are a great place to start, they are just that, a starting point. The most important step in designing a landing page involves the tools and steps used to optimize it.

Pre-Launch Optimization

Getting it right before you launch

So we haven’t launched the site yet. That means there are no analytics to pull from, no data to stew over, and no A/B test results to examine. A few years ago, pre-launch “optimization” would have been based on whatever the designer and client thought worked in the past. At most firms, that’s still the case.

Predicting Behavior with Custom Tools

Custom tools for unique pages

At Blue Acorn, our design team doesn’t design in the dark. We built a custom tool that predicts how customers will respond to different visuals. We also use another custom tool that uses an algorithm to predict the path of human eye movements. These tools allow us to deliver landing pages that are as optimized for human eyes as possible before being seen by the public. It’s more than intuition and experience. It’s science.

The first tool, which has been custom built by Blue Acorn, defines hot spots and cold zones in terms of contrast. Hot spots show up red and signify areas of concentrated visual contrast. The more contrast, the more an area will impact and draw visitors’ eyes. Areas of lower contrast turn up cold and are more neglected than their high-contrast counterparts.

On our page, we realized that Tom Selleck’s face was a real hot spot of activity, a characteristic we attribute to his magnificent mustache and bronzed cheekbones. By moving Mr. Selleck up, we added more contrast – and thus, attention – to our primary call to action, the phone number.

tom side by side with heatmap

In the same vein, a piece of paper and a small musket were areas of heavy contrast within the video panel. So, we made the play button in the video brighter, and consequently the two points of contrast meshed together to give us a large hot spot on our secondary call to action.

landing pages next to one another with heatmap

We adjusted the levels of contrast to bring more attention to the brand logo and the scent, which in this example is the image and text in the upper right hand corner. With all of our confidence builders optimized to stand out visually, our next step was to arrange them in a manner that would (a) fall along a predictive visual pathway and (b) lead visitors’ eyes to the call to action.

Predicting a Visual Pathway

The key to better placement

Enter the second tool we mentioned earlier. Using custom-defined algorithms, this tool, which we call “Inception Wire” (because that sounded really cool), revealed the pathway that the average set of human eyes would naturally take to explore our current landing page mockup. It gives a visual map of where human eyes travel in the old-map style of Indiana Jones (which, by the way, nearly starred Tom Selleck).

Tracking shows us where people will most likely look

The tool revealed that visitors’ eyes would travel from the play button in the video, to Tom Selleck’s cookie duster, to the brand name, to a random spot in the video, to the scent, back to the video, and after a few random glances around, it finally wound up timidly passing over the phone number.

Well, shoot. Our confidence builders stood out, but they weren’t yet in the optimal position to lead Orange Walnut’s visitors to the call to action.

All is not lost, however. We didn’t become the intelligent eCommerce Agency by being a one-trick pony. We decided to do something very simple, logical, and revolutionary.

We mirrored the design.

The simplicity of this decision should be obvious. What was on the right is now on the left. What was on the left is now on the right. Simple. It’s logical to move the call to action to the left side because every word of every paragraph of everything you’ve ever read begins on the left. So why is this revolutionary? Because so many eCommerce sites continue to place their call to action buttons on the right.

The Payoff

Guiding eyes to the right place

After our very simple, logical, and revolutionary design changes were made to the mockup, we analyzed the new layout again. The predicted path for attention now goes from the video button to Tom Selleck’s well-equipped upper lip, the brand, the scent, the description, and ends on the call to action.

According to our tool, visitors will most likely look at every confidence builder before being guided directly to the primary call to action. Is that a success? Heck, yeah. Are we ready to start theming this page? Of course. Are we done optimizing? No way.

The Road Ahead

Optimization never ends

Our design work, guided by these tools, put our client far ahead of where they would have been in terms of an optimized design, but none of the methods that we’ve described thus far are examples of true conversion testing, which we highly advocate at Blue Acorn. Such testing involves tracking the results of publically available landing page variations and lots of people, and people, as I’m sure you know, can be strange.

Nevertheless, now that we have our client, Orange Walnut, starting with what we believe to be the best design for the average human eyes, we will perfect the optimization of this landing page by testing against the same eyes that come to visit Orange Walnut’s site. To do this, Blue Acorn will collect data on how users behave by tracking how long they are on the page, where they come from, where they go, if they call, how many times they play the video, where their mouse travels, and even where their eyes travel. We’ll also run an A/B split test, pitting our latest version of the landing page against a more traditional version, in order to be positive about which one converts better.

There are a few key things to remember about designing a landing page. First, optimization is rarely ever 100% finished. You can almost always get more mileage out of your conversion rate. However, starting a hundred miles ahead of the competition is a major advantage. Second, confidence builders should be used but not abused. Try not to use too many, and don’t be crass about drawing your attention to them. Third, always remember that the call to action is the most important aspect of every page.

*Note: While Orange Walnut is a fictional client, 100% of this process is true to Blue Acorn.

Matthew Rickerby

Head of Marketing

Matt began his career in ecommerce at Blue Acorn over five years ago. His areas of expertise include persona development, account-based marketing, and content marketing. He has co-written speaking sessions for Bronto Summit, DIG South, GIANT, and Revolve, and received multiple awards for videography, blogging, and copywriting.


Feb 04 2013

Glad to know about pre lunch landing page design, I will do follow them on my landing page design as well. Thanks for such good post.

Feb 27 2013

Amazing technology you guys are creating for ecommerce. For a person who doesnt have such tool what has worked for me is using mechanical turk and usertesting.com to drive users to a landing page to gather quantitative data and I also ask them questions afterwards to get qualitative feedback.


Leave a Reply

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