Getting a great website a step-by-step guide.pdf

Document Sample
Getting a great website a step-by-step guide.pdf Powered By Docstoc
					A free Design Council resource for small businesses

Getting a great website:
a step-by-step guide
                  We have created this free guide to explain how you can improve
                  your business with a great website.

                  Get advice on finding a web designer, working out what your
                  business needs, deciding how your new website will work
                  and keeping the project on time and on budget.

Over the next six chapters, we will cover:
—   Finding a web designer
    what a designer can offer you, and how you can find one
—   Working out what your business needs
    things to consider before you start working on your website
—   Deciding how your new website will work
    tips and techniques for planning the functionality of a website
—   Getting your site designed and delivered on time
    including guidance on the importance of effective branding and testing
—   Measuring the results from your web project
    evaluating your new website and planning for the future
—   Doing it yourself?
    practical advice if you’re thinking of going it alone

These days, companies of all shapes and sizes will have a website. But not all have
been designed with their customers’ needs in mind. That’s where a web designer can
help. If a website meets your customer needs, then your business can only benefit.

Take, for example, the success of the Amazon online retailer. Since launch, the
company has continued to grow and expand its product lines. Yet its homepage still
manages to let customers browse and search all sorts of products in a simple,
uncluttered manner. In 2008 it redesigned its UK site after consultation with customers
around the world, demonstrating that it’s able to adapt and evolve as its company grows
and its customers’ needs change.

In many cases, businesses may not know why they need a new website, apart from the
fact that the old one is not working to its full potential.
Reasons you may need a new website include:

—    To increase sales by allowing customers to purchase online
—    To keep ahead of the competition with a professional online presence
—    To decrease costs by doing away with overheads
—    To attract more members or customers by promoting a positive brand image
—    Or to encourage interaction and feedback with your customers

Revamping your website, or starting one from scratch, isn’t as straightforward as getting
someone to put together a pretty design and launching it to an unsuspecting public. The
reality is that competition for your customers is fierce, and the wrong strategy for your
website can send people running to your rivals.

Employing a specialist web design company to help you do your customer research,
plan the scope of your website and get your execution spot on, could be the best
investment your business can ever make.

Case study
New website boosts NS&I’s online sales by $44m
In 2005, the government’s National Savings & Investments department (NS&I)
redesigned their website to make it clearer, simpler and more accessible for users.
Just eight weeks later, NS&I’s online sales rose from £3m to £47m.

    Read the full story online to see how web design could help improve your business.
A free Design Council resource for small businesses

Finding a web designer

In this chapter we will outline:
—   What services web design companies and web specialists can offer
—   The dos and don’ts of choosing a web designer
—   Why use a web designer?

What services can a web designer offer you?
There are hundreds of web design companies to choose from, so it’s important to
choose which one will be best for your company.

A web designer will do more than just lay out a few pages according to your brief. They
will help you define, design and deliver a site that will best suit your customers. Apart
from designing the customer-facing ‘front end’ of your site, services that web designers
(and associated specialists) can offer include:

—   Information architecture
    planning the structure of your website in a meaningful way
—   User-centred usability testing
    measuring how people are using your pages
—   Accessibility testing and legal advice
    for instance, it’s a legal requirement to make sure that your website can be
    accessed by people with disabilities, so your designer should be aware of making
    sure the site meets the minimum accessibility standards
—   Content rewriting
    making sure the words and pictures on your site attract and engage visitors
—   Effectively translating your brand to the web
    making sure that the values and identity of your company come across loud and
—   Revamping your corporate identity
    or helping you create one, if this is something you don’t already have

Web designers, or their partners, can also offer more technical services including:

—   Hosting
    storing your website online and carrying out day-to-day maintenance
—   Search engine optimisation
    ensuring that your website appears high up in search results
—   Implementing ‘back end’ work
    this could include content management systems and e-commerce solutions

Your budget and the scope of your project will largely dictate what services you will
need, and it’s crucial to clarify these – in writing – with your chosen design company at
the earliest opportunity.

Making a shortlist of designers to choose from
These days, many web designers will specialise in certain market sectors and
technologies and will acquire new clients via referrals or word of mouth.

                   When putting together a shortlist of designers you can look at
                   websites you like (they don’t have to necessarily reflect your sector)
                   and see who’s designed them; usually this is indicated in small print
                   at the bottom of the web page.

                   Web designers of all sizes with happy clients will have their work
                   showcased on their own websites. This is also a good indicator of
whether the agency will be able to do the job, but do make sure they were sufficiently
involved with that site’s development.

Other specialists you might want to work with
As we have outlined, web designers will provide a range of tools and services to help
you define and test your site. But you can also consider appointing independent
specialist agencies to work alongside the web design agency.

Usability companies
Usability companies, for example, can audit your current site; help you define what your
customers need and provide advice on how to structure your new site accordingly.

This user-centred planning needs to be done early on before the web design agency
starts designing your site – remember, it will be costly and time-consuming to make any
drastic changes if the design has already begun!

Marty Carroll
Director of consulting, Foviance

 ‘Some businesses will launch in to developing a site that looks good
aesthetically but doesn’t support the function for its particular
audience. A lot of sites will be Flash-based with a lot of animation, but
this doesn’t support the simplest user-journey.’

