The unease you felt is due to the fact that the function of a comma is such that, in the headline above, it implies that I’m addressing someone. Like, “Bill, you’re doing it wrong.” Or, “Gentlemen, you’re using that punctuation mark incorrectly.” Only, in this case, “Commas”. Which is weird. Hence the twinge of unease. Because you know from your long exposure to the internet that “you’re doing it wrong” is kind of a meme, and is a phrase always preceded by the thing being done wrong. It’s not an address at all. Rather, it’s like an introduction.

The punctuation mark used for an introduction is not a comma. It’s a colon: like this. You could also use an em-dash—as so. Or a semicolon if you’re feeling adventurous; though don’t mention it to Naomi Dunford. Just not a comma. Never a comma.

So what? It’s just a comma!

Why do I even bring this up? No one likes a Grammar Nazi. No one likes any kind of Nazi really.

I bring it up because I want to draw your attention to a general principle which it aptly demonstrates. I’m somewhat painfully aware that the misuse of the comma—its use, that is, in place of correct punctuation in many instances—is a wide-spread and very common issue in copy on the web. It’s ubiquitous in blog posts, articles…and yes, on landing pages. Chances are that if you have a website, you’ve abused a comma at least once. The same can be said of apostrophes (particularly in the distinction between “it’s” and “its”).

The principle is that a lot of people, having attended school for more than four years, have a sufficient grasp of English grammar to recognize (if not consciously note) little mistakes like this. Remember the internal hiccup you felt when you read the title of this article. When people see things that they know aren’t quite right—even when those things are widespread and commonly accepted—they get an uneasy feeling. It’s the same feeling you get when something you want to buy has its packaging opened. It’s not really important, right…but it makes you pause. It’s the same feeling you get when there’s a water stain on your knife at a restaurant. It doesn’t mean anything, really; but it subconsciously tarnishes your perception of the place and makes you question its cleanliness and quality. The unintentional introduction of imperfection, even if it isn’t consciously noticed by your audience, still evokes a negative emotional reaction. And then the emotional parts of their minds make the rational parts wonder: is this company or service or product as good as it claims?

The moral of the story is that I’m not teaching you grammar here. This isn’t a lesson on using commas. It’s a lesson in the importance of taking the time to ensure that small mistakes don’t negatively impact how people perceive you. If quality is part of what you compete on, you can’t afford that. It isn’t just copywriters with anal-compulsive nitpicking disorder who notice abused commas, and it isn’t just designers with sharp eyes who notice misplaced pixels. They’re the ones who can describe to you what is technically wrong. But just about anyone who’s paying attention can tell you they have a gut feeling that something ain’t quite right.

A clear objective

I do a lot of consulting on many different kinds of websites, to many different sorts of people. Of these, a sizable number share a common problem: They have a website which is getting modest traffic; maybe even a nice low bounce rate—but it’s just ticking over, providing an online presence and not much else. They want to know how to make it more successful.

Well, the thing about success is that it’s simply a matter of achieving an objective. That’s the very definition of what success is. So if either you or your website aren’t clear on what your objective is, then success becomes basically impossible. Shooting in the dark is a sure-fire way to fail as a business online.

Since success online is so often defined in terms of conversions, let me make an observation: When people talk about increasing “conversions”, they often assume this means getting users to pay for a product. But it can mean getting them to sign up for a newsletter, or subscribe to an RSS feed; or prompting them to wade into a discussion or offer feedback on something—or even just planting a seed in their minds so that one day they come back to you for something when they need it. You can’t know what “conversion” means for your website until you know what you’re trying to achieve with it. “Conversion” is whatever your site’s objective says it is.

Clarifying your site’s objective in your own mind

It’s fairly rare for people to have no idea what their site is for. But it’s equally rare for them to have a really good idea of it. Despite the fact that building and maintaining a website can be quite the investment, a lot of organizations do it just because they think they have to have one. Then they feel vaguely uncomfortable about its existence, because it’s not actively justifying its existence in any obvious way. They have a general sense of how it should be doing this—but they’ve never quite put it down on paper.

This is easily fixed. Put it down on paper! Either the internet is important for your business model, or it ain’t. If it ain’t, cut your losses and stop paying hosting and domain registration bills every year. But if it is (and let’s face it, it probably is), then you have a clear place to start for determining your site’s objective—or objectives, since most sites have more than one.

Get specific by writing down objectives

Mostly, the problem people face is not a complete confusion or bewilderment about the point of their site. On the contrary, it’s that they have just enough understanding that they’ve never realized that there’re no clearly-defined goals. It’s this lack of clearly defined reasons for a site’s existence which prevents it from being a strong asset to an organization. Listing the reasons (preferably in writing, so that you can revise and refine them) is all that’s needed to establish a clear set of objectives to be met—which can then be immediately compared to the current performance of the site and give you a good idea of where to start making changes.

Clarifying your site’s objectives in its users’ minds

