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
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.
Wireframes
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 labelled 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 associations.
‘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.’
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 timelines.
‘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.
‘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!’