Many web design companies will provide usability audits as part of their own services,
but you’re free to get independent advice elsewhere – some government departments
require an independent audit, for example.
Content optimisation
Content is also important, not only for your customers, but to help your site appear high
in search rankings like Google. Will the web design agency help with copywriting too?
Recruiting a search engine optimisation specialist can help you structure the content of
your site so that it appears prominently in search results. Again, many agencies can
help you with this as part of their in-house services.

If you do choose to get specialist agencies in, you need them on board ‘at the very
beginning,’ says Trenton Moss, director of usability company Webcredible. Before work
begins, you will need to outline the key dates that the agencies need to get involved.

About half the time, companies unfamiliar with usability testing will recruit Webcredible
when the design has already begun and it’s too late to reassess the site strategy. ‘Then
you just have to do what you can and it’s got to fit in with time and budget constraints,’
he says.

Patrick Burke
Managing director, The Atlantic Hotel

‘Prior to the appointment of a web design agency, we worked with an
independent marketing consultant to draw up a comprehensive
marketing plan for the business, which in turn led to a detailed
website brief.’

Read the Atlantic Hotel case study.

Choosing a web designer
When you have decided on a shortlist of web designers, you can then approach them
and invite them to present you with what’s called a pitch; a presentation and/or
document that will help you decide whether the agency will suit your business.
You won’t need to provide the web designer with a detailed brief just yet, because as
part of their preparation, they will meet up with key people in your business to try and
understand more about your organisation, the problems with your current site,
timescales, budget and your overall business goals and corporate identity. They will
then take this information and spend one or two weeks putting together a pitch.

For example, the web design agency BlackOrange will typically have an initial meeting
before the pitch so they can meet the team, and requirements and ideas can be freely

Mark Bennett

‘Some early design concepts are sometimes included, and a
breakdown of costs, timeframes and deliverables conclude the
Traditionally, it’s been advisable for businesses to put detailed requirements together
before appointing a designer. But this is easier said than done: many companies won’t
always know what they or their customers want, even if they think they do.

Neil Davis
Director of strategy, Precedent Communications

‘What everyone seems to think is you can sit in isolation, figure out a
business plan and appoint an agency to do it. But that’s actually
where you need the most help and advice.’

At the same time, companies should not be naïve and say they have no clue what they
are doing as they may be taken in by overzealous account directors. At the very least,
before meeting with the potential agency for the first time you should have a clear idea

—   Your corporate identity/brand
—   Your competitors and the nature of your business; is it fast-moving and liable to
—   Your main business stakeholders
—   What your customers need, or at least what you perceive those needs to be
—   Broadly, what you think a new website will achieve for your users

On a more practical level, you should also have an idea of:

—   How much control you want over your site’s development
—   Your timescales, and any flexibility with dates
—   Your budget, and any contingency for extra requirements

In more depth
For more help and advice, read our guide to     Finding and working with a designer.

Top tips
Our top tips when trying to choose between pitches include:

—   Don’t automatically be bowled over if the designer’s pitch includes a sleek,
    preliminary design before you’ve even got the project off the ground.
    It might look impressive, but the reason you’re appointing an agency is to establish
    a design that will best suit the needs of your users, rather than use one that just
    looks good.

Neil Davis
Director of strategy, Precedent Communications

‘When we pitched to the RSPCA, we were told that the other agency
would go in with a design. We said we wouldn’t, as we didn’t know
enough about the company. We’d also be doing a design that would
impress the people at the table – not the users. We won the pitch.’
—   Do notice who is pitching to you
    If you’re mostly dealing with a salesperson or account manager, be wary – they
    may have the drive and enthusiasm, but they may be overselling what they can
—   Don’t agree to solutions to problems that may not exist
    Without proof to back the problem up, these can be costly extras that may not suit
    your business in the long term.
—   Do deal with the experts
    Will you be dealing with specialists throughout the whole process? For day-to-day
    dealings, your first point of contact should always be someone who’s directly
    involved with the development of your site.
—   Don’t get bamboozled by jargon
    If the design agency can communicate its points in plain English, this is an excellent
—   Do choose a company you’ll get along with…
    not just until the site launches, but beyond.

Gaynor Haxby
Newmarket Racecourses

‘One of the key reasons we chose our agency was that we liked and trusted the people
we were going to be working with. It is refreshing that their level of commitment to us as
a customer has remained constant following the completion of the initial site build.’

Read the Newmarket Racecourses case study.

—   Don’t always go cheap
    the agency may be undercutting rivals in order to gain business, but it won’t
    necessarily deliver value in the long term. It may also be outsourcing development
    overseas. Is locality important to your business? Always ask the agency how it’s
    broken down its prices.

Mark Coombes
Director of online channels, Complete

‘Don’t select an agency on price – if there’s a huge price difference between one
agency and another, there is a reason.’

—   Do trust gut instincts
    ask yourself if you can both fit culturally – can you have a good working relationship
    with these people?
—   Do make sure the designers you choose can react quickly
    never underestimate how quickly your requirements can change during a project. If
    this happens you’ll need someone working for you who can make those changes as
    soon as possible.
Marty Carroll
Director of consulting, Foviance

 ‘We were doing some work for Nokia and we captured requirements
early on in the process. But when the iPhone was launched, those
requirements changed quite quickly. People had something else to
reference against. They couldn’t articulate what their requirements
were before the iPhone arrived, then all of a sudden they wanted something different.
You have to be flexible and agile during the development process.’

—   Do allow time for selecting a designer
    whether it’s an individual or an agency.

Mark Coombes
Director of online channels, Complete

