The Casablanca Project: 4 Steps to a Great Web Site Build

CATEGORIES: Papers   ///   03 Jan 2008
TAGS: web project management

Summary

You’re building a new web site.  You may be a start-up with new funding, or an established firm on version three.

At C&M, we call the new web build the ‘Casablanca Project.‘  Why?  Well, whatever type of company you are, it’s an activity you’ve probably lived through before.  Like Casablanca the film, it’s a repeat performance.  It screens every couple of years.  The set up is beautiful – we know the personalities involved, how high the stakes are, and we know the plot intimately. But when we get to the end the same thing happens every time.  Instead of beauty there’s heartbreak.  The new site hits some emotional highs but never really flies like you wanted it to.  Humph stays on the ground, Ingrid takes the plane.  Everyone has their private regrets.

But here’s a new opportunity.  It’s your chance to erase the mistakes of the past – your own and others – and change the course of web history for your firm.

Here are our four essential planning steps to ensure your site will take off on time and on spec:  production planning; content planning, design planning and usability planning.

It’s Casablanca Redux…

1) The Importance of Production Planning

Make no mistake, if you own the project then the web site is you:  you are the producer.  This is a challenge.  If you’re not the CEO then you can bet he’ll be interested, right down to the colour scheme and the way things are labelled.  And people you’ve never talked to before will want to feature their stuff on the home page. There are also choices to make, many of them contentious.  Open source or Windows?  Build your own system or outsource? It’s a hot little potato.

You need comprehensive production plans because there’s shark-infested waters ahead. We’ve seen many web sites come undone through lack of planning, resulting in angry product managers who weren’t consulted, frustrated customers who weren’t considered, and technology that fails.

Technology planning

From a technology perspective, you need a policy that will help the site to grow cost-effectively and without risk.

Here’s what you should consider:

• Home grown or bought in?  Well, here’s a question:  are you a web development firm?  If not, pay an expert to build it.  Trust us, the web evolves so fast it’s the only way to future-proof yourself.

• Hand-coded or CMS?  CMS every time.  You don’t want to rely on technical resources to change a phone number when you move – too expensive.  Besides, you’re going to need active buy-in from the marketing department to keep the thing alive, so you’d best let them publish stuff themselves, without having to learn HTML first.  A CMS will also open up your future development paths.  Need a mobile site in a year’s time?  Maybe, maybe not, but a CMS will always make it easier because it handles your precious content assets more flexibly.

At the same time you’ll need to nail down what it really is that you want and need.  Create your mission statement, if you like.  Note:  what you want isn’t always what you need and so you need to bring real structure to your pre-production plans.  At the very least, we’d recommend four flavours:  a ‘Design brief’ and detailed ‘Functional’, ‘Acceptance’, and ‘Architecture’ plans.

Here’s what they should look like…

Functional planning

A place for detail in which you describe your commercial objectives, the metrics you’ll use to measure success (and ROI), your user requirements (based on stakeholder research), your public-facing functional requirements (a list of the services you’ll deliver to external users), your back office functional requirements (a list of the things you’ll need to run the site), and as much supporting information as possible so that this document can be read and understood by people on the periphery of the project.

Importantly, this document will give absolute direction to whoever is building the site, and it will limit the project scope clearly.  This last point is critical – without limiting your scope you don’t have a project, you have a job without end.  As such, use this plan wisely – all stakeholders should read it and comment on it, and when they’re happy with it you should freeze it.

Acceptance planning

An important document that’ll tell you when your project has begun and ended. Is this really necessary? Well, without it you may find yourself locked in a war of words with your build partner when they’re convinced they’ve finished and you know the homepage banner was meant to be animated, not static. Ideally, this document should be drafted during the functionality discussions with your technology partner. Its purpose is to describe – ahead of time – how key functionality should work, so that when everything’s done you can be satisfied that it’s been built as specified.

This is ‘fluffy’ at face value – how do you describe something that hasn’t been built?  But fluffiness is this document’s virtue.  It’ll serve two important team-building purposes:  it’ll force a structured dialogue between you and your build partner before anything’s been done, and it’ll bind you all together by setting everyone’s expectations.  It’ll also be the basis for a very solid review exercise as the project comes to a close.

Architecture planning

Nothing can happen without this document.  It consists of site maps and wireframes (simple sketches of page layouts) and provides concrete visual guidance to those who will design and build the site.

The site map should be well researched, using the help of third parties as a sounding board.  There’s a number of ways to structure this feedback, including card sorting sessions (which ask potential site users where they would place pages within a pre-defined set of content categories) and post-it note sessions (where testers create their own content categories and organisational schemas by sticking notes on a white board).

Wireframes are a more literal way of describing on-page content and functionality.  Their job is to give guidance to designers and coders and describe the logic behind how the site will behave.  (Whilst a site map provides a hierarchical view of site structure, a wireframe will provide a functional view.) They’ll help you clearly illustrate the arrangement of things on a page – for example, where a ‘sign up’ button should go, and how an article headline, photo and caption should be rendered. Importantly, they are not designs – they are guidelines.  Good designers will not feel restricted by wireframes.  Instead they’ll view them as a useful part of their brief and as iterative signposts that can be tweaked or changed when better solutions are found.  As such, we recommend that wireframes are drawn up by you and your designer in tandem because this exercise will align your expectations and help you realise your design visions faster.

