All websites are strangers
Let’s say you’re walking down the street. Maybe you know where you’re going, maybe you are just out for a nice stroll in the park. All of a sudden a person appears and tries to grab your attention. They may be disheveled or in wingtips. They may quietly hold out their hand or try to stop you in your tracks. Either way, they are a stranger, they want something from you, and your guard is up.
This stranger is your website.
Imagine a physical manifestation of your homepage walked up to you and asked for $10. Would you be taking out your wallet in the first 15 seconds? Likely not.
Yet there are a lot of “best practices” out there that encourage website designers to skip the relationship part and jump right into bed with the user. But that’s just not how it works, unless you somehow feel attracted to this guy.
The long con
If your end goal is some sort of financial transaction then you should be engaged in the long con, not the short con. Offline, this can take days or weeks, but in the compressed attention span of the internet, this should take minutes, not seconds.
Your landing page is the first minute. The sacred “above the fold” portion of your site is the first 10 seconds. What type of strangers ask for money within 10 seconds of meeting you? What do they usually get? Pocket change, if they are lucky and look pitiful enough. Is your website or product a homeless panhandler that we should take pity on? Then why is your call to action above the fold?
There are plenty of sites that will tell you to always place that big button high on the page, stating,
Web users spend 80% of their browsing time looking at information above the fold of the page (the part of the page that displays without scrolling down). That’s why it’s so important that you put your call to action above the fold, so that visitors see it the moment they land on your page.
Well obviously the most eyeballs will see your content above the fold, but I’ll let you in on a little secret about all those people who didn’t bother to scroll. There were never your customers to begin with. If you can’t even inspire the visitor to contract a few muscles in their index finger, do you really think they would have been a paying customer?
Back to the stranger on the street. If they start talking to you, and you stop and perhaps subtlety nod your head, this is the equivalent of scrolling. You may not really want to know more, but you have some time, so why not. You have given the stranger permission to sell you just a little bit more.
This is why, if you are engaged in the long con (financial transaction), you should put your call to action at the end of your first page pitch, or even on page two. Having a qualifying call to action at the bottom of page one like “Find out more” or “How do I get started” which then leads to a second page with another sell is a good practice. The visitor has expressed their intent by clicking a link that says “How do I get started” and you then have an opportunity tailor your pitch to that frame of mind.
Beyond the form
If you put your signup call to action above the fold, or even in the header, it may indeed get more clicks. But raw clicks should not be your goal. You need them to travel all the way down the funnel to where they are typing in their credit card number and clicking submit.
You need the visitor to get beyond this point; the big stack of form fields. This is the first point of resistance. Clicking a “Start your free trial” button in the header takes a muscle twitch to accomplish, its low hanging fruit. But with the form, now I have to think. Now I am asked to give out my information and I have to evaluate whether I really want to do that or not.
If they clicked a button above the fold and are at a form, you can bet there will be a significant drop off in the funnel. You may 50% of people to click the button and then 10% of them to fill out the form for a 5% total conversion.
If your call to action is after your pitch, below the fold, or on the next page, you may only get 10% of the button clickers but then 50% to fill the form. It’s the same 5% conversion.
But here is the big difference. Those that came in with the long con, who have read two pages of sales copy and have taken a few direct actions to get to and fill out that form, they have been sold. They will perform better at every step in the funnel, from paying, to paying again, to telling their friends.
Those who clicked the signup button in the first 10 seconds, then filled out the form in the next 10 seconds, they have not been sold. They will continue to drop off at every point in the funnel, taking up your support and sales resources along the way.
True customers will come back
So there are two strangers on the street with clipboards. They want your information. The first says “Hi, can you sign this petition to save Wally!” and shoves a clipboard in your face. You don’t know who or what Wally is, but you sign the petition anyways so you can go about your business. You leave a fake email address because you have no idea who this person is. This stranger is your above the fold call to action and sign up. A week later the Save Wally folks email everyone to show up at a rally and it’s no surprise that only five of the five hundred names attend. This is the type of short con thinking that gets Wally killed, and your business too.
There is another stranger with a clip board. They say, “Hi, I’m trying to save Wally the Walrus from being euthanized. We are trying to spread awareness and this pamphlet will has more info on how you can help. Can I give you one?” The stranger has asked you to qualify yourself as a lead which you do by taking the pamphlet. Inside the is sales copy tailored to you, the interested party. The call to action is on second page of the pamphlet asking you to go to give your email to the volunteer you took the pamphlet from. This may sound absurd, asking the visitor walk back to the volunteer to give their email. But remember the little secret from before? If they can’t be bothered to walk back to the volunteer, they certainly won’t be showing up at any rally.
Don’t funnel customers into pain points without inertia
Website designers and marketers today often use a commercial fishing approach to their homepage. Blanketing it with call to actions to make sure no potential living thing can escape without seeing it. Ironically, this approach may cause you to lose potential customers. These visual dragnets funnel everyone quickly into a form or some other less-appealing state, like entering your credit card info. Some people, if not most people, are just going to want to get out of the net as soon as possible, usually by hitting the back button or the little ‘X’ in the corner. Even if the person was desperate for your product, if you haven’t sold them on it yet, they are going to want to swim away when you have backed them into a corner. The dragnet may indeed be effective in scooping up some customers, but it will also collect a lot of garbage that you will have to process. By building in more of a sales process you can give your hesitant visitors enough inertia to power through that form with no problems.
Your own stranger
So take a second look at your website. What type of stranger is it? Would you give your homepage $10 after 10 seconds? Is it asking to commit to a long term relationship before you have even gotten to know one another? Are your dragnets chasing away potential fish?
The bottom line is that if you have an ‘ask’ of any significance, you need to build a relationship with the visitor first. Asking the using to jump through some short hoops in the sales process is not bad UX, it’s competent salesmanship. Doing so will allow you to focus your energy into cultivating the valuable relationships you have and not trying to engage people who were never your customer to begin with. Your most interested customers are going to sink to the bottom, below the fold. That is where you should be waiting with an out stretched hand, stranger no more.
Patent Wars
I took a back seat and just art-directed. Alyssa George did a great job with my concept.
Wearable Tech
Going outside the box here in terms of design. I quite like the 60′s atomic day glow thing going on. Your standard bullet point infographic in a wacky design treatment.
Design Audit: BetterWorks.com
Paige is a pal, and BetterWorks is an interesting company. When I went to the BetterWorks site a month ago I couldn’t help but notice that it’s a mess and not reflecting the potential of the company. So I offered a design audit, gratis. Below is some of the nuts and bolts.
The numbers on the page refer to the comments below. While this is primarily a design audit, I do touch on marketing, branding and product. It’s all the same thing.
(click to see larger)
- “Contact Sales”? No one wants to talk to a sales person. Try “Questions” because people do want their questions answered by a live person, just not a sales person.
- Thoroughly uninspiring tag line. That’s WHAT Betterworks is. That doesn’t inspire decision-making. Tell them what BetterWorks BELIEVES… people will align themselves to that if they are potential customers.
- Way too early for the call to action button. Put yourself in a CEO’s or HR’s shoes. Instituting an employee reward program is a big decision. It’s going to take more than 15 words to “get me started”. You need to build a relationship with the potential customer first. I know conventional wisdom says to put the call to action above the fold, but consider the act of scrolling down a sales qualifier. If your user is too lazy to scroll, they won’t be committing to your program either. There are times when a quick call to action works, when the get-in (and get-out) process is fast and easy, like installing an analytics code snippet. It doesn’t work here.
- Who cares about your press? As a CEO, I know getting good press means I pay my press people well. It’s hardly a signal of quality. Sure it can be on the homepage, but there is no reason for it to be above the fold.
- Uninspiring image? Why waste the real estate. This image conveys something about a neighborhood or broadcasting or something.
- Who cares what’s new? I’m not even a customer yet. Once I am a customer then you can feed me more info about new features and articles from your blog. But right now, you have 20 seconds to get me to take the next action. Don’t waste it by making me process irrelevant information.
- Leading companies? Really… like who? As a decision maker I get marketed too 100 times a day. Unsubstantiated claims mean nothing. As a decision maker, one of my biggest fears is looking like a dumbass. I want to know that other people who have used BetterWorks do not look like dumbasses, they actually look like heroes.
- Ok… so there are your features. A few words each. Now I am supposed to “get started”? I don’t think so. You haven’t sold me yet. I am going to be looking for anything other link to click on besides “get started”.
- That is your social proof? That sounds like the most generic and boilerplate quote. Show me something like “BetterWorks rocks! Our employees have something awesome to brag about. And the 50% less turnover is a great cherry on top”.
- Feedback? Huh? Why would I want to leave feedback on your homepage. Save the feedback for users of the product. I don’t have feedback, I have questions, which I can answer with the ‘click for support’ chat bar below. It really should say “questions” since that’s all I really have.
My audit went on to cover other pages but you get the idea. The main conclusions are that BetterWorks was not appealing to people’s emotions. It was all “This is WHAT we do” and “This is WHAT you get”. I felt there was a real opportunity for BetterWorks to rebrand upstream and become an Employee Happiness platform, not a “perks and rewards” thing. That’s boring. As a CEO or HR, I can immediately get behind something called an “Employee Happiness platform”. I have employees, I want them to be happy. But a perks and rewards tool… that you need to sell me on.
Now criticism is one thing, but I wanted to take it a step further and show how I would make it better.
The un-bulleted version is here.
Also, there are lots in here regarding design and emotion and psychology. If you think something will have negligible impact, or is total bunk, that’s fine. But I think much of design (and decision-making) is processed in the subconscious brain.
(click the image for a new window)
- The only call to action on this page (besides login) is For Employers or For Employees. This is basically “more info”. My idea is that if you are an employer, you click the link and go to a page that sells the employer benefits. Higher retention, engagement, making you look like an awesome CEO hero. It would have quotes from other CEO’s etc. The Employee page would have benefits and features that employees love. While the CEO is the decision maker, selling the employee is a great tactic too. If 70% of your employees want BetterWorks… who are you to say no. Also, CEO’s will no-doubt click the Employee link too, and see all the happy and awesome employees loving BetterWorks. They want employees like that, thus, they want BetterWorks. Now it’s not a traditional call to action, in that it doesn’t say DO THIS or CLICK HERE. It’s a button, there is nothing else to do with it, and nowhere else to click. On the road to a sale, your actions should be Yield signs, so they feel they get there naturally, not the DO THIS! actions that force an unnatural change of direction.
- The Employee Happiness Platform. That just sounds awesome. How can I, as a CEO go wrong implementing that. The type weight has some subtle properties too. You can read the full sentence, The Employee Happiness Platform, or you can read by weight as The Happiness (Platform) or (The) Employee Platform. This should just enforce some core emotions about the product.
- Wow… I want my employees to be so happy and awesome they levitate. Never leave an opportunity for a well placed and visually striking image.
- What’s with the curves? This curve which is used all over is the up-and-to-the-right curve that you want to see in your business charts. It means good things when you see it. It’s also one half of a smile face, which is reinforced by the small divot in the black bar, which is the smile’s dimple. Yeah it’s subtle. The curve also pulls triple duty by pointing up to the phone number, your best chance to close a lead.
- So BetterWorks leads to a more engaged workforce with better retention, etc. That’s boring. It’s been tested and proven that success is the result of happiness, and not the other way around. This statement should set the tone of why happiness is important, if you were not already aware. Oh an there is a wink/smile emoticon that is on the outside of the blurb box.
- BetterWorks is on a mission. They have a higher calling. They have beliefs. That’s something a CEO can respect and get behind. This copy is also quite positive. It’s telling you that your employees are awesome. As a CEO, I will agree to that, or wish it were the case. I also believe that “every business, no matter the size, should have access to the perks and rewards of industry leaders.” Ok so now I have been in agreement twice, above the fold. That’s a good place to start.
- BetterWorks has these customer spotlight videos that are really well done and showcase how the customer uses the product and why it’s awesome. But these videos are buried in its blog. They are social proof gold! Instead BetterWorks uses confusing product videos to quickly cram as much info into the viewers 2 second attention span. If you show me a video of Elon Musk (a BetterWorks customer) extolling the benefits of BetterWorks…. game over, where is the buy now button. I suspect that replacing your lame product demo video with a social proof video will help most businesses.
- Ok now that I’ve led with my WHY statement, I can get more granular. I can start filling in the blanks of how BetterWorks…. works. I get that happiness is important. How does BetterWorks deliver that? By delivering “local perks at deep discounts in an easy to use platform”. Two other subtle things here. The winking emoticon is now a smiling emoticon. It is also internalized within the blurb. BetterWorks is bringing the happiness inside your business. Also you will notice another curve here on top of the blurb. There is a drop off at the same point it mentioned “deep discounts”. A subtle design reinforcement.
- Ok there is no diagram here, but there would be. I am honestly not sure how BetterWorks works but some people operate on different communication modalities and it helps for them to SEE how it works, and where they and their employees fit into the picture.
- These are your features. Enough info for me to make sense of it and get what’s going on. The ticket-like design channels the ‘white space’ so it flows across the features and then down to…
- Support! Support is depicted here as the bedrock of the features and benefits. This is as it should be for B2B because I don’t want to look like a dumbass decision maker so I want to know that BetterWorks will back me up, show me how to get the most of everything, and help me look like the awesome CEO I deserve to be. Look how big that smile emoticon is, it just grows and grows.
- Look at that tasty sandwich. Now I am hungry. Another problem that BetterWorks can solve. Catering is a big part of BetterWorks and throw in some creative copy there.. and… mmm look at that sandwich…
- Here is your more standard social proof in text form. Not everyone can listen to audio at work. This is tangible social proof in real-person-speak. You don’t need much here, as you can put more on the next two pages.
- Here you are, at the bottom of the page. You may have gotten here in 5 seconds or 50. Your subtle ‘whisper-to-action’ is awaiting for you to take the modest step of “finding out more”, not “getting started”. The next pages will have more specific copy, more social proof, and finally, a short form to submit. If they are not convinced at that point, they are likely not your customer to begin with. Do they not want their employees to be happy? You may also notice this is the same image as above…. but the enlightened employee has been replaced by the call to action buttons. You know that thing that happens when you look at a bright light and the image is ghosted in your eye for a while. Yeah… details, I’m all about ‘em.
I only spent one evening on this and made no assumptions about Paige implementing anything. But it seems he and BetterWorks are going through some big changes. I wish them the best and know that he is making the tough and smart choices that good entrepreneurs do.
I hope this case study was useful to others as well. I would say that 95% of companies have some terrible design going on and lots of missed opportunities.
