Make Web surfers your clients

Taking the guess work out of site design

Want to see the future of Real Estate tech?
Limited seating available for ICSF Hacker Connect, July 17

Your site design is not about you. It’s about your business problem.

My next few columns, leading up to the Real Estate Connect conference in San Francisco, are going to be slightly geeky and focused on some of the topics I want to discuss at the conference. I’m hoping to get everyone primed with questions and experiences so when we’re all in the same room we can move forward faster.

A few weeks back Inman News columnist Rob Hahn posted an article about design being more important than content. One of the thoughts in that article is that if too much attention is spent on search-engine optimization (SEO) and other tactics intended to increase your site reach and the site itself has poor design, you’re spinning your wheels. Rob’s right on this one. But how do you figure out what is "good design"? There’s a tool to help you with this: Google Website Optimizer.

Before I get too deep into this I should make sure everyone knows what I mean when I use the word "design." When you make something that is intended to solve a problem (business or otherwise), that’s design. When you make something that is intended to move an audience emotionally, be cool or express yourself, that’s fine art (unless expressing yourself is the problem you’re trying to solve).

The Web is littered with exceptionally ugly graphic design that is very functional at solving problems for their site owners. Craigslist, for example, is not much fun to look at and certainly doesn’t look cool. Having heard Craig speak a few times, I don’t think the site was made to help him express himself. It is, however, relatively easy for his site visitors to use for the quick, commodity-style interactions they want from a classifieds-style listing site. It’s probably worth mentioning that the newsprint classifieds that Craigslist has supplanted were for many years the cash-cow of newspapers and also received very little attention from staff art directors.

Another example of an ugly Web site that does well for its owner is GoDaddy. Perhaps the most obnoxious checkout process on the Web is on the GoDaddy store. Something like 15 steps to buy a domain name and on each step the way forward is always minimized and hard to find. Unlike Craigslist, which is merely plain but easy to use, GoDaddy is a cluttery mess and purposely difficult to use. But the upsells and add-ons that GoDaddy is pitching every step of the way make up for the potential lost sales.

Those two examples aside, there’s no reason why a well-designed site shouldn’t also look good. It’s not like making a Web site look good is mutually exclusive to making it solve a problem. If you’re in a commodity business like classifieds listings or domain-name reselling, perhaps there’s no real need to work on making something look good; if the value you bring to the consumer is the lowest price then maybe spending money on the art won’t help. But maybe not.

Every site is going to have different strategic objectives and problems to solve. So every site is going to need different designs. Even better, as audience needs change, your site design will need to change.

Before you can begin to improve your design (or content for that matter) you’ll need to know what the objective of your site is and how you measure it — what business problem are you solving. For many of you, this will be some kind of contact form submission, but it doesn’t have to be.

Let’s make a Web site solve a business problem for us (aka: improve a Web site design).

Objective: Discover which of two design options is more likely to convert site visitors into customers. …CONTINUED

As I mentioned earlier, we’re going to be using Google Website Optimizer. You’ll need a Google Analytics account to use Optimizer. But I bet you already have one. If not, get one. It’s free. I really like free, and I bet you do as well.

Google Website Optimizer is a testing tool. Don’t let that scare you off — you don’t have to worry about getting detention or anything. The basic workflow goes like this:

Identify the problem your new design will solve.
Identify a page as your test page, usually a landing page.
Come up with two different page designs to help move people towards the goal.
Show some of your site visitors version A of a page and show some other site visitors version B of a page.
Configure the test in Website Optimizer.
Optimizer tells you how many visitors to each version made it to the goal page.

Optimizer can get more complicated than this if you want it to. But for now, let’s keep it simple. We’ll break it down step by step.

Identify the problem your new design will solve
If the reason you want to change your design is because you read a blog post that said you should, then you get detention. Determine what you want your Web site to do better than it does today.

For example, you could use "I want more people to contact me so I can sell them something."

Identify a page as your test page
For your first test, I’d encourage you to make a landing page and connect it to a paid advertising campaign. This helps you control who is seeing the page and gives you a little more control over visitor quality. If you’re brave, go ahead and use the home page or another high-traffic page. The more traffic a page gets, the quicker your test will complete.

Come up with two different page designs to help move people towards the goal
This is where the fun begins. The greater the difference, the quicker you will identify which version performs better. Remember you can test the content as well as the graphic design. Try different headline variations, try different blocks of text, try with or without video or photography, try a big button or a text link, try a green button or blue button.

For example, you could test Version A (which includes that "welcome" message and photo of yourself that is on your existing home page) against Version B (which displays your listings search widget prominently). …CONTINUED

Once you’ve determined the content and design of your two variations, you’ll need to make the html code versions or work with your Web geek to get those made.

Configuring Website Optimizer
Choose an A/B experiment for your first time out. Website Optimizer will want to know what page you’re testing, what the different designs are and the conversion page. You’ve already done these if you’re working as we go along.

Give your experiment a useful name. "Welcome Message vs. Search Widget Test 1," for example. Once you get the hang of running optimizer tests, you won’t want to wade through names like "Test 1," "Test 2," etc.

Enter the page names and URLs of your variations. You can add as many variations as you like. But the more you add, the longer it will take for results to come in.

Enter your conversion page URL. The "thank you for contacting me" page is probably a good one. The plain-old contact page might be an even better conversion page for your test. I like to choose whatever the next action I want visitors to take from the test page.

Once all of this is done, you will need to put some code into your pages. Google asks you if you’re doing this yourself or if you want a link to send to your Web geek. Choose the option that fits your organization. After you’ve had these few lines of code added, Google will verify that the code is installed correctly.

The hard work is now complete. You’ll want to review to make sure you’ve entered everything as you want to. The last step will be to choose how much of your traffic sees the test. If you’re running your test on a landing page for the purpose of learning which of the versions converts more visitors into leads, go ahead and send all of the page traffic through the test. If you’re running it on your homepage, maybe you don’t want to run it on everyone. The more visitors you send through the test, the quicker you’ll get results.

As the test runs you will be able to see the results in Optimizer. If one of the variations outperforms the other by delivering more visitors to your goal page, you’ll see it in the charts. If the test runs for a long time but doesn’t identify a winner, then it’s six of one-half dozen the other: try a more extreme variation.

The thing that’s great about test-driven design like this is that you no longer have to argue with anyone about whether the headline should be bigger or smaller or which picture to use. Just run a test on it. You think your logo should be bigger and the designer thinks it shouldn’t be bigger? Run a test and see if it matters for solving your business problem. You think that "Welcome" message is really important? Test it. Someone said video really closes the deal? Test it.

Good luck! Use the comments for questions or ask me about this tool in person at Connect.

Gahlord Dewald is the president and janitor of Thoughtfaucet, a strategic creative services company in Burlington, Vt. He’s a frequent speaker on applying analytics and data to creative marketing endeavors. He will speak during a Bloggers Connect workshop at the upcoming Real Estate Connect conference in San Francisco, which runs from Aug. 5-7.

***

What’s your opinion? Leave your comments below or send a letter to the editor.