‘Choosing an agency always takes longer than the client thinks. With most pitches the
client says they’ll decide by a certain time and it takes longer. The extra time it takes
them to decide compresses the delivery time.’

One size does not fit all
There are many different kinds of web designer out there, and you’ll find that much of
this guide will be applicable to all types.

When we refer to a web designer, web design company or agency, we could mean
individual designers running freelance businesses, small local web design companies or
even larger, all-encompassing agencies.

It is also worth remembering that web designers often specialise in certain market
sectors such as travel, charity, government or retail.

For more advice on how to find and work with a designer,      read our free guide.
A free Design Council resource for small businesses

Working out what your
business needs
In this chapter we will outline:
—   Ways you and your design company can best plan the scope of your website
—   How to uncover your customers’ needs using tried and tested techniques

Once you have decided to take the project forward, you and your newly-appointed web
design agency need to move on to the discovery, or requirement-gathering stage.
Working with your web design agency to agree on a written strategy brief is important,
because it will define the scope of your project.

Independent research
Sometimes, organisations choose to appoint an independent research agency to
establish their website’s requirements. They will then present this research to the web
designer who can use it to help plan the scope of the website.

However, you shouldn’t be disheartened if your designers prefer to do their own
investigations; this is entirely normal. These days, many designers prefer to work with
companies themselves to help understand and identify their customers, competitors and
their business goals as part of the design process.

Mark Coombes of Complete claims that the independent research agencies companies
appoint can sometimes ‘be soft and fluffy in their answers. We have to go in and get
something hard; otherwise the business isn’t going to get a measurable benefit.

Be flexible, be involved
As with all business projects, key stakeholders need to be involved from the start; as big
decisions will need to be made quickly.

You’ll also need to firm budgets, decide on milestones and get key people involved at
every major stage of the process.

In the fast-paced world of the web, goals can and will change throughout the course of
the project, so your agency should be direct, honest and flexible enough to react to
sudden changes to your business plans.
Mark Coombes
Director of Online Channels, Complete

‘Any agency worth their salt will try and get under the skin of the business and find out
what the business need is. Any agency that doesn’t do that isn’t going to solve your
problem. That’s a key thing, but the client also needs to be open. You are going to
investigate and interrogate.’

What details do you need to firm up?
Although the snazzy design work will form the crux of your project, there are finer
practical details to pin down before research begins.

Mark Bennett of BlackOrange suggests the following checklist:

—   Roles and responsibilities
—   Initial specifications (content and functionality)
—   Domain names, hosting requirements
—   Timeframes
—   Milestones
—   Costs
—   Copyright and intellectual property ownership
—   Ongoing maintenance and support

Neil Davis
Director of strategy, Precedent Communications

‘If anyone goes in with a blanket rule to apply to anything, just don’t
trust it. Every organisation is different and unique. We’ve got a set of
tools we use on a regular basis, such as workshops with internal
people, user focus groups and individual key stakeholder surveys.’

In order to work out what is required, it is not unusual for an agency to begin a project
by sending an engagement team into the business.

According to Mark Coombes, Director of Online Channels at marketing communications
agency Complete, gathering information in this way is an effective means of gaining
insights into what a company wants or needs from its website. This, in turn, will inform
the designers’ approach to the project.
Alex Osman
Creative Lead, Complete

‘There aren’t a set number of tools and methodologies we’d use on
any particular project. We use the right ones as we go through. It very
much fits in with the business sector and their requirements. Is the
site a complete refresh? Or is it a response to ‘Why aren’t we selling
enough?’ …there are a lot of ways to break it down.’

Working out how much to spend on the project
Your budget will be a crucial decider as to what strategy you’ll take. How much you
spend on your website should be sensibly proportioned to the turnover of your business.
As Neil Davis of Precedent Communications points out; ‘if the annual turnover of a
company is £1 million, then spending £100,000 on a website isn’t going to be a wise

In addition, you will also need to figure out whether you will achieve an adequate return
on your investment.

A small business may only need to conduct fundamental research such as a workshop,
a few customer interviews and a competitor review. If they choose to spend more
money on any additional research, will it be worth the possible extra return on

For example, if a certain research technique generates a one per cent return on
investment it might only equate to a few hundred pounds of additional income for a
small business after costs are taken into account. But for a big company that one per
cent might be a million pounds, in which case it might be worth them investing a bit

In more depth
For more advice regarding budgets, read chapter three of our step-by-step guide to
   Finding and working with a designer.

Interviewing your users
One way to help determine how your new site should look is to conduct a few user
interviews. This helps you design the site around specific user scenarios, not around
what managers might want.

For example, Neil Gardiner, who runs his own design company NGStudio and often
works with small businesses, will create biographies, or profiles, of his clients’ typical
customers. These profiles are often referred to as personas.
Neil Gardiner
Founder, NGStudio

‘The client will have an idea about who their customer is and what
they think they’ll want but when they go back and start to speak to
some of those customers, you often find that those views don’t
always correspond.’

In order to develop personas, the Webcredible design consultancy will initially place a
questionnaire on its clients’ existing websites to discover their main audience groups. It
will then conduct interviews with stakeholders within the company who can help define
those users in more detail.

Next, Webcredible will conduct in-depth interviews with representative users in order to
understand their motivations. For instance, if an individual were buying something, how
would the website fit in with their overall journey from thinking about a particular product
to actually making a purchase?

Once the research is complete, the information gathered can be used to create
personas that can be used to test different elements of the site

Trenton Moss
Director, Webcredible

 ‘We’ll flesh out the users’ individual goals, their needs and attitudes