An obvious by-product of a site which was built with no clear objectives in mind is that no clear objectives are discernible to its users. This is why so many sites are missing three key design elements:–

1. a compelling headline,
2. engrossing copy,
3. and a clear call to action.

If a site omits these, it’s going to struggle. And if you’re considering hiring a web designer whose own site omits these, look elsewhere. You can have the most stunning visual style in the world; the slickest effects; the most user-friendly forms and who knows what else—but with the hammer falling empty on those first three chambers, your site isn’t going to be hitting anything.

In your defense, the first thing that any web designer who isn’t a complete gibbon will say, when you ask for a website (before he even thinks about giving you a price range or proposal), is: what’s it for? And then, once he knows, he’ll make sure the site meets your goals. Hence, when you fill in a project brief for me, you’ll find that the site’s objectives are stressed as key to the project outcome. And it’s why all my proposals start with a clearly-defined objective to be achieved. Because I’m not a gibbon.

Treating your site like any other part of your business

The moral of this increasingly lengthy diatribe (and I am wont to give a moral) is: your organization’s resources aren’t magically excluded from your business model just because they exist in the ether.

A website is like a billboard, a brochure, a shop, a whitepages ad, an answering service and a press release all rolled into one. You expect to pay through the nose for these things in real life, because you expect them to all produce a sizable return on investment—which you map out with careful research and clearly-stated goals. It’s time to start thinking that way on the web.

For the great majority of people asking this question, improving conversions comes down to doing one awfully simple, awfully obvious, awfully overlooked thing. Yes—if you’re like 90% of the people I consult to, you should get your best boot out now, coz it’s time to kick yourself. The secret sauce with which you have forgotten to baptize your website is sitting in a big red bottle marked “Get Conversions”, in the middle of the center shelf your pantry, right at the front. You couldn’t miss it. You probably just didn’t notice it because you were too busy rummaging around at the back where all the spices are, trying to figure out what would make the perfect blend to entice people in.

That’s a little metaphor there. I’ll let you work it out.

Sorry, is the suspense too much for you? Right, here it is then. The cunning secret to instantly getting more conversions is…

…ask for them.

That’s right. Ask for them. I see the blank, deer-like expression on your face. Let me raise you an analogy:–

You know those annoying charity types who stand on street-corners or outside mall entrances and harangue you for signatures or money or whatever as you’re walking by? How many signatures or donations do you reckon they’d get just standing there, waiting for people to come up to them and ask what to give? Yeah, I didn’t think so either.

But that’s the average website. And I do mean the average. The majority of websites rely on this approach—so chances are yours does too. It just sits there on the internet, letting people know you exist. Well, their knowing you exist isn’t enough to make them do anything, is it now?

Visual Appeal

Returning to our street-corner haranguer, let’s now imagine she’s smoking hot and snappily-dressed (I’m gonna say “she” because I just feel more comfortable with that, you know? If you want it to be a “he”, though, don’t let me stop you). If you’re impressed by looks—and let’s face it, everyone is a little bit, weaklings that we are—maybe you’d talk to her and offer a signature or a small donation.

So that approach might get a bit of success. If your website is really damned sexy, I’m sure you’ll get more people converting than if it looks like, you know, this. But it’s still not nearly enough.

Picking the Right Words

Now let’s say our charity girl is not only damned good-looking, but also a pretty smooth orator. Along with the sex appeal, she’s making a great pitch; strong and loud so everyone can hear. She goes through all the benefits of donating, speaks directly to people’s needs and desires—but then, instead of finishing by asking them to actually donate, she just trails off into silence. Oh sure, she’ll get people signing up. But not that many.

Same with a website that doesn’t directly ask people to convert. Sure, it implies they should—and it may even make it really obvious. The landing page might make you want to convert, and the navigation and commitment page might make it really easy. But implying something won’t get the conversions that saying it outright will.

Using a Call to Action

Unless you’ve been living in the dankness of a cave for most of your life, you know what charity people on street corners actually do. When you see one coming up ahead, you think, “Oh no, I hope she doesn’t talk to me. She’s going to ask me to do something. And I hate saying no! I mean, what if she bamboozles me with her feminine wiles?” And you cross the road or try to hide behind that portly guy with the hat, or use the old couple ahead of you as a decoy because you figure they’ll make a better mark.

You try to avoid her because you know that asking people for things is effective. As a race, we’re all just really bad at saying no. It ain’t natural to say no. We’re also really good at following instructions which are powerfully worded, and placed in contexts which demonstrate their value. It could be why we aren’t extinct yet.

The moral of the story is: if you want a user on your website to do something, tell him. Don’t pussyfoot around hoping he’ll get the hint. Don’t passive-aggressively suggest or intimate or imply what you’d like him to do. Just tell him.

This is also Good User Interaction

As a little post-script, let me add: unlike on the street, users on the web like to be told what to do. Why? Because otherwise they have to figure it out themselves. Users hate figuring stuff out by themselves. They just don’t have time for that rubbish. They’d rather go to your competitors’ website instead.

