If your organization is building a new website 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 website. 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.
Websites 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 website will always be small and fairly static, you still need to do some planning, but some of the steps recommended in this article will be more work than you need to do. On the other hand, if your site is large, the content changes frequently, or you have complicated web-based applications, the questions below are particularly 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.
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 can 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 are high-level questions, but it's important to raise them early in the process:
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.
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 incentive 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 website 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 website, 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 website 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, it 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 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 to implement if the developers had known about it early in the process. 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 misunderstandings later on, all of the major stakeholders should sign off and indicate their approval before implementation begins.
6. Implementation and development: After everyone has a chance to study the design documents and sign off on them, your web developers start to create the website. 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 that 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 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 website, 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.
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?
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 are often divided as follows:
For the most part, the assignments below begin and end with the design (or 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.
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.
For more information on the process, skills, and resources that go into designing a website, see A Nonprofit's Guide to Building Simple, Low-Cost Websites; A Cooperative Approach to Web Design; and How Websites Work.
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.
If you want to dig deeper into the art and science of web design, A List Apart, Smashing Magazine, Boxes and Arrows, and the Web Developer's Handbook are all good places to start.
Thanks to Chris Nielsen of Nielsen Technical Services for his review and suggestions.
Image: Web design, Shutterstock
Join today to access donations and discounts for your nonprofit or library.
Already a member?