and behaviour. Following on from those interviews you have a real
understanding of what the users’ main goals will be. Then, any time
you come up with an idea for the site, rather than guessing if it’s
going to work for your users, you run it by your personas.’

Assessing your current website
Rather than reinvent the wheel, taking a look at what does and doesn’t work on your
current website, if you have one, can help you understand the problems that need to be

Simple analytical tools like Google Analytics or WebTrends allow you to discover ‘where
people are going or, probably importantly, where they’re not going,’ says Marty Carroll,
director of usability at Foviance. ‘You can use that information as the basis of the design
to say what’s working, and what’s not.’

Case study
Find out how the Atlantic Hotel in Jersey used a web design agency to help create a
website that matched their reputation for luxury and quality in our case study.
Accessibility requirements
Remember that under the UK Disability Discrimination Act 1995, your website needs to
be accessible by people with disabilities.
For example, a text-based version of your site means that a visually-impaired person
can use screen reader software to listen to the text as audio.
The current guide to good practice in commissioning accessible websites is detailed in a
document called PAS 78.
BSI British Standards has established a technical committee who will be developing a
new British Standard on web accessibility that builds on PAS 78 and takes into account
new technologies and user-generated content. It is expected to be published in Spring
Your web designer should already be aware of accessibility requirements, but if you
would like to find out more for yourself, you can download a copy of PAS 78
A free Design Council resource for small businesses

Working out the structure
your site will need
In this chapter we will outline:
—   How a designer can help you plan the structure of your new site
—   Some simple yet effective planning techniques
—   What technology you might want to use

Defining the structure of your site
After conducting a review of the aims and requirements of the site based around your
users and business goals, you and the web design company will need to define the
structure of the site. This framework is usually referred to as a website’s information
architecture. Questions to consider during the definition process will include:

—   What will be the key pages of the site and how will they be positioned?
—   What content management or e-commerce system will be used, if any, and how will
    it integrate with the new site?
—   What features and functionality can we use (such as a blog, a store, a forum, a
    news page) and when should they be launched?

There are numerous approaches to take when discovering the answers to these
questions. Each designer will have their own preferred route. It is important to prioritise
what features and functionality you will be phasing in first of all – and these will need to
be signed off by the key decision-makers in your company.

Some simple, but effective, ways of defining and refining the information architecture of
your site include:

Getting your users involved
Getting your users involved early and often is also a big part of
web design – but sometimes you won’t have the time or budget
to do thorough, formal testing. If that’s the case, it’s still worth
getting a few people in from outside your circle, even if it’s just
a colleague from a different department, to bring in a different
perspective. Ask them what they would do when conducting
certain tasks, and why.
Most web designers will use sketches known as wireframes to help define the structure
of the site. These won’t use any graphics; they often simply involve a skeletal outline of
what elements will be placed on the main page and any lower sub-pages. Once the
wireframes are signed off the idea is that the graphic designer will use the wireframes
as a guide when laying out the new site.

Card sorting
‘This is incredibly straightforward and powerful,’ says Trenton Moss, Director of the
Webcredible design consultancy.

Make a list of all the content and functionality on your site and write one piece of content
on each card. Then ask a typical user to divide the cards into groups that make sense.
Then, for each group, get the user to write a label that describes each one.

‘All the while they’re talking about what they’re doing,’ he says. By running the test with
a number of users, you can statistically analyse it – ‘and there’s your site map and
navigation, structured and labeled around what the users think and not what you think.’

Case study
See how Newmarket Racecourses restructured their website to make it easier for users
to find what they’re looking for in our case study.

Post-it notes
Though this may sound rather obvious, having the freedom to be able to mix, match and
rearrange elements of your website on a wall is a handy way people can assess its
potential structure.

Mood boards
During the research phase of a web design project for food and wine merchant
Jeroboams, designer Neil Gardiner of NGStudio visited their stores and met up with the
head of retail, shop managers and assistants. He then returned to the studio and
developed a series of mood boards, covering key elements of the design project such
as typefaces, colour palettes, interior photography, product photography and word

Charlotte Hambly
E-commerce Manager, Jeroboams

‘We already had logos and company colours for Neil to work with but
were fairly open to new design ideas. Neil sent the mood boards to
us so we could choose which elements we liked: this was a good
starting point.’
What technology do I need?
The technology you adopt may also be dictated by current systems you have in place.
The food and wine merchant Jeroboams, for example, acquired a new e-commerce
system for its website and conducted a three-day workshop with its newly-appointed
web development company to define the site’s technical functionality.

Designer Neil Gardiner of NGStudio was appointed to construct the cosmetic side of the
site. Firstly he familiarised himself with the system Jeroboams was already working
with, which allowed him to provide costings for designs, HTML programming and

Charlotte Hambly
E-commerce Manager, Jeroboams

‘The timelines very much suited our planned start date, and we were
able to match the costings with our budget.’

You may also want to explore Web 2.0 functionalities for your new website. Rather than
meaning anything technical, Web 2.0 is a term used for the new generation of websites
that allow users to interact with each other and add their own content online. Examples
include Facebook, YouTube, Flickr and the like.

So for example, adding a blog or a review functionality to your site will allow people to
critique your products and services.

However, you should be aware of the possibility that some of these comments may be
negative, so you’ll need to respond to them.

Neil Davis
Director of strategy, Precedent Communications

