If your organization is building a new Web site from scratch — or updating an existing one — you may need to rely on professional help when it comes to design and implementation. The following guidelines can help you plan and design a polished, functional site that meets your organization's needs.
This article focuses on the high-level management and planning decisions you need to make when you design or re-design your Web site. We'll discuss some of the major phases of a design project, some of the lingo and jargon you'll encounter and the tools and skill sets you might need
Web sites are especially prone to scaling problems. In other words, a minor detail that's easy to overlook in the early stages of the Web design process can turn into a major problem that takes weeks to fix when the site starts to grow. If you're certain that your Web site will always be small and fairly static, you still need to do some planning, but some of the steps in this article will be more work than necessary. On the other hand, if your site is large, if the content changes frequently, or you have complicated Web-based applications, the questions below are more likely to be relevant. By working slowly and in stages, you decrease the chances that you'll make a major mistake that will haunt you down the road.
Steps in the Web Design Process
If the steps described below seem a bit overwhelming, remember that different projects follow different patterns. If your site is small, you can skip some of the steps below or spend a minimal amount of time on them. However, large design projects become overwhelmingly complex and chaotic if you don't plan carefully.
1. Preliminary conversations: Start by talking to colleagues, board members, clients and other stakeholders about the intended audience and desired outcomes. These will be high-level questions, but it’s important to raise them early in the process:
- Who are you trying to reach with your Web site, and what behaviors are you trying to encourage? Once you've answered these two questions, ask yourself if a Web site is the best way to reach your goals, and look at your budget and your staff resources.
- Can you maintain and update the Web site you're envisioning with your current staff and volunteers? If not, scale back your plans for now. A simple but well-maintained site is better than a one that’s fancy, broken, and out-of-date.
- Will you handle the project internally or will you hire a Web design firm? If you're leaning towards the latter, use these early conversations to solicit the names of trustworthy, well-respected Web design companies.
- How much money do you have for this project? Can you get a grant for the redesign? Before you move forward, someone with budget authority should commit to funding this.
- Will you use a Content Management System (CMS) or a static, HTML-based Web site? Idealware has several good articles about choosing a CMS, including A Bird's Eye View of the Content Management Landscape.
- Will you host the Web site yourself, or use a Web hosting company? Idealware reviews the available options in Comparing Open Source CMSes. Your options range from basic shared hosting costing between $5 and $25 a month to dedicated, managed servers costing thousands every month.
- How will your target audience find the new site? A beautiful, functional design doesn't help your constituents if it isn't findable. You can address the findability issue through Search Engine Optimization (SEO) techniques, as well as other forms of online and offline marketing. Be sure to address SEO and marketing early on in the design process. SEO can affect the software you work with (e.g. which CMS) as well as the way you create content for your site. If this sounds overwhelming, you can hire an SEO specialist. Also, Grassroots.org specializes in matching nonprofits with SEO volunteers, though you may have to wait a bit longer for a suitable match. If you'd like to learn more about SEO, check out this Beginner's Guide to Search Engine Optimization. Network for Good's Learning Center has a lot of great articles about online marketing and SEO, such as this article about Driving Traffic to Your Web Site and 10 Top Tips to Make Your Web Site Search Engine Friendly.
- Gather all the analytical and statistical information you have about your current Web site. This data will help you measure the success (or lack thereof) of your new site. In other words, how does the traffic on the new site compare to the traffic on the old site. For more information, read A Few Good Web Analytics Tools .
The outcome of these initial meetings is a project plan and/or a request for proposals (RFP). A project plan usually includes a high-level description of the project, a timeline, a budget, a description of deliverables and outcomes, and a definition of the roles and assignments. An RFP has similar information, but it’s intended for outside companies that want to bid for your business, so you should exclude the description of roles and assignments and include information about your organization and its goals.
2. Assemble your team or hire a Web design firm: At this point, send your RFP to a handful of Web design companies. Ask to see examples of their previous work, ask for references, and meet with the best candidates in person if possible. Remember that a response to an RFP isn't a binding agreement. Once you've picked a company, work with them to draft a Statement of Work (SOW). This is a formal, signed agreement that outlines the expectations and deliverables on both sides, as well as price and payment information. Network for Good has an interesting article on Choosing a Web Design Company or Consultant that summarizes a recent thread on Progressive Exchange.
Grassroots.org, Taproot, Volunteer Match, and other organizations may be able to help you find free Web design expertise. Grassroots.org in particular specializes in matching nonprofits with suitable Web design volunteers (check out their gallery of volunteer-designed sites). Of course, when you're in a hurry paid designers usually have more incentives to meet deadlines than volunteers. Also, when you work with a volunteer, you're still responsible for all of the communication and planning steps outlined in this document (though you might be able to get free project management advice through Grassroots, NPower, and other volunteer matching organizations).
If you have the staff resources to handle this project in-house, start assigning the various roles and tasks outlined in your project plan. See below for more information on the various roles and skill sets associated with a Web site design project.
3. Inventory existing content and plan for new content: Assign someone to look through newsletters, file servers, brochures, listserv postings and marketing materials for content you can repurpose. If you have an existing Web site, assign someone to review and categorize the content, looking especially for pages that are outdated, inaccurate or incomplete. Even if you have a lot of existing content, the launch of a new or redesigned Web site presents a good opportunity to evaluate the quality of your external communications. If you don't have enough articles and stories to populate your site, make sure you have a budget and timeline for creating, editing, and evaluating content. In other words, don't wait until a week before launch to start writing.
4. Gather requirements: Although you should have some idea by now of your overall goal, once you have a team in place, you need to hold another round of meetings and conversations. If you've hired a Web design firm, they should facilitate these discussions and ask individual departments and stakeholders what each one hopes to accomplish with the new site, and what features they want to emphasize.
To stimulate brainstorming, designers might show you a portfolio of sites and graphics that they admire and ask you which ones you like the most. They might show you early versions of the design documents described in the next step. Finally, the design team often facilitates group exercises such as a card sort to draw out new ideas.
You should also bring your own examples to the table. Try to be specific about what you like and dislike about the examples you're reviewing. If you have an existing logo, an existing color palette or organizational design guidelines, communicate those clearly to your Web team. Let them know your overall design and communication philosophy if you have one.
Gathering feedback from stakeholders is an ongoing process that continues up to and beyond the site launch. However, let your colleagues know that any suggestion they make in the early stages has a much higher chance of getting implemented than the features they request just before the site goes live. Once the site is nearing completion, a major change might require weeks of extra work, when the same feature would have taken days or hours if the developers knew about it early on. The design documents and prototypes described below are an essential part of this early feedback loop because they're easier to create and modify than the site itself. You can even do some simple usability testing on them.
5. Create design documents: At this point, the Web design team usually creates some prototypes and mockups to give stakeholders something concrete and specific that they can respond to. As mentioned previously, it’s cheaper to modify your site during the initial design phase than during the implementation phase. However, it's not free. Asking your team to provide five sets of design documents for you to pick from, each with a different design and layout, is expensive and time-consuming. Asking them to revise their designs endlessly is also expensive.
Good Web design firms take this stage of the process very seriously, as should you. They often use a formal presentation to unveil the design documents and explain their decisions. To avoid confusion and misunderstanding later on, all of the major stakeholders should sign off and indicate their approval before implementation begins.
Web designers and information architects use dozens of related tools to convey their ideas to clients. If you're interested, or if you plan on doing the design yourself, this article on Information Deliverables and Diagrams describes some of the standard tools. Also, the Information Architecture Institute has a collection of templates to help you convey your ideas. A lot of these templates require Microsoft Visio, which is a popular tool among Web designers. Old-fashioned paper prototypes are still popular, and they're often much easier to create and modify.
6. Implementation and Development: After everyone has a chance to study the design documents and sign off on them, your Web developer(s) start to create the Web site. Depending on the size of your site, this will take anywhere from weeks to months.
During this stage, you have to strike a balance between too much oversight and too little. You can ask for periodic reviews and usability tests, but too much meddling will prolong the process and increase the cost.
Site development takes place on a testing server which resembles your live production server as much as possible. At this stage, you shouldn't make any changes to your live site.
By this time, you should have answers to the questions asked previously about where your site will be hosted and whether or not you'll use a CMS. Answers to these questions will have an impact on how you develop and deploy your site.
As you approach your launch date, be sure to communicate with any end users who might be affected by the changes to your site.
7. Testing: With any new or redesigned Web site, you will encounter problems. Your site will have bugs, broken links, and features that don't work as advertised. Some features of the site will confuse your target audience. Depending on the size of your site, you should plan on testing anywhere from a few days to a few weeks. There are several testing methodologies, most of which are beyond the scope of this article, but we'll describe a few of the better known techniques.
- Quality Assurance (QA) testing: refers to the basic examination of functionality. Does the site look and act the way you expect it to in all the major Web browsers used by your target audience? If someone enters information into a form and clicks submit, does the data go where it’s supposed to without getting corrupted? Be sure to examine unexpected behaviors as well as expected behaviors. A site often works fine until someone types letters into a field designed for numbers only.
- Usability testing: Usability tests get you as close as possible to the real experience of an end user. You or someone on your Web design team observes the end user as he or she attempts to perform a list of tasks. The user in this situation should be relatively unfamiliar with the site. Also, test your site early and often. You don't have to wait for a nearly complete version of your Web site; you can test with paper prototypes before a line of code has been written. You can oversee usability testing yourself to save money, but do some research as there are a lot of decisions to make regarding the format and structure. Check out Usability.gov and the University of Texas site for more information.
- Vulnerability testing: Web sites are a popular target for viruses, hackers and other malicious Internet dwellers. A vulnerability testing tool will probe your site and report back about any holes or weaknesses it uncovers. This type of security testing should be an ongoing part of your security strategy.
- Stress testing: If you expect a large number of visitors to your site, there are tools out there that simulate heavy traffic. For a list of stress testing tools, open source and commercial, check out the Software QA/Test Resource Center.
8. Launch: After everyone has approved the site, and it's been thoroughly tested, you're ready to transfer it from the staging server to your production server. Back up your existing site so you can roll back if necessary. As you're migrating content and releasing new features, stay in touch with your constituents and let them know what to expect. Finally, submit your URL to all the major search engines so they know it's time to index or re-index your site.
9. Ongoing maintenance, outreach and development: Throughout the planning and implementation process, ask yourself what you're committing to. How much staff time will it take to keep the content fresh and troubleshoot problems on the site?
Staffing for Web Site Design and Maintenance
The roles and job descriptions outlined below fall into three categories. If your Web design project goes as expected, some assignments will only last as long as the project itself. These assignments are the best candidates for outsourcing. Other responsibilities are ongoing. For that reason they usually get assigned to permanent staff. Finally, some of these skill sets are probably irrelevant to you or beyond your means right now. Which roles fall into which category depends on your particular situation, but for small and mid-sized organizations the roles often divide out as follows.
For the most part, the assignments below begin and end with the redesign project, unless you have a large, complex Web presence that changes all the time. If you've hired a Web design firm, that firm will handle most of these assignments. However companies differ in terms of how many specialists they have and the emphasis they place on the different skill sets. Small, one or two person design companies won't have specialists for all the roles described below, but they might still have the full range of experience and skill. Larger companies have more specialists, but that’s often reflected in your bill.
- Web designer: Web designers often handle some or all of the roles described below, but in a narrower sense, designers focus on the creative and aesthetic aspects such as page layouts, color schemes, branding, font selection, and content navigation. They usually have some lightweight coding skills (like HTML, CSS, PHP), but they delegate the heavier programming tasks to the Web developer.
- Graphic designer: In a Web context, a graphic designer might create or select the following: logos, photographs, illustrations, color schemes, fonts, buttons, menus, and any other visual elements on the Web site.
- Information architect: For large, complex Web sites, an information architect works with end users and content creators to develop a coherent, user-friendly content hierarchy, navigation structure and information taxonomy.
- Other roles: Larger Web design firms might have folks who specialize in Search Engine Optimization (SEO), usability testing, QA testing, Web analysis, and other areas.
The roles described in this second list don't usually fall to your Web design firm. In most cases you'll handle these assignments internally because someone has to address these responsibilities on a regular basis. They don't begin or end with the Web design project. If you do outsource these roles, you'll probably outsource to someone other than your Web design firm.
- Project Manager: Even a relatively small Web design project has a lot of moving parts. Assign someone to track due dates, deliverables and expenses. And no matter how much you try to outsource, someone has to choose the right contractors and evaluate their work.
- IT and tech support: If you plan to host your own Web site, someone has to buy, configure and maintain the server, create regular site backups, address security concerns, and monitor the availability and performance of the site. If you don't have an IT staff, or they're overworked, you can pay a Web hosting company to handle some of these regular tasks. For a price they'll handle monitoring, backup, site security, updates and patches, but you still have to know enough to evaluate the services you're paying for. Also, hosting companies won't perform the initial setup and configuration of your site, and while they might help you troubleshoot some generic issues, they draw the line at anything having to do with your unique software and configuration decisions. Regardless of where you host your physical server, you should also consider hiring a full or part-time Web developer as your site grows.
- Subject Matter Experts: Someone in your organization has to provide story ideas and story content. These experts should come from every corner of your organization, but you can also tap into the knowledge of volunteers and partner organizations. As long as you have strong editing skills on staff, your experts don't need to be world-class writers.
- Content managers, staff writers, and copy editors: Content specialists usually split their time between writing original articles and editing articles and news releases created by their colleagues (or outside experts).
- Marketing and Public Relations Specialists: A Web site redesign can be a major event that attracts a lot of attention to your organization, especially if your site now offers services and information that weren't available previously. If you have a marketing or communications team, invite them to the table early and often. Also, as pointed out previously, you have to inform your existing customers about any changes that effect their interaction with your organization.
- Web Analyst: If your site is a major part of your outreach strategy, you'll want to collect information about who's visiting your site, where they're going on the site, how long they're staying, etc. A Few Good Web Analytics Tools provides an excellent introduction to this topic.
How to Plan a Web Site: A Complete Guide offers a great selection of short slide shows about planning a new site, choosing a Web designer, launching the site, etc. Planning Your Web Site from Xavier University outlines a very short, straightforward process for organizations building a small Web site.
If you're looking for some design ideas that you can borrow and modify, Open Source Web Design and Open Web Design both have thousands of CSS templates you can download for free. You can find dozens of similar sites. Some focus on generic CSS templates, while others offer templates for a particular content management system (for example, WordPress, Drupal, or Joomla).
Thousands of Web professionals have written about their design philosophies in blogs, magazines and books. Web Design from Scratch describes current best practices ranging from planning and business to aesthetics and usability to the details of CSS and HTML. Don't Make Me Think is a short, beautifully-designed book about design and usability on the Web, and it’s the standard text for folks who want to learn the basics.
Thanks to Chris Nielsen of Nielsen Technical Services for his review and suggestions.