Designing for higher conversions ain’t easy. Most CROs focus on tweaking their headlines, optimizing USPs and crafting compelling CTAs.
Don’t get me wrong, these elements are incredibly important. Copy is after all at the heart of optimization. If you neglect to test and optimize your copy even the prettiest of landing pages won’t save you from a failed campaign.
You can spend all your time beefing up your content and crafting killer offers, but if your prospects aren’t immediately interested in what they see, you’ve got little chance of wooing them with your persuasive content.
What Designing for Conversions Isn’t
Designers often have one aim with site design, to create a thing of beauty. They’ll spend hours tweaking site design but, it’s sad to say that beauty isn’t what drives conversions. In fact, you can even go in the opposite direction and have an ugly site that still converts like crazy!
A beautiful design doesn’t hook the attention of your prospects. No, a clear communication of the primary benefits is what hooks prospect’s attention.
So let’s ignore the generic advice all over the web for creating a beautiful piece of content or landing page and instead look at what you should be doing to create a page that converts.
Keep Your Pages Structured
Whether you’re a fan of long form landing pages or short capture forms, structure is incredibly important. Before you write even one word of copy or select a single image for use, you need to know the overall structure and flow for your page.
Too many CROs leave the optimization of design until after launch, stating test data and statistics as a necessity for optimization. Well, they’re half right.
Test data is needed to optimize your page. But you don’t want to half ass your launch with a terrible page. You’ll see poor initial sales and have terrible data to optimize from.
Starting off strong is imperative for a new product or page launch. Not only does it ensure your later optimization efforts are exactly that – optimization and not a full redesign – but it also gives you better test results to work with.
The first step you’ll need to structure your page and figure out the flow of your messaging is to follow the good old AIDA model.
We’ve all heard of AIDA before and it’ll come as no surprise that I’m recommending it here. However, how exactly do the stages of AIDA correspond to the structure of your landing page?
Attention – Capture the attention of your prospects with a killer, relevant headline or USP
Interest – Using a video explainer is an often utilized method for gaining the interest of your prospects.
Desire – Dig a little deeper on the actual offer. Offer a concise list of benefits and features to keep prospects engaged and appeal to their needs. Further these benefits with the use of social proof and reviews.
Action – Finally comes your CTA. If you’ve followed the above steps successfully then asking for a sign up or purchase should seem like the next natural step to your prospects.
The AIDA model certainly helps decide upon the flow of your messaging, but we’re also going to need to look into the specifics of design. We’ll need to figure out whether the visual elements of your AIDA influenced design are going to work well together and create a cohesive flow.
For that, we’ll need the help of a wireframe.
A wireframe is a visual representation of your website. It’s been the go-to planning method for developers and designers for years and should map out in detail what you want to achieve and where you’re going to place elements of your page.
Don’t mistake your wireframe for a full visual mock up though. They’ll be no end visuals and nothing past basic design. Eduardo Esparza from Design and Function offers the best description when he says that wireframes should show how your site works, not how it will look.
Eduardo goes on to outline a great method for taking your wireframe from basic planning to preliminary layout and finally ending with filling in the detail (which can be seen below).
Structure’s a huge part of creating successful landing pages. It’s kind of the equivalent of setting a hypothesis and keeps the rest of your design optimization campaign on track.
Mapping out a structure helps walk your prospect through the stages of AIDA and take them through an experience which should end in them taking the action you want them to.
If your copy’s difficult to read then it’s completely worthless.
For most of us, typography optimization extends no further than choosing a popular, easy to read font. It’s a good start, but this oversimplification overlooks many of the small tweaks that can help squeeze those extra conversions we’re all after.
Without going into the complexities of typography (if you’d like the details read this killer piece by Ankit Oberoi over on KISSmetrics), I’ll explain how changing the way your font appears can help increase the effectiveness of your sales and landing pages.
It’s strange to think that the simple change of a font can alter the way we perceive certain information.
One of the primary ways you can take advantage of this is through similarity, or in this case, the absence thereof.
As CROs we’re always harping on about how to make your CTAs pop out from the page or how to bring enough attention to the key benefits. More often than not, the go-to solution is to create contrasting button colors or through the smart use of white space and bullet points.
These are good points, however, why are we getting overly complicated? We could just as easily be focusing on a simple method of drawing attention – a change of font.
If every element on your landing page is visually similar and written in the same font, surely the one sentence or CTA that differs from the norm is going to stick out like a sore thumb.
It’s a far more subtle method for bringing key elements into the foreground of your sales page and can work to great effect however, it’s not without its risks.
Despite my bashing simple font selection in the opening of this section, making the right choice is pretty important and can change the way prospects engage with your copy.
A study conducted by Errol Morris in The New York Times discovered that readers responded differently to the same text when it was presented in different fonts. Below is a screen cap of an infographic Neil Patel put together for Quicksprout on typography’s effect on perception.
If you want to be taken seriously and get prospects on your side, steer clear of Comic Sans (as if I needed to tell you that!) and Helvetica.
It’s a sad fact that the average attention span is now down to a shockingly low 8.5 seconds.
This incredibly short attention span has CROs chasing every possible idea in their search for smart ways to hook attention in under 10 seconds.
Sure there are lots of smart tactics to be employed, but at the base of it all you need your content to be easily scannable. If your prospect struggles to read what you’ve written, they won’t be able to identify key benefits and they’ll leave your site .
What’s the best way to make text easily readable? Choose an easy to scan font. Once again Neil Patel’s infographic comes to the rescue and highlights the font findings of a Usability News study conducted by Michael Bernard.
According to that study, Arial size 14 seems to be the smartest all round choice.
Something rarely considered in the selection of font is how it resonates with your audience.
Just as colors can elicit certain emotional responses, so too can fonts. Typography isn’t just a method for making your text readable, a good font choice can build upon your brand image and appeal to your target audience’s values.
It’s why you’ll find brands aimed at a younger audience using more vibrant, expressive fonts while brands aimed at an older or more professional audience will err on the side of tradition.
Choose a font that best overlaps the area where your brands personality meets your audience’s values for a stronger emotional connection and a solid lift in conversions.
The Color Conundrum
Experimenting with the color scheme of your site is one of the more enjoyable optimization tests to run. You’re not dealing with the complexities of CTA copy or pulling your hair out in the search for the perfect headline formula. No, playing around with the overall feel of your site is definitely more fun.
One of the go to color optimization clichés is that an orange CTA button will always convert better, because you know… Amazon uses it.
All of that’s rubbish in my opinion. There is no one color that converts at a higher rate across the board and you shouldn’t be relying on psychological trickery for conversion increase. As with every other element of A/B testing, color choice is about understanding what resonates with your particular audience and running proper tests to find the optimal variant.
Don’t test single colors to see what brings a higher conversion, look at combinations of colors. You’re not looking for combinations of pastel shades that give a more sophisticated or elegant feel to your site, you want to find the most complimentary contrast of colors.
Complimentary colors don’t help conversions, in fact they harm them. When key elements and CTAs are hard to identify your conversion rate is going to suffer. To increase conversions, you want to find contrasting colors to make convincing elements and CTAs jump off the page.
Piotr Koczorowski of Usability Tools conducted a great study on contrast vs. color. Piotr set out to map the clicking behavior of participants across two separate pages, one with complimentary colors, one with contrasting colors.
The results are pretty self-explanatory.
In the original test the primary CTA won by a very small margin. Compare this to the second test where 75% of users clicked that CTA and it’s clear to see that contrast is the clear winner when it comes to color selection.
To top it all off, around 68% of participants actually preferred the second test page. Looks as though picking contrasting colors isn’t only good for CTR but also helps improve design.
When choosing colors avoid making your selection based on wishy-washy psychological trickery or the belief that it will present a certain image. Choose a primary color scheme and build your persuasive elements around contrasting shades to help them stand out and gather more attention.
Content is always going to be king, however, good content only works when your site design is optimized to highlight its key elements.
Don’t make the mistake of designing your site purely by aesthetic standards. Designing for conversions requires a completely different approach to designing an aesthetically pleasing page.
Map out a wireframe based on the AIDA model, choose the right typography and select contrasting colors and you’ve nailed the three basic conversion design elements many sites overlook. And most importantly, TEST! Don’t use this article to design your final landing page or site. Use it to develop your testing hypothesis.
This is admittedly a brief overview of designing for conversions. I’d love to hear what you guys think are key design features or elements that should be considered when designing landing or sales pages.
Latest posts by Peter Boyle (see all)
- 10,000 Hours of Practice Won’t Increase Conversions (But This Will) - December 11, 2017
- Your Blog Design Is Bollocks (And How You’re Gonna Fix It) - October 16, 2017
- How Smart Brands Develop Brand Voices That Drive Revenue - August 3, 2017