‘Think of your website as a reflection of your organisation and how
people see you. If you don’t like what you see in the mirror, don’t
blame the mirror. Do something about it. If people are saying bad
things, and you want to try and make them stop, they’ll do it
somewhere else. If you’ve got a psycho hell bent on portraying you in a bad light,
respond and point out how helpful you’re trying to be. Let people make up their own
minds about whether people should pay attention to him!’
Case study
Newmarket Racecourses
Careful planning is crucial to the development of a great website.
Why? Because no matter how good the content of your site is, if the
structure is confusing, unclear or inappropriate for its target
audience, then people won't use it.

When Newmarket Racecourses realised their punters could make
neither head nor tail of their website, they hired a team of website
designers to improve the structure.

Read the case study to find out what changes they made.
A free Design Council resource for small businesses

Getting your website
designed on time
In this chapter we will outline:
—   How to choose a successful design that will best serve your customer needs
—   The importance of successfully communicating your brand
—   The value of testing your website design as early as possible

If you have properly defined your site and communicated decisions throughout the
business, any resulting design prototypes should not throw up any surprises.

Designers will probably provide you with around three proposed graphical designs.
Allow time for debate and discussion, and time for the design company to make any
final tweaks.

Conflicts may involve something as minor as a disagreement over the colour scheme.
We’ve mentioned how your web designer should be familiar with your company’s
corporate identity before work begins, so this should help guide the look and feel of the
new site, thus avoiding such conflicts.

Know the objectives
In order to keep things on track and on budget, it is of the utmost importance to agree
the scope of the project very early on.

Laura Crofton-Atkins
Project Manager, Fortune Cookie

‘Once people start to see the proposed designs, they tend to get very
excited. There’s a temptation to think about other types of
functionality we could introduce at that stage. It’s important to
constantly assess where you are against what you initially agreed
would be the scope of the project. We could phase the functionality in at a later stage,
or go back to the objectives and say: ‘Yes, this does look cool and other people are
doing it, but it’s not what we’re trying to achieve at this stage.’’
Customer connection
When considering which design to go for, ask yourself which one speaks to your
customer, not to you. Does it have the right connection?

Marty Carroll
Director of consulting, Foviance

 ‘My wife was trying to book a holiday in Greece and we had a choice
of three different hotels. We visited each of their sites and made our
choice on an emotional decision based on the clean and crisp design
of the site and how the imagery used was all about the type of
experience you’d have at the hotel. They’d thought about what they wanted to
communicate to the world through their main shop window; the web. It wasn’t a
transaction site where we could book online – but my wife was encouraged to pick up
the phone and call Greece to make the booking.’

Having a brand is essential
Larger companies in particular will have specific brand guidelines that the web design
company will need to incorporate, explains Mark Bennett of BlackOrange. ‘These
dictate style, such as which colours and fonts should be used, and how and where the
logo can be positioned.’

Laura Crofton-Atkins of web agency Fortune Cookie says it will obtain signed and
approved brand guidelines from the client before it begins putting any design concepts
together. Usually, it’ll be applying an offline brand online or refreshing a current brand to
a more modern feel, rather than working on branding work.

Case study
Find out how the world’s oldest brush maker, Kent Brushes, refreshed its brand image
and relaunched its website in one fell swoop in our case study.

Often, businesses that commission a web design agency are already in the process of
developing or redeveloping their branding anyway, and are therefore working quite
closely with another brand agency at the same time.

Take, for example, one of Fortune Cookie’s clients, The Atlantic Hotel. This top small
luxury hotel in the Channel Islands decided to update its brand identity at the same time
as its site relaunch.
Its Jersey-based advertising agency was asked to produce a set of brand identity
guidelines, detailing how new logos and corporate colours should appear. ‘The most
important part of this process was the commissioning of new photography and a digital
image library,’ says managing director Patrick Burke.

In particular, small businesses will often need to start developing their brand from
scratch, including designing a logo. A web designer can often help you with this.
Neil Gardiner
Founder, NGStudio

‘Sometimes it’s quite a big thing for business to ‘step up’, even if
they’re just employing a freelancer for the first time, rather than doing
it in-house or getting their mate’s brother to do it. But when they
invest a bit more money in it they’re normally quite pleased with the

Test out your designs as early as possible
Never underestimate the value of testing ideas, structures and designs on your users as
early as possible. This is one of the best ways to find out what is and isn’t working; it will
help to keep the project on track and could save you money in the long run.

Low-fi testing
Preliminary sketches of potential designs can be unleashed on users before a final
decision is made, if there is the time and budget for it. Then, once the design has been
decided, some extra testing of a working prototype can serve as a validation exercise.

Neil Davis
Director of strategy, Precedent Communications

‘Maybe we’ve sketched up pictures of what the website will look like
and we’ll ask people to use their finger as a mouse and point on what
they might click. The reason you’d do that is because it’s easy to
change a sketch. If you designed a website, did a template and put it
up and running as a website and people said ‘oh, it would be better if that element was
there,’ it would be difficult to change at that point.’’

Eye-tracking testing
Very early on in the process, some larger agencies will test their designs by following
where the users’ eyes lead on the page. In essence, their eye movements will help
dictate the design.

Trenton Moss
Director, Webcredible

 ‘Eye-tracking is really great for evaluating the effectiveness of the
design. Just say you have a really important call to action on the
homepage, and your business goal is that everyone sees this call to
action. So, you would do eye-tracking on the designs to see where
people look in the first five seconds.’