Design briefs

This document will contain the design assets and guidelines to direct the look and feel of your site. Here’s quick a list of things to include:  your top three favourite home pages; your three least favourite sites; your three favourite navigation schemes; a description of three typical site users (who they are, their age, their web wants and needs); your logo and brand guidelines (describing usage guidelines for colours and fonts); a couple of paragraphs providing some artistic direction (usually containing important words like ‘professional’, ‘warm’, ‘simple’, etc); and a general description of your web likes and dislikes.

The design brief should represent your corporate preferences, not your own. As such, it should be created in association with all key stakeholders (in particular your CEO, because CEO’s really care about the design!). If this document is good, it’ll be gold dust for your designer – she’ll be better able to hit the high notes first time around.

Documentation aside, to set your course and hold it you’ll also need to work closely with people – perhaps closer than you’d ever wish to.  This means creating the above plans after consultation with senior management, product teams, marketing, HR, legal, business partners, and – most importantly – customers.

2) The Importance of Design Planning (a Rethink)

You have a nanosecond to hold your prospect’s attention before they hop to another site.  This much is obvious – but don’t assume you’re a destination.  Your visit may be the result of a successful pay per click (PPC) campaign, or it may simply be a mistake: the visitor meant to click on a different Google link, but they’ve found themselves on an old press release page of yours (not your home page).

All of this means you should take time to rethink the purpose of your site design.  You have to make a great first impression, across the whole of your site.  So dare to be different.   Remember the design brief?  Which sites did you list as references?  Do you really want to look like IBM ‘with a bit more attitude’?  Is it critical that you use those pharmaceutical blues and greens as a backdrop?  Don’t measure yourself against your direct competitors because they’re not your competition on the web – BBC Sports and Agent Provocateur are.

To get your prospect’s attention, you have to earn the right to sell to them.  Visually you need to engage on a different plane to those immediately around you, otherwise you’ll drown in the sea of noise.  You also have to be coherent.  If you’re attracting visitors from a Google Adwords campaign then arrival pages need to be in line with their search expectations – for example, if they searched for ‘CRM application’ then it’s no good having them arrive on a visually unrelated page after they click.

This means making a compelling design statement where words and pictures blend to make a bigger (and relevant) whole.  Your visual identity, your messages, and your content need to mesh seamlessly so that once you’ve got their attention you can take your users on a journey to the places that matter within your site – your subscription points, your product pages, your white papers, etc.  And you need to apply this rigour throughout your site – not just your home page.

3) The Importance of Content Planning

‘Our next generation 3.0 widget has been optimised to accelerate your business processes beyond tomorrow.’

Too many web sites are built first and written second.  So here’s a warning – a lack of content charisma can be fatal.  It needs to be a primary thought… the foundation of your site.

If you have something to say then you’d better say it with passion.  You need to persuade me that another click will be worth my time.  You have to earn the right to sell by answering three fundamental questions: ‘Who are you?’ ‘Why should I care?’ and ‘Why should I believe you?’ Answering these questions properly is what distinguishes good marketing from bad.  We’ve written about them elsewhere before, but let’s apply them specifically to the web and your page content…

Who are you?

Let’s say I search for ‘CRM application’. Now, if you’re in the business of providing software solutions, as some of our clients are, then you may want to be associated with this term.

This is good SEO thinking.  Who you are on the web has very little to do with your brand name.

There’s no value in ‘Acme Software Corp’ as a search term.  If people already know your name then they’ll find you readily enough. Instead, you need to court people who might be interested in you but have never met you before.  So ‘who you are’ becomes a matter of associating your self with a variety of concepts (search terms) that are related to you – in this example, the concept of ‘CRM applications’ can be associated with ‘Sales team software’, ‘Contact management systems’ and so on.

As such, your brand on the web becomes a nebulous cloud of words, names and vague associations – and all of them need to be reflected in your site content.  We’ve already written about how to do this properly (and the science behind it) in our SEO paper, but for now you should note that, whoever you are, your brand doesn’t belong to you on the web.  It belongs to your site visitors and every other web user who types a related phrase into a search engine.

For this reason, you cannot write your web content in a vacuum, or simply steal it from your brochures.  It needs to be rewritten from the ground up with web rules in mind.

Why should I care?

Once you’ve attracted people to your site, you need to convince them that you’re relevant to their needs and that you really matter.  Some of this can be done through great design, but most of it is done through the strength of your content and how it’s implemented on the page. Given the average visitor’s attention span, it pays to use your keywords and related images smartly, and not to overload people with irrelevant stuff.

You need a great copywriter for the words: someone who can make the message the hero.  Then you need a good designer who understands how web pages are digested: how we scan rather than read, where the eye rests and where to place a header in a page.  This stuff then needs to be implemented carefully:  keywords need to be placed in page headers, links and bold text, so that visitors are immediately drawn in as they recognise their ‘hot button’ terms and phrases on the page.

