EPN recognizes the importance of a usable, accessible website containing practical, up-to-date information.
We undertook a design and specification process in order to develop a website that reflected the nature and needs of the organization. This is a process that requires thought and investment of time and effort in order to achieve the desired outcome. We used an external consultant (Heather Budge-Reid of Kirkwood Communications) who had long-term experience of our organization to help lead us through the process in a two-day workshop.
Some of the resources that we used are available here to assist others (and especially EPN members!) in developing successful websites.
From a technical perspective, the EPN website uses the Drupal Content Management System (CMS) to manage our webpages and present them as the EPN website.
Available for download here are a documented 'specification process' as well as the actual outputs of the process for the case study of EPN and further electronic resources. Click on the links below to learn more.
Please download the website specification process document [.doc 110KB] [.pdf 80KB] to assist you in your own process.
A specification is a blueprint of the website, upon which all other aspects are built – form, function, metaphor, navigation and interface, interaction, and visual design. This is the first step when designing a website. A good specification is incredibly effective at saving both time and money in the long run. Everyone – users, developers, designers, writers, and the client organization will benefit from this process.
This short document looks at the development of the web design document and the process of specification and site map development.
A formal definition involves calling meetings with the key players – prepare an agenda and questions in advance. It is a time-intensive process and is very demanding of project management skills.
Once there is agreement from everyone involved, document the goals of the site and publish them. The list of goals is the basis for the web design document.
Start by listing the intended audiences. Then list all the needs and goals of the different audiences. Have everyone rank the importance of each need and goal for each audience.
Scenarios are stories. They tell the tales of users experiencing the site, and they help you and your collaborators visualize the site and its users. Scenarios are also useful in validating the site’s design once it is finished: If the scenarios match up with the actual design of the site, you did something right.
Using the previous definitions of your audience, try to come up with a set of users who represent the majority of visitors. The size of the site and audience determine how many users you will write scenarios for. Usually three to six scenarios are sufficient.
For each user, write a scenario. To get started on a scenario, you need to bring the user to life. Create a character for that user, and give them a name, a background, and a task to accomplish on the site. Use a task from your list of audience needs and goals. Then write a story about how the character uses the site to complete the given task. Scenarios will be important later on, when defining the content and functional requirements of the site.
The competitive analysis can be a project all its own. Don’t neglect the importance of reviewing the competition. If there is not enough time to do a proper analysis, a quick and dirty one will do.
Create a new chapter in your design document called ‘User experience’. Add the audience definition and incorporate the scenarios. The competitive analysis itself should be included as an appendix. Again, get sign-off from the organization.
Now that it has been established what the site is going to be about and who it is for, it is time to pinpoint what it will contain. The aim of this part of the information architecture process is to gather the pieces for creating the structure and organization of the site.
There are two key questions:
In order to harness all the ideas about how the site will work, create a list of the content and functional requirements. Then reach a consensus on how this content will be grouped and labelled. A side effect of this process is to create a content list or inventory, which is the basis for the site structure.
When it is possible to decide on the final groupings and names, use them as the basis for defining the major sections of the site and the names of each section. This is the basis for the site structure.
Create a new chapter in the design document called ‘Content and Functional Requirements’. Include a summary of the content inventory. Add a section about how the content is grouped and named. Add the list of functional requirements with a summary. The content inventory should be included as an appendix to the design document. Remember to publish these results so that everyone can see them.
It is now time to define the site’s structure, which is the foundation on which everything else is built. Without it, the site will be a jumbled up, confusing mess.
After creating a good site structure, everything else will fall into place. It can’t help but do so! A well-designed structure makes it easy to define a navigation system, and the two together make designing page layouts and templates straightforward.
Three types of metaphors are useful to site design:
Organizational metaphors rely on the existing structure of a group, system, or organization. For example, if you are creating a site to sell groceries, your metaphor could be a supermarket, where products are grouped logically by type (canned vegetables, dairy products, cereal, snacks, household items, etc.). Beware that copying the organizational hierarchy of your client organization is not usually a good idea – grocery store customers couldn’t care less about a supermarket’s corporate structure.
Functional metaphors relate tasks you can do on the site with tasks you can do in another environment. Photoshop, a graphics program, relies on a lot of functional metaphors: You can figuratively ‘cut’, ‘copy’, and ‘paste’ graphics on a computer – as though you were using real-world scissors and glue to build up a picture.
Visual metaphors are based on common graphic elements familiar to most people in a culture. If you are designing a music site that allows users to play songs, you might want to use the traditional ‘start’, ‘stop’, and ‘pause’ icons found on CD players everywhere.
Finally, choose a metaphor or a rationale for the site’s structure. Remember, no metaphor is perfect. The overall site might not be explainable as a metaphor, but perhaps the navigation system (or smaller subsets of the site) can be.
Get sign-off for the site architecture and set this in stone (meaning that it cannot be changed later in the design process!) as much as possible.
Many people have a hard time seeing something like the site structure listing and translating it to the way the site will work. Architectural-style blueprints can help. Here is an example: [please refer to the downloadable document]
Architectural blueprints are visual representations of the site structure. They are diagrams showing how elements of the site are grouped and how they link or relate to one another. EPN used the ‘Organizational Chart’ feature provided by Microsoft, accessed from within Microsoft PowerPoint.
Defining the navigation system for the site solves the problems of:
A global navigation system, which appears on every page of the site, enables users to quickly jump between sections. If at all possible, try to limit the number of global navigation elements to between five and seven. Another good idea is to incorporate the branding of your site – the company logo – into the global navigation as part of the link back to the site’s homepage.
Local navigation can take a number of forms. It can be a list of topics, such as those found at Yahoo!, it can take the form of a menu of choices, or it might be a list of a few related items.
Compile the architectural blueprints and add them to the design document. Document the global and local navigation schemes. As always, publish these results so that everyone can see them.
We are now ready to work on the visual design, which is often the most satisfying aspect of site design. One of its main purposes is to provide users with a sense of place. They need to know where they are on the site, where they have been, and how to get to where they want to be. A good site structure combined with an effective visual design enables users to construct a mental map of the site.
The goal is to take the site’s structure and map it onto the visual design. A number of tools are useful in creating the design. The first step is to make layout grids that define the structure and organization of the site, as it will appear on a page level. Then design sketches will establish a general look and feel. Layout grids and design sketches together lead to page mock-ups, which in turn lead to the construction of web-based prototypes.
At this point, you’ll need the help of graphic designers, art directors, and creative directors, as well as your production staff.
Layout grids are templates that describe Web pages. Content – the focus of every page – requires prominent placement. You’ll need to block out space for global and local navigation and integrate other aspects of the site that may not be part of the site structure. The company’s brand must be present on each page. Advertising and sponsorship deals should be incorporated into the design, if required. Here is an example of a layout grid: [please refer to the downloadable document]
To get started, take the site structure listing and make a list of all the possible page types. Individual pages within the site should be very similar in form across all the major sections. Review the content inventory, then try coming up with two or three generic page types. You’ll start by designing these and then use them as the basis for all the other page types.
To begin, break out your sketch pad or favourite graphics program. Create a rectangle representing the page, and block out the elements of your design. Since content is the most important element, start with that – even though it’s a little tricky, since you won’t yet know what else will be on the page. Several other elements must be considered: branding, advertising and sponsorship, navigation, page titles, header graphics, and footers, which include copyrights.
Branding plays a prominent role on every page because it informs users that they are still on your site. A common place for the branding is in the upper left-hand corner of a page.
Advertising and sponsorship can be integrated in a number of ways. Perhaps you have a full-sized ad banner (typically 468 by 60 pixels) on every page. Do you put it at the top? Do you put it under the title of each page? How do you integrate sponsorship? Is sponsorship integrated into the graphics headers on each page? Is there a small sponsorship logo at the bottom of each page? These are all questions you need to answer.
Finally, navigation also has to play a prominent role. Global navigation must be consistent across every page of the site. Local navigation systems can change, depending on the content, but try to be as consistent as possible.
This is an iterative process. You will need to revise the layout grids several times. You will probably want to do two or three different styles for the layout, if you have time.
Design sketches are used to establish the look and feel of the site. They can be integrated with the metaphor or site structure rationale, but this isn’t always necessary. Often, they are done concurrently with the rest of the information-architecture process, so you may already have the design sketches worked out and approved by the client.
The sketches don’t necessarily need to represent structure or organization. However, the graphic designers do need to know the size of the graphics files, as well as any technical constraints.
The next step is to create page mock-ups, which represent the actual site, by integrating the design sketches with the layout grids. These should be as close to the actual pages as possible. Use your favourite graphics program to break up your sketches. Try cutting and pasting the pieces over their respective parts of the layout grids. Another option is to build the page mock-ups in HTML, using the pieces of the design sketches as the graphics.
The page mock-ups are the basis for a Web-based prototype or, if your site is small enough, the basis for building the actual site. Page mock-ups need to be approved by the client, although it may be sufficient to have approval on the site structure and design sketches in order for you to move forward with the prototypes.
You have now completed the steps in shaping the information architecture for your site! You have all the materials you need to construct a prototype, and everything else should fall into place. Before you dive into prototyping, add one last entry to your design document.
You are almost done. You just need to document the visual design of the site. Create a new chapter in your design document called ‘Visual design’. Document the layout grids, and be sure to include the diagrams you made. Compile the design sketches, and add those to the document, as well as the pictures of the page mock-ups. Include snapshots from the web-based prototype, if you can. The design document is now complete, providing a thorough description of the site’s design. It will be useful in constructing the site, for adding content, and in revising the site when the time inevitably comes.
As the EPN staff and design team went through the website specification process workshop, we developed a specification document (or design document) that captured what we had decided along the way.
You can download our documentation to see for yourselves how we arrived at the design for the EPN website.
Download the website resources document [.doc 39KB] [.pdf 28KB].
Covers all aspects of web projects for NGOs. Metadata is covered under menu 'Creating Web Style Guides and Product Specifications'. Also see under the 'Managing Content and Workflow' menu for outsourcing and newsletters, and the useful 'Managing Web Site Redesigns'.
(http://www.cabinetoffice.gov.uk/e-government/resources/handbook/html/htmlindex.asp)
British Government web development guidelines. Slightly technical in places, but does cover all the issues.
(http://www.itrainonline.org/itrainonline/english/web_development.shtml)
Excellent online learning resource centre, providing some courses on the site and lots of reviewed links on a range of topics.
(http://www.webstyleguide.com/)
Very comprehensive guide to the complete web design process. This is an electronic version of the published book.
An all-round resource, mainly for technical users and programmers but includes some very useful documents in the ‘Design’ section of the ‘How-to’ library.
(http://www.google.com/analytics)
An online service to monitor traffic and visitors to your website. Powerful, flexible, and free. Do read the help pages, especially regarding monitoring what documents have been downloaded, as these are handled differently from normal web pages.
APC is an international network of civil society organisations dedicated to empowering and supporting groups and individuals working for peace, human rights, development and protection of the environment, through the strategic use of information and communication technologies (ICTs), including the internet.
(www.benton.org/publibrary/Practice/Community/assumptions.html)
Before you start planning your own virtual community, read this article by community builder Victoria Bernal to learn about what an online community can and can't do for your organization. See also Victoria's list of additional community building resources (www.benton.org/publibrary/Practice/Community/communitytips.html)
(www.emoderators.com/moderators.shtml)
An annotated list of articles and other materials to help you set up, maintain, and have a successful experience with online dialogue.
(www.onlinecommunityreport.com)
A twice-monthly email report on current events and trends in online community building. The report includes information on jobs, events, software, and legal issues related to online communities.
(www.soundpartners.org/topics1983/topics.htm)
Benton's Sound Partners Program supports partnerships between public radio stations and local organizations that are working together to educate and stimulate discussion about health issues in their communities. The Web site's toolkit includes checklists, worksheets and partnership assessments.
(www.fullcirc.com/community/communitymanual.htm)
Maintains a rich collection of resources aimed at helping online community builders stay informed on current trends, and obtain technical assistance and advice.
While this book, initially published in 1981, is aimed at helping consultants be more effective with their clients, the strong advice provided throughout can help any client/vendor partnership set clear expectations and handle “relationship” obstacles that may be encountered during especially the early phases of a technology initiative.
Introduces nine essential strategies for creating true community online.