Fortune Cookie will test designs with people from a range of age groups, gender and
level of internet usage. But occasionally their users will be very specific, depending on
the project. As Laura Crofton-Atkins points out, it is vital to do this kind of testing as
early as possible; the later you leave it, the more expensive it is to make amends.

Content is king
It goes without saying that what your visitors read is just as important as the graphic
design of a website.

Reading from a screen is often considered less effective than reading from paper, but
there are steps you can take to make your content as legible and understandable as
possible. Short paragraphs work better than dense bodies of text, and you don’t want to
bore your visitors with jargon or long-winded explanations. In short, the site should
communicate quickly and effectively in plain English.

There are also search engine considerations. If you want your website to appear high
up in Google search results, your content will need to be optimised; and you will need
the right expertise on board to help you achieve this.

It’s useful if you can have as much working content ready as possible for the designers
to work with.

If you are going to be adopting a content management system on your website, now is
the time to organise training sessions. These can be technical as well as editorial: you
want people to be able to positively reflect your corporate identity through the right tone
of voice.

Going live
So, you’ve decided on the design, and now it’ll get developed and turned into a proper,
live website, as defined in the requirements. Everything should be plain sailing, right?
Not necessarily. In reality, of course, things can go wrong.

A good way to reduce the likelihood of any nasty surprises is to keep the user personas
developed during the research stage close to hand. Whether it’s an individual
programmer or a team of 20, your development team should be aware of the personas
so they can refer back to them during the design process.

Marty Carroll
Director of consulting, Foviance

‘Sometimes you come up with wireframes, and even a working
prototype, and unfortunately it goes into development and comes out
looking completely different and unviable for your customer base.
Make sure the personas developed at the beginning are being used
to guide the design process.’
The power of branding
A free practical guide from the Design Council
In the highly competitive world of online commerce, a strong brand is
essential if an internet retailer is to stand out from the crowd.

With this in mind, we have created a free guide to shed some light on
the subject of branding; what it is, how it works and how you can use
it to help improve your business.

Visit the Design Council website to   find out more.
A free Design Council resource for small businesses

Measuring the results
from your web project
In this chapter we will outline:
—   Ways to determine the success of your website
—   Remembering to plan the next stage of your website’s evolution

Depending on your business strategy you may want to launch your website amidst great
fanfare. For example you may be promoting a product or service to coincide with the
launch of your site. Conversely, you may opt for a soft launch – dipping your toe in the
water to see how the new site will be received.

Whatever the approach, there are a number of ways you can measure results. Some
ways you could do this include:

—   Analysing your web statistics
    take an imaginative approach to this. More ‘hits’ won’t necessarily mean a better
    website. If people were having trouble finding something on your site, you’d actually
    expect the hits to go down when the more streamlined website was launched.
—   A reduction in telephone calls
    if you have a shop, for example, and people have tended to call you for technical
    help, then you would expect calls to decrease if the site is easier to navigate.
—   An online questionnaire
    hosting a carefully-planned survey on the site can help you measure customer
    satisfaction levels.
—   Benchmark testing
    this involves timing someone undertaking a task on the old site then comparing the
    time taken to complete the task on the new site.
—   More sales
    this sounds obvious, but improving the usability of the site will lead to increased
    sales and is a definite indicator of success.

Planning for the future
Your website project doesn’t end the date it goes live; it’s an evolutionary process. ‘It
should never have a finish date because a website is a living, breathing thing,’ says Neil
Davis of Precedent.
At least one person should look after and nurture the website; even if it’s not going to be
their full-time job. Also, think about how new technologies and how they can benefit
your website in Phase Two of your website development.

Likewise, the relationship with your web designer doesn’t end there. They will be
providing maintenance and support and, in some cases, more strategic direction for
future campaigns and projects.

Just keep nurturing the relationship and you should have many successful years

Case study
Keeping things fresh
After launching a new website in 2006, family-run fruit business
McCallums has made sure its online presence doesn't go stale.

As well as keeping everything up to date, McCallums is working with
its website design team on a second stage of the project - which will
include adding several new products and services to the site.

  Visit the Design Council website to find out more.
A free Design Council resource for small businesses

Web design: doing it
In this chapter we will outline:
—   Free tools you can use to build a website yourself if your budget is limited
—   Practical considerations when going it alone

We’ve established that a web designer will be able to help optimise your site so that it
not only looks great, but also serves the needs of your customers in the best possible
way. Their input is, on the whole, a worthwhile investment that will bring a competitive
edge to your site.

However, designers and web agencies are not always an affordable option. The DIY
route is especially attractive for small start-up companies who need to get their websites
out there on a tiny budget.

If this is the case, you and your IT department (or consultant) will need to follow some of
the techniques we’ve outlined yourselves. This means you will have to do all the
research and usability testing, as well as the actual designing and building of the

Luckily, there are many free tools out there to help with the structuring and building
process, and – by following some of the expert research and usability techniques we’ve
outlined earlier – you can go it alone.

Perhaps in the next phase of your business’ growth, you will then be able to recruit an
expert to assess how well the DIY site is doing.

Have you registered a domain name?
  Nominet, the regulator of domain names ending in .uk, has a list of registrants on its
website that will do this for you.

If your company’s name has already been registered as a domain name, you can think
of variations such as different endings – .com or .biz for example. You could even use
hyphens between words or think of something completely different, but do bear in mind
that this may make it harder for visitors to find you.
At the early stages, you may just want to ‘park’ your domain name – this means it won’t
yet be associated with any website when you type in its address. You or
your company’s IT department can sort out a web host (the company that stores your
website’s content on its servers) later.