So far from being annoying and pushy and undesirable, a strong call to action is actually helpful. It clarifies what you expect a user to do on your site, and allows him to make a quicker decision as to whether he’s going to stick around. If he is going to stick around, it then guides him immediately into doing what you’d most like him to do. And if he ain’t planning to become your next customer, what the hey—you were never going to snare him by being ambiguous anyway.

They’re not iconic because George Lucas is a great writer (that’d be crazy). They’re iconic because this phrase is already deeply ingrained in your subconscious. You may not have realized, but it’s just a variant on an introduction you became intimately familiar with as a child: “Once upon a time, in a faraway land…” The galaxy far far away is more grown up, because it’s more scientific, but it’s the same basic motif.

Thus, when you read the opening caption of Star Wars, other deeply-ingrained motifs stir in your subconscious. You have the un-thought sense that what follows will be a tale of fantasy and adventure. You’re unknowingly primed to expect a plucky hero taking on a quest to save a beautiful and possibly acerbic princess from an evil overlord, while aided by a swashbuckling warrior or an octogenarian sage who has difficulty shaving. As you progressively discover these elements in Star Wars, you grasp what’s going on, and identify with it, in a deeper way than a mere understanding of the relationship between the characters and plot. That’s why the original Star Wars movies developed a cult following…and why the recent prequels did not.

Web-design as movie-making

What does this have to do with designing websites? Everything. Imagine your site is a movie. It’s not enough to merely create a plot your reader can follow, characters he understands, or special effects that’ll dazzle him. You have to create an experience that he’ll become involved in on a more than merely conscious level. He has to “get it” without thinking about it.

He should get an instinctive sense of what the site is for, what to do, how to go about doing it, and whether he’s even among the intended audience—as soon as it loads, and probably even before he’s read anything at all. How? In many ways. Here are some examples, starting with the simple stuff:–

By the colors, textures and images presented, and the mood or impressions they evoke:

We know Darth Vader is evil from the moment he steps through the smoking landing hatch, because he wears a great black flowing robe. Colors represent ideas or feelings on the web just as much as in film. Red is usually passionate or urgent. Blue is typically calm or technical.

By the size and positions of the page elements:

When the rebel ship flies overhead at the beginning of Star Wars, it looks small—but we have no idea how small until the Star Destroyer looms into view. We just keep seeing more of it…and more…and more—until it’s revealed to be massive. In this one outstanding shot, we instinctively grasp everything that we’ll later be told about the relationship between the rebels and the Empire. Similarly, the sizes and positions of elements on a web-page tell a story about their relationships.

By the lines, curves and shapes on the page, and their strengths and directions:

The angular lines of the Star Destroyer, towering above us as it chases the rebel ship toward the planet, implies a position of power. The planet’s curve is comforting, but its placement barely in the shot, and the hard, straight edges of the dominantly superimposed starship tell us not to get our hopes up. On a website, lines can be used to emphasize or de-emphasize content, and create various senses of personality.

By the negative space, or lack thereof, between the elements:

The Millennium Falcon is cramped inside, with narrow corridors and tight cockpits. The Empire’s starships, by contrast, enjoy vast, echoing decks and spacious bridges. The one suggests a labor of love, but tacked together on a shoestring budget; the other suggests the impersonal machinations of industry, and all the power and resources that accompany it. Compare a bargain basement website to a good luxury brand, and you’ll typically notice a similar trend. We perceive the ability to “waste” space as implying importance and extravagance, power and sophistication.

By the information the designer has chosen to present, and to not present:

You probably never consciously noted that you don’t see the faces of any of the storm-troopers. Ever. Or that, in comparison to these inhuman automatons, there’s a lot of emphasis on minor characters in the Rebel Alliance. And you probably never consciously considered that the only time you see Vader’s face is when he repents of his evil, and regains his humanity. In the same way, you probably don’t consciously notice the effect that omitting a call to action or a headline has on a site; or of including a prominent search box or high quality photograph. But the effect is there.

Finally, by the story it tells:

Star Wars is so successful because it plays upon classic archetypes which are intimately familiar to Western (and possibly Eastern) audiences. It has, firstly, character archetypes—

• the brave young hero (Luke), and the beautiful princess (Leia);
• the charismatic outlaw (Han), and the wise mentor (Obiwan);
• the dark lord (Vader), and the evil wizard (the Emperor);
• the crazy hermit (Yoda*), and the effeminate sidekick everyone loves to hate (C3PO…okay, I made that one up)

—and, secondly, plot archetypes—

• the coming of age story,
• the unlikely romance,
• the victory against an overwhelming enemy,
• the redemption of an apparently terminally evil bastard

—all that good stuff. Plus it has magic and swords. In space.

Mastering the power of the Force

