Designing for the Web

Chapter 10

Putting it together

Ideas. They're at the heart of every creative process.

Case Study for a gardening website

A client has come to you with a proposal to redesign a popular gardening website. The website sells gardening products – everything from plants and tools, to seeds and lawnmowers – a one–stop–shop for every gardener's needs.

You've been tasked with generating ideas for the project and presenting your findings to the client. So, where do you start?

The project team and client team

The first thing to do is establish roles and responsibilities in both the project team and the client team. Ensure you have representatives from most areas of the development process: Design, Client Services, Technical, IA/ Usability, and Strategy. If you're part of a small business, then this team could just be you, the client and some of their staff – that's just as good. Remember, the most important thing at this stage is to have everyone's buy–in to the process – it will come in really handy further down the line when you have to present the ideas.

Gathering research

The initial phase of this project is to gather research – not commission it. First of all, try and get your hand on anything related to the project. Spend time consuming the media that the customers of this site will – magazines, tv shows, direct mail and catalogues, packaging and Point of Sale materials – anything that will give you an insight into the gardener's world. This is particularly important for the designer in the team. The other members can gather the materials, but you will begin to make connections and have ideas almost immediately.
Next, you should try and work through any existing quantitive research the client may have to see if you can establish any trends. Look at referrers, user journeys, demographics and segmentation. If the client has any focus group findings, get hold of it, even if it's quite old – it could still have some bearing on the new website ideas.
If you can, interview some gardeners. Get a script prepared with some carefully considered questions. You can use a market research agency to gather together some gardeners, (called a ‘sample’). They will ensure the sample accurately represents the target audience of the website.
Now is a good time to audit the existing content of the website. This is the beginnings of an Information Architecture task, but also has relevance to the visual design and branding, and the content ideas of the new site. If it's a redesign, you need to know what you're redesigning.
As this is a gardening site that sells gardening stuff, then the core proposition of the site is to sell products, over the World Wide Web, to its customers. The other stuff on the site is to drive traffic into that process. Currently, this site is just an online catalogue plugged into a payment gateway – it's about selling products. However, the client has indicated that they want to add more value to the website, to retain existing customers, and pull in new customers. As the website is shifting its focus away from just selling things, then we need to establish 1, What market is it moving into and 2, Who are the competitors in that market.

A competitor audit

A competitor audit is still a data gathering process. You start by examining the competitions brand, product offerings and key messages in the marketplace. What's great about using the World Wide Web for your research is you can actually experience the brands and service of the competitors, rather than just gathering visual material. A competitor audit can be as detailed as you need it to be to build a complete understanding of the business and its place within the market. For this website, we've established that there are three main competitors: The BBC Gardening website, The Royal Horticultural Society website, and its biggest commercial rival, Crocus.

Stick it all up

This is where your project starts to resemble a crime case in a classic 70's cop drama. Stick everything you have on a wall. Write down key phrases of research findings, scraps of paper to indicate visual styles, printouts of the competitors website – everything you have so far. Make sure they are just small chunks of information though as these are easier to trend – you don't want reams of paper on the wall. Step back and try and spot the trends. There may be content trends, visual trends or branding trends. Try and identify some opportunity areas or insights. For this website, we've established the following insights gained from the research.

  1. Relationship between gardening and cooking
  2. Organic, sustainable gardening
  3. Gardening in small spaces

The next step is to write an idea brief for each of these opportunity areas:

  1. How do we use the relationship between gardening and cooking to sell more products?
  2. How can we influence our customers to be more organic and sustainable?
  3. How can our customers buy the right products for their small gardens?

These idea briefs are the springboards to be used in our ideas session.

Idea Development

Gather the team together – the project team and client team if you can – and work through an ideas session using the running order described in the previous chapter. Once you have your ideas recorded, you need to shortlist them. Try and get them down to three ideas for each idea brief. That will give us nine ideas to run with. Next, we need to refine this list to just three ideas – one for each idea brief; and answer the question they pose. For the sake of this example, we'll use an idea in response to the first idea brief: How do we use the relationship between gardening and cooking to sell more products? The idea we came up with for this was to introduce an editorial element to the website. Have celebrity chefs write articles and endorse gardening products and tools.

To further refine this idea, you can use a great tool for this called AN. A.B.C.

AN stands for Audience Need. Who is this idea for? Will they want it, or use it. Ideally, are they crying out for it?

A stands for Approach. This is about implementation. How are you going to do it? You really don't need to get completely bogged down in the nitty–gritty of this just yet, but an overall plan would be good at this stage.

B stands for Benefit. Why should it be done in the first place? Will there be a competitive advantage? Will you be first to market with this idea?

C stands for Competition. What will be your place in the market?

Going through this process should give you a much clearer picture of your idea.

Creative Brief

So, you have your three ideas. They've been dreamt up by the project team and client, so everybody should feel ownership of the ideas. Next, the designer should write a creative brief. This document details the creative requirements for the project. So, for our idea, the creative brief could include:

  1. Produce a branded content vehicle for the new celebrity chefs section
  2. Document proposed user flow with new content
  3. Establish a new design based on the visual research associated with cooking
  4. The important thing to note here is that the creative brief is leading the design team down a road based on the ideas. The ideas were based on insights from the research.

More from this part

Back to Table of Contents

Download the book

Download your FREE copy of Designing for the Web.