You’ll risk losing your domain name if you don’t keep up the subscription fees, but you
can pay the fees in advance for up to ten years. The market is competitive, so costs will
vary – cheap subscriptions of a few pounds a year may tie you in to using one particular
registrant’s services for a certain period, so check the small print.

Domain names and the law
If you do find that your chosen domain name, or web address, is already in use by
another company or organisation, you might want to visit the Nominet site, offers
some general advice on the relationship between domain names, intellectual property
(IP), trademark infringement and the law.

For a more general introduction to intellectual property law, read Iain Standsfield’s
  expert article on the Design Council website.

Choosing a hosting company
You’ll need to find a company that will host your website’s content – this could be the
same company you bought your domain from. Pick your package carefully; find
testimonials from other companies or friends or frequent a site like for tips.

Many hosts will provide you with the option of choosing a cheap, ‘beginner’ package
that provides you with proprietary website building tools – these have moved on in
recent years, but are not recommended for businesses. They will often use bloated,
non-standard computer code, and final results can tend to look a little dated. As a rule of
thumb, if the package allows you to add databases such as MySQL, then they’ll be
more flexible.

Most companies will provide shared hosting services, which means your website will be
situated on the same server as many others. Your visitors won’t know the difference,
but it may take a little longer for your pages to load if all the other websites are popular
too – so check how many other websites will be hosted on the shared servers.

A dedicated server does away with this problem, but costs more and requires more
technical maintenance.

Another thing to consider when buying a hosting package is how much website traffic
you are expecting. Each of your visitors will download a certain amount of data from
your site – if your site has a lot of images or if you plan to host video on your site then
you’ll probably need a package with a higher bandwidth limit.

In most cases though, a 1GB monthly data transfer limit should be enough for most
companies’ needs.
Tools of the trade
Before designing your site, it’s worth outlining some of the more commonly-used
content management tools that you can install on your site. These are all free, reliable
options, and you shouldn’t run into any problems if you keep the sites patched with the
latest security updates. Visit to play with different types of
systems before you install.