In short, great content alone won’t do the trick.  It also needs to be implemented properly on the page.

Why should I believe you?

Confidence is everything on the web.  This is because Google provides such an easy way of getting around.  It gives me an array of links that are relevant to my search needs.  Clicking on them is simple, and so I have no real obligation to stick around when I reach your site.  If it’s not what I need then so what?  I can just as easily try another link. For this reason it’s your job to help me feel good about my search choices.

Good SEO is one way – that vote from Google means a lot.  Good content implementation is another – that’ll show me that you’re relevant to my needs, and that I should care about what you say.  The next step is to convince me that you’re really the one I’m looking for.

How do you do this?  Well, the devil is in the detail.  The clinchers tend to be small things like the quality of the labels used for navigation and the prominence given to keyword-specific page headers.  It’s all about providing comfort and reassurances in your content. ‘CRM Products’ is a better navigation label than ‘Solutions’, as it grounds my expectations and gets rid of unnecessary doubt.  Subtle use of straplines are also a good idea – ‘Acme Software Corp, the CRM Company’ makes me less jumpy.

You get the point:  once you’ve rounded up your prospects you need to use specific pieces of content to reassure them and make them feel good about choosing you.

4) The Importance of Usability Planning

Having great content and a great design does not make a great web site.  You can still lose the plot.

Usability is the glue that binds a site together.  It’s the difference between sign-ups and deserters, buyers and browsers.  Why?  If you haven’t read Steve Krug’s excellent book ‘Don’t Make Me Think’, then I urge you to do so as soon as you can.  When it comes to creating content, designing pages and implementing code, ‘don’t make me think’ is the best possible mantra to help you realise your goals.

The ‘me’ in this case is your user, and the ethos is all about delighting them without frustrating their sense of order.  In other words, you need to respect pre-defined web conventions if you’re to profit from that precious traffic.

This is best explained by an analogy from XYZ, in his book of business principles, ABC.  It tells of his experiences at a new barber’s shop.  The first time he goes he gets his hair washed before the barber starts (he’s told it’ll help the cutting process).  He gets a cup of coffee from the barber’s assistant, and this is regularly refilled throughout his stay.  The barber does most of the job using scissors and not clippers.  He even has a pleasant chat.  Success! Great haircut, great experience.

The next time he gets a trim, he gets a hair wash at the end of the cutting process.  He’s given a coffee but no refill, and clippers are used for at least half of the job. Still, the barber’s done another great job.

The next time he goes, guess what?  No coffee, no scissors and no wash.  It’s still a decent cut but he decides never to return.  This is because whilst the product is good his experience of it isn’t.  He chooses to go elsewhere not because his hair now looks bad but because his expectations aren’t grounded.

Consistency and attention to detail is the hallmark of all good customer interactions with businesses.  And so good customer experiences and interaction – or ‘usability’ – should shape your web site in a fundamental way.

You need to consider who you’re designing for:  young, old, technically challenged (low bandwidth connections from hotels), familiar with the web, unfamiliar with the web, a little short sighted, or a little clumsy with the mouse.  Some of these folks may lack the latest Flash or Shockwave plug in. They’ll probably be comfortable with a primary navigation scheme that runs the length of the page across the top.  And they’ll want to know more about you, usually by clicking on a link that contains this phrase…. and so on.

The point is that you’re designing for an amorphous group of people, all of whom carry some common expectations about how a web site should behave. Let’s call them ‘standard web conventions’.

Standard web conventions provide you with opportunities to build trust and also to cross-sell.  Consider the following types of functionality:  ‘People who bought this also bought this’; ‘Related white papers’; and ‘What’s New’. These are all web tropes.  There was a time when these concepts were revolutionary, but now we’re all used to using them.

So, build them into your functional spec and use them religiously! Whilst your natural inclination may be to provide users with a truly unique experience, don’t be unique when it comes to ‘usability.’  Be uniform instead – it’ll pay dividends.

Conclusion

Web design projects are sexy and exciting.  Unlike most of your normal marketing deliverables, your web site is accessible to the entire world.  It’s the soul of your organisation laid bare.

As such, there are plenty of reasons to do a great job.  And yet, we’re constantly amazed by the lack of quality in corporate web sites.

Oftentimes they’re built and written by the same guys who build the products or deliver the services.  And despite best intentions, they can lack meaning for the people they’re supposed to serve – through a mixture of lacklustre content, inconsistent design and poor execution.

Our message to anyone who intends to build a web site is don’t start anything without creating the types of plans discussed above.

Your job here is to exceed everyone’s expectations, including your customers’.  Good planning will reduce the number of unpleasant surprises you experience along the way and it’ll help ensure your site is delivered on time and on quality.

So plan well.  After all, it’s your best shot at this year’s marketing Oscars. You can rewrite the script.

 

CATEGORIES: Papers   ///   03 Jan 2008
TAGS: web project management