A powerful design will play off as many of these kinds of motifs as it can. From something as basic as color theory to something as complex as literary archetypes, the visual style, user interaction, information architecture, and copy of a website rely for their effectiveness on motifs and psychology that permeate our culture. Understanding why they work in one medium will help you, as a designer, to implement them in another. Knowing what appeals to a particular audience in another context will help you to appeal to that audience on the web.

Don’t just stop at Star Wars. Look for any popular movies, and try to work out what it is about them that speaks to so many people (or, look at unpopular movies by popular directors, and analyze why they didn’t do well). Lord of the Rings seems like an unlikely box office hit given the negative, nerdy associations of, say, the similar-themed game Dungeons & Dragons. Why? Or Titanic—oh wait, that was Leonardo DiCaprio and raging teenage hormones. But there must be something behind a movie as drawn out as The Godfather being in second spot on imdb’s top 250. And The Shawshank Redemption is number one—can you guess why from the title?

All these movies contain elements—important, powerful elements—which can help you to create important, powerful designs. Become proficient at identifying these elements, and you’ll start to become more proficient at producing designs that nail their objectives and command substantial responses. If you need help, just do what I did: marry a literature and screen & media major.

* No, really, have you seen Star Wars recently? I have. That guy breathed in way too much swamp gas.

Every second freelancer’s website seems to start like this. Well, all right—seven in twenty. A big, prominent welcome message that looks to be cloned off a master copy and then edited slightly to fit. I’m starting to develop a twitch whenever I find a new site like this. Why?

It’s just bad communication

Before you all start howling and whinging, a written communicator can still be a great visual communicator. Alexey Chernishov sure is. (It’s particularly heinous of me to pick on him since English isn’t his first language, but this really highlights my point, so pipe down in the peanut gallery.) The websites of most freelance designers all have the same objective, and it isn’t to showcase their designs. It’s to sell their services.

So what, exactly, is wrong with introductory text like this?

Here are three damned good reasons that no freelancer should be using an affable welcome blurb:–

1. It’s a purple cow killer

A whatnow? Your purple cow is what makes you unique. It’s what sets you apart. It’s your winning difference, as Brian Clark calls it in Authority Rules; or your unique selling point, as Naomi Dunford refers to it in ‘Marketing School, Day One’. I, as a client, probably know what I want to buy when I visit your website. I want to buy the services of a designer. But maybe I need convincing to pony up. Either way, I definitely need convincing to pony up to you. So, why should I?

Well, there’s no reason I can see from my first impression of your website—that’s for sure. You’ve gone and made yourself look as generic and uninteresting as you could have. You might as well have taken your purple cow out back and put a .22 slug through her head. Now instead of “wow, I can stop searching, this fellow is my man” (yes, or woman, don’t get up in arms), I have an impression of “meh, this one isn’t really any different to the others.” So rather than draw me in and convince me that my initial “yessss, found it” impression is right, the rest of your website has to work extra hard just to convince me that my initial “meh” reaction was wrong—just so as I’ll stick around long enough to give you a chance.

The moral of the story? Why would you put up a giant message about yourself, when you can put up a giant message about your purple cow?

2. It’s happy talk

As Redd Horrocks puts it, quoting from usability expert Steve Krug’s Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition:–

Happy talk is like small talk—content free, basically just a way to be sociable. But most Web users don’t have time for small talk; they want to get right to the beef. You can—and should—eliminate as much happy talk as possible.

The moral of the story: are you made of beef? Of course not. Your purple cow is. But I hear you whinging already. “Bnoooooonn, who I am is important, because I’m a freeeelaaancceeeerrr.” Oh really? That leads me into my third point…

3. No one cares about you

This is probably going to be a bit hard to hear, seeing as how we’re talking about your very own, personal, lovingly-developed website into which you’ve poured the very essence of your soul and the very greatest of your design talents…but you’re just going to have to man up and take it on the jaw. If you don’t want to take it from me, take it from James Chartrand:–

Don’t flatter your own ego by penning boastful descriptions of you and your business. Show people you’re listening instead.

What’s the one thing that your website should be doing above everything else? It should be engaging the question foremost in your prospective client’s mind. What is that question? I have no idea, but you probably do. It could be something like, “Is hiring a designer really worth it?” Or, “Since I’m going to hire a designer, why should I hire this one?” For my own part, I target both those questions: I explain why design (and copywriting) is important, and why I’m the best choice—my designs could blow someone’s head clean off. (Note: not literally true.)

What your prospective client almost certainly is not asking, however, is “Who does this website belong to, and how would he describe himself?” I mean, blimey, that’s about the last question I care about when I go to a website. In the rare event that I am looking to find out more about the person who runs it, I neither expect nor want some pithy one-liner on the landing page. I’ll go to the about page to find out about someone. I mean, right?

The moral is that people are interested in themselves. That’s why you wrote that silly blurb to begin with, eh? So be interesting to the people you want buying your services.

Is your ego more important than getting work?

