The Rebranding of Digital Recovery Ltd

Digital Recovery is a small data recovery outfit run by my friend James Pennington. One day, James was complaining about the awful state of his website—a tour de force of 90s home-made design coupled with amateur grey-hat SEO. Being the great friend that I am, I offered to take a look.

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:

The old Digital Recovery website, before the rebrand

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:

Digital Recovery website comp 1

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. He 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:–

Development of the Digital Recovery logo design

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!

Incorporating a hard disk platter into the logo

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:

The finalized logo

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:–

The mockup for the new Digital Recovery website

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 wide 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:–

The finished product: Digital Recovery's new website

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

D Bnonn Tennant
‘The Information Highwayman’

D Bnonn Tennant, ‘The Information Highwayman’, signs his name to this