A while back, I wrote that copywriting is 20% UX design. (By the way, UX design is a fancy way of saying “layout for digital interfaces.)”
Benjamin Franklin knew this and co-wrote and designed a Declaration of Independence with – for his day – ample whitespace. His declaration was not just a transactional document; it was meant to be read all the way through and inspire action.
Fast-forward 250 years and UX/layout is still pivotal to inspiring action, or as we now call it: conversion rate optimization.
In this post, I touch on UX design patterns for homepages. These patterns can be grouped into a technique that has amusingly been referred to by email marketer Bryan Harris as “upside down homepage”, where he looks at every business homepage as a “squeeze page”, a page meant to win email list subscriptions.
Sometimes the goal is not email subscriptions, but appointments for sales calls. Same principles, either way.
Why turn your website upside down?
Quite simply: to remove distraction from the (one) call to action. The one, single call-to-action that lives above the fold on the homepage of your website.
Here’s why it’s called “upside down”: the footer becomes the header and vice-versa.
What is a header usually comprised of? A logo, a menu, sometimes a utility menu, usually at least 2 or 3 calls to action. Throw in the ubiquitous homepage slideshow, and your visitor is suddenly swamped and overwhelmed by choices. Here are some examples of how:
(A) not to do it
(B) heading in the right direction
(C, D ) excellent use of lead generation UX
(E) UX lead generation perfection.
Each of these examples takes a screen shot at the world’s most common browser window size (1366px x 768px for you UX geeks out there). As such it focuses on what is most likely to be seen, read and remembered when visiting these websites without scrolling.
In the 5 examples below, the likelihood of the page to convert is increasingly better optimized using the upside down homepage pattern.
Example A, Accenture: Not an upside home page, not at all conversion-optimized
Accenture making the classic mistake of not asking the homepage visitor to take action. What’s worse, they use a visual call-to-action convention, the arrow, without actually providing a link. Apparently, you find out about the “new” that Accenture is “applying” by scrolling down the page and choosing what to click on.
But careful, you might try to click on featured content but end up with either a category listing (Accenture Research, Consulting) or a share button.
Example B, IDEO: Moving in the right direction
IDEO very original approach to leadgen UX is much better than most design agencies, to be fair. The arrangement of the main menu is quite inventive and makes you think, “these people are bold; these people think differently”. But from a conversion optimization standpoint, this isn’t good work. There is a lone, weak call-to-action. (Their actual contact page gets an A+ from me, on the other hand; go have a look).
And yes, they are a well-known firm. But so is Apple, Microsoft, and Walmart – all of whom advertise. So IDEO has some work to do.
Each of the next three examples, in contrast, is a lead generation masterpiece. Let’s look at them all together.
Example C, Philip Morgan: No distractions, 1 clear call-to-action, powerful lead magnet
Example D, Backlinko: Show your face
Example E, Neil Patel: Perfection – no distractions and no form to fill out; just click the button.
Let’s also take a look at the footer of Neil Patel’s site so you can see the full scope of the upside down approach:
There is so much that is so well done in these last three examples. Each is an excellent illustration of the upside down homepage concept.
As you can see in the last one, the footer becomes the navigation area.
To be fair, this has long been a UX convention (large, replete footer sections); what makes it a true upside down UX approach is that the header no longer takes becomes the places where the visitor looks for navigational elements and utilities.
Philip Morgan’s site (C) is also a prime example of the upside down UX approach.
Of course, in Neil Patel’s, even the footer is hyper-optimized for conversion, with a dominant call-to-action repeating the call-to-action presented in the header area.
Both Neil Patel and Philip Morgan offer powerful and masterfully worded lead magnets, acting on a variety of buying triggers, with Philip’s offer very clearly spelling out free value.
Neil’s offer does less work to spell out value but that’s because he’s relatively famous in the world of digital marketing: to re-establish that credibility and implied value would be a waste of space.
Some other lead generation UX patterns
- There are a couple of other interesting trends at play in the three optimal examples, philipmorgan.com, backlinko.com and neilpatel.com.
- One is the presence of a high-quality photograph of a person (at least in the last two). And not just any person – the consultant providing services.
- Another is copywriting layout best practices: First a headline appeal, then details, then a call-to-action; and everything evenly and generously supported by whitespace.
- That copy is supported by a non-busy, monocolor background and plenty of whitespace.
I’ll caveat this by pointing out that lead generation may not be a strategic priority for some businesses. If your website is less a marketing tool than it is a product, you might not want to focus on lead generation at all. But in all of these examples, whether it’s a product or a service being offered, the website is most definitely a marketing tool.
Social Proof
Speaking of which, one more UX design pattern that support lead generation is the “proof bar” – the logos displayed just below the call-to-action. You’ll notice the same effect on NeilPatel.com and Backlinko.com, too. Either logos or (better choice, I think) testimonials accompanied by real people. Or both!
Brian Dean does this well. Neil Patel doesn’t do this (any longer at least; he used to) but I don’t honestly think he needs to because of his personal name brand recognition.
Solo consultants have it easier than agencies
For for most agencies, I think Neil Patel’s site is a little “too perfect” in terms of conversion optimization. That’s because business customers want and need to perform due diligence before hiring a consultant, or even a freelancer. NeilPatel.com represents the ideal UX design for an information marketer’s homepage. Let’s take a look at the home page of his marketing consultancy, Neil Patel Digital:
As you can see, the agency takes a more balanced approach to lead generation UX on the homepage. There are no social links, share links, utilities, and the link, but the standard main menu is still there – for now, at least. I expect the “home” and “contact” links to be removed at some point when the site is optimized. And that is about the right ratio for a digital agency’s above the fold UX: less than 5 links and 1 strong call-to-action.
One more note: IF your agency is “owner-based”, then an approach like Neil Patel’s makes perfect sense. If on the other hand you’re a partnership or rely heavily on employees as senior consultants or business development professionals, then you should present a staged group photo. Below are two perfect examples (with respect to the photo, the rest of the UX and copy have massive problems in both cases):
Agency Example A, Fannit
Agency Example B, CannaBrand
Both of these photos are comically posed but the latter has the advantage of being so costume-ish and ambient that it’s almost as if the agency is poking fun at itself and laughing along with you. At the same time, it’s a very high quality photo and shows seriousness of purpose. It also shows the real faces of actual people. I can’t recommend this approach highly enough to services or products agencies (and really, what’s the difference?)..
But your mileage may vary.
Which brings us to closing thoughts. First: to what extent should your company embrace the upside down homepage approach and the related UX approaches described in this article?
And here’s maybe a tougher question: if you only get to keep 2 links in your header, what are they?
fin