All the space you’re wasting telling people about you is space not devoted to showing that you understand and can help them. Again, I’ll use myself as an example of how to do it right, because I’m modest that way. What’s the first thing you see when you come to my homepage? A big ol’ heading about me—what? No? It’s about you? That’s right, as in, you my prospective client, to the service of whom this webpage is dedicated. What follows is some text (but not too much) explaining the heading in a way that leads persuasively into a big, bright, exciting call to action. A topic for another time.

So there you have it. Three outstanding reasons to lose your insipid ego-type, and replace it with a powerful headline and commanding copy. Go now.

• Research
• Proofread
• Get to the point
• Write for the right audience
• Avoid common mistakes

If you’re serious about writing online—and if you’re a designer on the web, you should be—then you need to be following these rules religiously. Otherwise you’ll just look like an incompetent gibbon, right? Having said that, the list is by no means exhaustive, so I’m going to add five of my own rules for how to step up to the task, smack it between the eyes before it knows what’s coming, and have it on the ground in an arm-lock begging for mercy in three seconds flat. Here we go:–

1. Half-cocked is half-assed
2. Read your work aloud
3. Less is more
4. Be yourself
5. Spend time on a headline

1
Half-cocked is half-assed

Sometimes I read something which provokes a strong inclination to respond. I immediately start writing up a heated/enthusiastic/insightful/awesome response. Then, about halfway through, I start to lose momentum. The initial energy which was released when I read the article has been spent, and I’m left running uphill on my own steam.

At this point, I typically pause and re-read what I’ve written so far. By re-reading, I’m re-considering the whole post. Usually, at this point I realize my initial reaction was a flash in the pan, and I haven’t actually got enough to say—one way or another—to make it worth saying.

Unfortunately, 98% of the denizens of the Tubes don’t do us this favor. Once their initial conviction wears off, they figure they might as well finish anyway. So they do. And it’s rubbish. Half-cocked, half-assed drivel.

The moral of the story is plan your writing. A spontaneously-produced article—rather like a spontaneously-produced theory, business strategy, meal, or bodily fluid—will typically be either brilliant, or an unsightly and embarrassing waste. Brilliance is rather rare.

2
Read your work aloud

If you haven’t done this before, you’ll probably be surprised at how much it helps. Careful now—I’m not talking about reciting the words on-screen in the typical, sing-song monotone you picked up in primary school when “See the horse run. See Jack shoot” was hard reading. I mean that you should pretend like the article you’re writing is something you’re telling someone.

You aren’t reading a script. You’re telling a prospective client, or a colleague, or a friend about something which genuinely interests both of you. You have feelings and opinions, and you’re an expert, and they want to listen. When you read an article aloud, you can tell if it’s interesting or not. You can sense if a turn of phrase works, or if it’s just tacky. You can feel where the words you’ve written are clumsy and make you stumble, or where they’re smooth and draw you along.

The moral of the story: if your article doesn’t read aloud in a way which sounds natural, and which would keep the attention of someone already interested in the topic, I’m sorry but you’re boring. Cricket-chirpingly, tumbleweed-rollingly dreary. How can you possibly be so dull if you actually care about the subject? (For the answer, see point 4). Write it again, jackass. And then read it aloud again.

3
Less is more

It’s a big cliche because it’s true. Every single sentence, every single word, every single glyph on the screen which doesn’t actually need to be there is one extra moment of your reader’s time you just wasted. Waste enough of his time, and he will stamp his feet, click his heels together, and frolic away like a merry lamb into the fruitful Google Forest. He won’t come back.

Riding the cliche train all the way to the station:– you know an article is finished when there’s nothing more you can take away. That’s why you proofread. That’s why you edit. Make every sentence and every word count. If a word doesn’t have to be there, cut it out. If you can replace it with a simpler word, do it. Every sentence should do two things: firstly, it should convey some necessary meaning; secondly, it should make your reader want to read the sentence after it. William Strunk was right:–

A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.

The moral: your flowery prose, poetic turns of phrase, and constant repetition probably sound great if you’re you. If you’re everybody else, though, it’s just twigs and leaves obscuring the trunk. Stop writing to impress yourself, and start writing to impress the people you want reading your stuff.

4
Be yourself

Much like in a job interview, uncertainty leads to anxiety, anxiety leads to fear, fear leads to hate, hate leads to—no, sorry, that’s something else. Fear leads to the stench of failure that a reader, like any other carnivore, can detect at a thousand paces with the wind going in the wrong direction.

Why would you be uncertain? Not because you don’t know the topic, since you aren’t going off all half-cocked, are you? If your topic was P90 submachineguns, you’d be like a colonel in the Navy Seals or something. So what is it? Obviously, the problem is that you feel like a phony when you write the way you think you’re meant to. Your article is like a cardboard cracker. It looks edible, but when you try to eat it, it tastes oddly bland and sucks the moisture right out of your mouth.

Who told you that you were supposed to write like a generic sixties business executive? Haven’t you read anything by Naomi Dunford?

The moral? Stop trying to present yourself how you think people expect, and present yourself. You’re not a drone, and no one wants to read anything written by a drone.

