Does your organization need a website? Do you have a website that's badly in need of an overhaul? Depending on the size and needs of your organization, you may need professional help, or you may be able to design the site in-house. This article will help you understand the key steps that go into the web design process and what sort of resources you'll need for each step.
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.
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 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:
- Who are you trying to reach with your website, and what behaviors are you trying to encourage? Once you've answered these two questions, ask yourself if a website is the best way to reach your goals, and look at your budget and your staff resources.
- Can you maintain and update the website 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 one that's fancy, broken, and out-of-date.
- Will you handle the project internally or hire a web design firm? If you're leaning toward 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 design (or redesign)? Before you move forward, someone with budget authority should commit to funding it.
- Will you use a content management system (CMS) or a static, HTML-based website? If you're not sure what the difference is, see
How Websites Work. For an authoritative look at the major CMSes used by nonprofits, see Idealware's guide,
Comparing Open-Source Content Management Systems.
- Will you host the website yourself or use a web hosting company? Your options range from basic shared hosting, which costs between $5 and $25 a month, to dedicated, managed servers, which can cost thousands a month.
- How will your target audience find the new site? A beautiful, functional design doesn't help your constituents if it's difficult to find. 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 in the design process. SEO can affect the software you work with as well as the way you create content for your site. If this sounds overwhelming, you can hire an SEO specialist.
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.
- Gather all the analytical and statistical information you have about your current website. 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 Cooperative Approach to Web Design.
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.
-
Quality assurance (QA) testing: QA 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 ones. For example, 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 website; 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 because 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: Websites 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 available 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 Website 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 are often divided as follows:
Project-Related Roles
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.
-
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 website.
-
Web developer: A web developer takes the plans and layouts from the web designer and creates an actual website or web-based application. Web developers usually have a strong understanding of web server software, databases, content management systems, and other web applications. They also have experience with standard scripting languages (PHP and Javascript, for example), style-sheet languages (such as CSS) and markup languages (such as HTML and XML).
-
Information architect: For large, complex websites, 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.
Ongoing Assignments
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 website, 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. They might help you troubleshoot some generic issues, but 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 website 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.
Further Resources
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.