The publishing platform Wordpress or the content management system Joomla!
(, are flexible and professional-looking options. They allow you to
keep your website looking consistent across all pages. You can also update all your
content via a web browser, rather than work on your website offline and upload the files
to your host later.

If you want to add a forum, the free phpBB bulletin board system is a popular option,
while vBulletin ( is a relatively inexpensive paid-for package.
Sites like   Blogger also allow you to post blog entries direct to your website without
the need for specialist software installed.

If you want to add e-commerce functionality to your site, osCommerce is the most
popular option. Small businesses can also apply for a merchant account at WorldPay
( if you want to securely accept payments online

Building your site
When determining how your site should look, use the same principles as professional
web design agencies would. Look for feedback from the end-user as early as possible,
and structure the site around their needs. Interview them about what they want out of
your site. Be inspired by the designs of larger, successful websites.

A handy guide on best practice web design, which includes hints on planning, usability,
visual aspects and site navigation, is available from the Business Link website.

Maintaining your site
Make sure your website is routinely backed up – this usually involves making a local
copy on your own computers or backing up the database files.

In the UK, all companies must state their full registered address in the ‘About us’ section
of their site. It’s also mandatory under the Disability Discrimination Act (DDA) to make
your site accessible. For more, see

Evaluating results
  Google Analytics is a free tool that lets you assess how popular your website is. By
putting a small piece of code on the pages you want analysed, you can see how long
people spent on your site, how they got there (the search terms, for example) and the
most popular sections they visited.
A free Design Council resource for small businesses

Glossary of website
design terminology
When liaising with your web designer, you may
encounter some technical terms or buzzwords. This
glossary may come in handy as a quick reference.

Optimising a website so that it can be used by people with disabilities. For example, a
text-only version of a website will make it easier for a visually impaired person to listen
to its content using special text-to-speech software.

A regularly-updated online journal, with timely links to other blogs or websites of

The software used to view websites, such as Microsoft Internet Explorer or Mozilla

Cascading style sheets (CSS):
Web pages of computer code that help dictate the style of a website (such as the type
of fonts used for various sections).

Content management system (CMS):
A web-based way for people without extensive technical knowledge to update content
on their websites.

Database-driven sites:
A site that uses this technology is more dynamic than flat, static-sites, as certain
changes to content and design can instantly be applied across the entire website. A
popular type of database technology is MySQL (pronounced ‘My sequel’).

Domain name:
Your website address (such as

The buying and selling of goods and services via the internet. Examples include
Amazon, or
Eye tracking:
Technology that tracks where people’s eyes travel across a screen, used to optimise
website design.

An online message board that allows visitors to create conversation ‘threads’ and reply
to other messages.

HTML (HyperText Markup Language):
The underlying computer code used to display websites.

Hosting company:
The organisation that stores your website and keeps it online.

A fictitious character that represents a typical member of your target market. Your
persona’s biography will include information on their likes, dislikes, interests and so on.

Short for picture element. The smallest element of an image. Graphics are often
measured in pixel width.

RSS (Really Simple Syndication):
Often known as news feeds. RSS technology allows the syndication of content found on
blogs and news sites. It saves subscribers having to visit each of their favourite sites, as
their latest headlines and abstracts can all be viewed via a special news reader.

Search engine:
A website such as Google or Yahoo! that lets you search other web pages by typing in
key words.

Search engine optimisation (SEO):
The ever-changing art of optimising your website content so that it appears high up in
search engine results. SEO methods should be used so that they won’t impact on your
users’ experience. An experienced SEO agency will know which techniques may also
be frowned upon by search engines.

Social network:
Websites like MySpace and Facebook that make it easy for like-minded people to make
friends, and create and share messages or other content with them.

A key description applied to a piece of information such as blog entry, or image, for

Unique sessions:
The measure of individual visitors to a website, as opposed to how many separate web
pages they viewed.

How easy a website is to navigate – how easy it is for people to find what they are
looking for.
User-centred design (UCD):
Design process that focuses on identifying and meeting the needs of end users (of a
website for example).

Web 2.0:
The latest generation of websites whose technology makes it easy for users to create
their own content. Examples include the social networking site Facebook and the photo-
sharing site Flickr.

The World Wide Web consortium, a group that develops and agrees on technical web

See blog.

A visual reference point that outlines where the main design elements will be placed on
a website. It may be as simple as a sketch on paper, or designed in something like
Microsoft Word.

Exensible Markup Language. Computer code that describes how data included on a
web page, document or other file is structured (as opposed to how it’s displayed). This
allows particular content to be intelligently used by other websites or applications.
A free Design Council resource for small businesses

Getting a great website:
case studies
The Atlantic Hotel
The Atlantic Hotel in Jersey is a member of the Small Luxury Hotels
of the World (SLH). It has won awards for its food, accommodation
and service and felt it needed to create a website that matched its
reputation for quality.

Managing director Patrick Burke says its appointed web design
agency, Fortune Cookie, provided it with a detailed proposal of the
project’s process from start to finish.

The key tasks agreed for the website included:

—   Develop a website that reflects the brand positioning of the hotel
—   Promote online reservations
—   Use the Small Luxury Hotels (SLH) internet booking engine
—   Ensure that the site is optimised for search engines
—   Allow staff to independently update certain sections, including restaurant menus
    and offers
—   Allow for prominent sections for the Michelin-starred Ocean Restaurant
—   Display high-quality photos

 ‘The proposal gave us certainty in terms of cost, which
was agreed in advance, and timescales as it was
important to the business that the new website be
launched in time for the coming season,’ says Burke who
thinks the agency has done a ‘fantastic’ job.

See for yourself
Explore the redesigned Atlantic Hotel website at
Newmarket Racecourses
Newmarket Racecourses desperately needed to restructure the
massive amount of content in its site in a way that would appeal to

Previously it did not have enough control over the website’s content
and it ‘was also difficult to navigate around, so it wasn’t user-friendly
for our customers’, says Gaynor Haxby, marketing manager for
Newmarket Racecourses.

‘We wanted our site redesigned obviously to overcome these issues, but also with an
aim of making it the best racecourse site in the country.’

The Newmarket Racecourse brand covers two racecourses, each with its own unique
identity, brand and personality. ‘These needed to be conveyed to the site without
confusing the customer,’ says Haxby.

Newmarket also offers conference facilities and evening entertainment, but was unable
to promote events effectively on its old site.

The old site had presented visitors with a choice between the two courses on the home
page. ‘But at this point the customer would not always have understood that there are
two courses, or which of the two they were interested in, so it caused confusion and

Newmarket’s design company, Precedent, worked out a strategy to segment the site
into Spring, Summer and Autumn. The seasonal approach means that customers can
quickly see what is happening at a glance, and the company’s extensive image library is
used to full effect.

The content management system put in place also makes it
easy for Newmarket to change the look of the site depending
on what it’s promoting, and the time of year.

See for yourself
Explore the redesigned Newmarket Racecourses website at
Kent Brushes
When Kent Brushes, the world’s oldest brush maker (est. 1777),
needed to refresh its brand and relaunch its website, it looked
carefully for a small British company who would give the new site a
personal touch.

Ultimately it chose BlackOrange, a small web design company in
Leeds. ‘BlackOrange was not some faceless corporation that
chucked together a website and then sent us a bill,’ says Ben Cosby,
creative director for GB Kent and Sons.

Kent Brushes knew it needed outside expertise to create a new brand identity that
showed how it could move with the times. After all, it has acquired many logos and
styles that have, quite literally, evolved over hundreds of years.

‘We wanted to project a cutting-edge, fashion-led persona whilst retaining our long-
established traditional heritage. Quite a tricky task to deal with, but one we feel
BlackOrange completely mastered,’ Cosby says.

Kent Brushes was impressed that BlackOrange knew the company was in need of a
rebrand by the time they had their first meeting. Its image needed a modern makeover,
so as part of the site redesign a whole new identity for the Kent Brushes website and its
products, which are all available to buy from the site, was created.

Now, the site depicts galleries of beautiful, trendily-coiffed models brandishing
hairbrushes. There is now also an online store.

Ultimately, the success of the Kent Brushes site can be measured in hard sales. But it’s
not just about making money. ‘It was also as much about the company’s projection in
the eyes of consumers,’ says Cosby. ‘The world we live in today is so different to the
world we lived in just ten years ago. Our product is beginning to be seen as a fashion
item and not just a necessity for grooming one’s hair.’

By presenting brushes in a fashionable light, consumers and
the hair and beauty industry are now looking at Kent Brushes
with fresh eyes – and new business opportunities have come
about from the strength of the new site and brand, says

See for yourself
Explore the redesigned Kent Brushes website at

Shared By:
zhaonedx zhaonedx http://