5
Spend time on the headline

You’ve lovingly crafted your article letter by letter. It’s taken you the better part of a week. And your mom thinks it’s awesome. Great, kid. Now don’t get cocky. Take the time you spent writing the article, divide it in half, and spend it working out a headline.

“But Bnooon, that’s daaaaaaaays.”

That’s right, days. Now get cracking. Remember, a headline needs the four Us; it has to:–

1. urgently compel your reader onward, by implying in an
2. ultra-specific way how
3. useful the article will be, and how
4. unique its benefits.

And unless you’re a copywriting pro, or you just ain’t serious, you cannot leave this page without clicking through to Copyblogger’s excellent, to-the-point series on how to write magnetic headlines.

The moral? What, did you think people would just magically know your article is fantastic? Maybe it’s so great that all the words will just simultaneously slam into their eyeballs—bam!—and they’ll absorb the whole thing via osmosis of the optic nerve? What, are you crazy? If you’re writing articles, you need to know that, of all the people who read your headline, for 80% of them that’s all they read. Unless, that is, you’re putting in the long hours molding that headline into a thieving scoundrel who sits at the top of your article and grabs people as they pass by and gives them such a fright that they read the whole thing out of pure, animal self-preservation. So get to it.

I fired up www.digitalrecovery.co.nz to check the damage, and was presented with a cruel joke masquerading as a website—an eyesore obviously created by an engineer, using an out-of-the-box template from an outdated do-it-yourself web program:

It rather failed to convey the expert image which Digital Recovery rightly deserves—a fact painfully underscored by Google’s description: Data recovery in new zeaLAND This web site was made with a Trial Version… [sic]

1
Initial Analysis

Visually, the site was bland. The information architecture was confusing. Important links were broken. And the stock photos of hard drives and happy people almost made it a parody of itself.

Investigating the markup revealed a Pad Thai of incoherent tags, along with a highly suspect but entertaining “search engine optimization” system involving hundreds of invisible keywords—including adult ones. For what reason? I can only speculate. Perhaps the author hypothesized that visitors looking for naughty pictures—visitors, one assumes, utterly disinterested in data recovery—might at least, in an effort to cut their losses, call the 0800 number? The reasoning escaped me.

The final straw was the obnoxious clipart man with pink hair inviting customers to call. James expressed vehement contempt bordering on psychotic rage towards this character. Clearly, something had to be done. The site made him ashamed. He couldn’t sleep at night. When customers asked for his URL, he would pretend to suddenly see an old acquaintance in the distance. Sometimes he would simply break down in tears. Very embarrassing.

What he needed was a complete rebranding for Digital Recovery.

This job called for a professional. Someone who could face the terrors of sorting through 30 redundant pages of html goulash created with a trial version of Site Studio 6, figure out what to keep, divine some logical order to it all, rewrite it to be believable and compelling, and then put it all back together in a way that would sear itself exquisitely and unforgettably into people’s retinas without making their eyes bleed. This job called for an Information Highwayman.

2
Inspiration

Most designers will tell you to start with research. That’s a good idea. But for someone as uniquely talented as I am, the design process usually starts with a flash of brilliance.

Here, it was in seeing data recovery as summoning back information from beyond the grave. Still in the fling-it-at-the-wall stage, I threw caution to the winds and pitched an outrageously unorthodox design with a medieval blackletter grunge motif—playing off the idea of digital necromancy:

James’ response was positive, though guarded:

I like…it is nice and simple and clear, and I think it will hold peoples’ attention. Maybe we could remove the “This black magic is not cheap” part… I also don’t want to give people the impression that we sacrifice goats to the Hard-drive God.

3
Research

He had a point, of course. I favor diving into the deep end where the best ideas lie submerged, grabbing a few, and then swimming back to reality with them. Since I already knew James well I wasn’t afraid to go a little mad to begin with. Having taken that plunge, we now started working through the design together, developing a more refined idea of what elements to focus on and what direction to take it in. We both agreed that although the necromancy idea was a great one, it wasn’t going to work as such. Usability tests indicated that people just don’t know what it is. Actually, they thought it was necrophilia. Not the look we were going for at all.

Researching the data recovery market also revealed some interesting trends. Blue, white and bland emerged as the predominant colors on competitors’ websites. I said to James,

I’ve become quite convinced that you need to set yourself apart as a personable, smaller company. DTI and datarecovery.co.nz [two of his main competitors] both have very bland, trying-too-hard-to-be-corporate websites. You need to differentiate yourself. One of the particular ways you can do that is by not trying to pretend that you’re a big corporate entity with a large number of employees. People, and especially New Zealanders, don’t even trust those sorts of entities, so why a data recovery business would choose that image I have no idea. Kiwis trust no-bullshit home businesses who get the job done and have a real person running the show who you can talk to directly and isn’t afraid to put himself out there.

James agreed. We set about creating a more calculated persona than the somewhat outrageous one implicit in my initial pitch. We wanted to find a happy medium between “stuffy corporate” and “goths who moonlight on data recovery when not playing D&D and listening to grunge”.

4
Playing with the Branding Iron

Blue and white are very recognizable colors in the IT sector. Look at Microsoft’s and IBM’s websites for a couple of obvious exemplars. Indeed, as Paul Boag observes, almost every sector has a design style. Boag suggests three primary reasons, which are all clearly in play in the IT sector, and the New Zealand digital recovery niche in particular: laziness, fear, and short-sightedness.

Finding a brand direction

James and I wanted to avoid all three of these vices in rebranding his company. Rather than following the de facto style established by the competition; rather than succumb to the concern that web users would be shocked—shocked I say—at a site which defied being bland and boxy; rather than studiously avoid taking any inspiration from non-IT related designs…well, we wanted to do to the opposite.

I pulled off my waistcoat, unbuttoned my collar, and broke out the GIMP. Creating a mockup of the new site was still a long way off—at this point I just wanted to work out a look and feel for Digital Recovery’s visual identity.

Throwing caution to the winds, I daringly inverted the traditional blue-on-white scheme—thus retaining the core ingedients of the familiar IT look, without being constrained by them. Emboldened by my own subversive cunning, I went a little crazy and added some fantastic lighting effects to get out of the mind-numbing “flat box” look—before performing a coup de grâce or possibly a coup d’état by adding depth and realism with a subtle texture, drawing out the colors:

Developing the logo

James was very pleased with the direction I was taking, but we now both agreed that the “placeholder” logo needed to be developed into something which better matched the rest of the design. We both liked the “dR” ligature, but the gothic look didn’t mesh with the brand we were creating. Subsequently, I whipped up a simple sans-serif version in the same vein, and presented James with a couple of variants:–

These all elicited a positive response, but they seemed a bit generic. James wanted something more immediately recognizable, and relevant to his industry. He wondered, Is there any way we can incorporate something hard-disky into the logo? Like sectors or a platter…? Of course there’s a way!

Ingenious! James was particularly taken with the second option. After some tweaking, we decided that a hard corner on the “R” worked better, and settled on the following:

5Creating the New Site

With a strong visual direction established, and a finalized logo, it was time to return to the website. But before any stylistic decisions could be made, its specific objectives needed to be determined; then its information architecture, and how users would interact with it.

Wireframing

When I first started the project, I’d set up Google Analytics on the existing site to get an idea of how people were using it. In the time that had passed, a good number of results had come in, and they gave me a clear idea of the typical user’s interaction with it, and which pages out of the vast swath were really important.

Armed with this information, I listed the pages in order of the importance they seemed to hold, and also itemized the contents of the various PDF contact forms. Then James and I went through everything together, deciding what we wanted to keep, and how it related to everything else.

Within an hour we’d pared down the site to its bare essentials, and decided on a simple user interaction model; which in turn established a clear information architecture:–

IA and UX

• a home page, to summarize the benefits of choosing Digital Recovery and present a strong call to action (cta), leading users to the:
• contact page, housing two forms: a simple query form, and a complete request form to replace the cumbersome PDF files that customers currently had to fill out. This would be supported by a:
• services page, outlining what Digital Recovery does, and replacing the dozens of confusing, overly-technical, and redundant pages currently on the site.

Testimonials

In addition to this, we both agreed that pull-quotes containing testimonials should be prominently featured on the site. Testimonials are one of the surest ways to increase customer confidence, and James had many, many happy customers who could barely shut up about how great he was after he got back their cat pictures and critical business data.

Bios

Finally, we wanted to play up the personable, small-business nature of James’ company by including the brief bios of him and his business partner, Darren. Rather than create a separate “about” page, we decided these would be better emphasized by including them alongside the company contact details in a prominent footer.

Mocking up the new site

By this stage, then, I had a pretty good idea of how things should look. With the wireframe finalized, I returned to my old friend the GIMP, and created the following composition:–

Let me make some pertinent comments to help put that in context.

Fonts

I spend a lot of time hunched over a screen, staring at a line of text in Fontmatrix, tapping, tapping, tapping the down-arrow to select a new font.

An obvious choice for the title font was something monospaced—a terminal interface font which would play into the highly technical nature of James’ business. But although there are many attractive monospace fonts out there, they aren’t, by any means, intended to be used in titles. The very fact that they’re monospaced means that each letter is the same width—so letters like “i” have a large amount of space around them, while letters like “m” are typically squished. This all makes for very inconsistent tracking. Which means you have to kern the hell out of your text, which defeats the point of using a monospace font to begin with.

After much investigation, I chose the very fine AUdimat by SMeltery. It has much of the style of monospace fonts, while being excellent for titling. It also allows embedding in websites, using the css3 @font-face declaration—which meant I could use it for headings in the body text of the site, allowing me to do my own small part to usher in the twenty-first century.

For the body text, a sans-serif font was the obvious choice. Not only would it complement AUdimat, but a serif would appear too bookish. I chose the open source Dejavu Sans Condensed for its clear, attractive lines, legible forms, and versatile range of weights and styles.

Colors

After toying with various options, I chose a green to offset the otherwise smothering blue. This made for an inoffensively versatile way of highlighting various elements, without the shock factor associated with yellows, oranges or reds. While these colors are good for motivating people, and work well for calls to action (for instance, Amazon’s buy buttons), they’re also strongly emotive. Digital Recovery’s chief audience are not people in a relaxed, browsing state of mind—rather, they are freaking out because they’ve lost important data. Thus, I erred on the side of a calmer color scheme.

James, ever the master of brevity, responded very simply:

Wow, that looks really good!

Coding it Up

With the go-ahead given, I broke out the spanners and monkeys, and started to turn the image I’d created into a functional website.

User Experience

Analytics revealed that while a significant minority of James’ customers were on Internet Explorer 7 or 8, most were using Firefox, Chrome, or Safari. This being the case, I decided to take advantage of these browsers’ modern features by using a fair amount of css3, and taking the plunge into the new html5 specification. Although IE doesn’t support HTML5 elements, or many css3 selectors, there’s a handy html5 shiv available, as well as a script to enable better css3 support. While it’s true that some people still browse with JavaScript disabled, analytics showed that none of James’ customers did.

With this in mind, I also determined to use a splash of jQuery to streamline the user experience on the contact page. You can see it in action if you want to.

Content Management

I like the simplicity of static pages as much as the next swashbuckling geek, but I’ve become accustomed to the extra power and versatility that using a CMS proffers. WordPress is my platform of choice, and I knew it would make updating the site easier for both me and James. More importantly, it would greatly streamline the development process, since I could use a drop-in contact form, rather than having to code one from scratch. I settled on the cformsII plugin for this. (In retrospect, cformsII was a pain in the ass. I’ve since used Contact 7 on this site with much better results.)

Time Passes

What, you wanted me to narrate the entire coding process? C’mon.

Copywriting & Search Engine Optimization

So after I’d gotten everything coded and working, it was time for the final and most important stage of the redesign. (In reality, I actually did this part along with the coding, but it makes more sense to narrate it in a logical order, innit.) A website ain’t no good without content—and the content is what ultimately decides whether someone will hit the submit button, or the back button.

Keywords

Content is also largely responsible for how well your site does in search engine rankings. Since James’ current site was nary to be seen on Google, it was important to change that. I spent a lot of time researching keyword trends in his sector, fiddling with various iterations of headlines and title tags, and generally deciding the very best words to use.

Body Copy

Once this was done, I polished the rough copy I’d originally written for the mockup into a compelling landing page spiel which accurately reflected the persona we’d settled on, while addressing the major concerns of prospective customers. In my trademark (and, I might add, highly effective) style, I worked a story into the copy—because I love to tell stories, and people love to read them.

I also spent some time consulting with James, distilling everything his company does into a concise description for the services page. Once this was done, I refined his terms and conditions, and buffed up the bios that he and Darren had provided.

The Call to Action

One final item bugged me. The call to action read Get your data back. Short, sweet; to the point—and starting with a verb. A solid, strong cta that any copywriter would be proud to put his name to. But it kept nagging me. Something wasn’t right about it.

Eventually, after much brow-furrowing, I changed it to Want your data back? Why? Because in copywriting, you should never, ever, make a promise you can’t keep. Get your data back implied a promise of recovered data that defied the technical realities of James’ profession. Although he has an astoundingly high success rate (and the testimonials comparing his services to other companies to prove it), no one can promise to get your data back. A call to action with a slightly weaker implication was therefore necessary. By all accounts, it’s working well.

Go Live

So that was that. All we had to do was throw the switch on the new site. But before we did that, a couple of important things had to be done.

Redirects & Error Pages

Dozens of old pages would no longer exist when the new site went live. Rather than simply showing users a big fat 404 message if they requested these, I wanted to seamlessly redirect them to the correct page on the new site. Again referring to the analytics data we’d collected, I determined which pages were visited enough that a custom redirect was warranted; then where each one should redirect to. Anything else I simply redirected to the homepage. Since Digital Recovery’s site is very simple, and doesn’t contain regularly updated content, having a 404 page at all is pointless. Better to put people straight through to the homepage, so they can get on with getting their data back.

Testing

It should go without saying, but I’ll say it anyway. You don’t go live without making sure that your new site will work at least as well as the old one. So I did that too. Once everything was in order, I logged into James’ webserver, changed a line of code, and off we went—brand new site! Here’s how it looks:–

6
The Aftermath

Tweaking the ongoing success of a project is just business as usual when you hire the Information Highwayman. So I can tell you, dear reader, that within a couple of weeks James’ site had soared in the search engine rankings; business began to feed in more reliably; and today it’s his major source of revenue—and professional pride. A job well done, if I do say so myself.

You could be next.

Yes Please

]]>