A Comprehensive Website Planning Guide (Part 1) — Smashing Magazine

webberoDesign0 Comments

As a veteran designer, developer and project manager on more sites than I can count, I’ve identified a common problem with many web projects: failure to plan. As the same issues come up repeatedly in my work, I’ve written this guide in order to help our clients, other designers, businesses and organizations plan and realize successful websites.

Written in relatively non-technical language, this guide provides a broad overview of the process of developing a website, from the initial needs assessment through site launch, maintenance and follow up. It is appropriate for:

Important Note: Throughout the guide, “business” and “organization” are used interchangeably. How you apply the steps in this guide will depend on your role and the relative authority it offers. If you’re leading a web team, it will provide you a more effective process. If you’re less involved with the building process, it will help you understand best practices, the setting of expectations, and allow you to ask more informed questions of web team members — and challenge them if they’re not doing a thorough, conscientious job. Also, because this guide is written for a diverse audience, it uses the language of both “business” and “designer,” and some sections are highlighted for specific project roles. “Designer” refers broadly to the person or team building the web sites.

Also, while this is not a pricing guide, where costs are mentioned, they are in U.S. Dollars.

While you may benefit from applying the ideas within, if you’re building a four-page site for your family reunion or a 5,000-page site for a Fortune 500 company, this guide may be too detailed or way too short, respectively. And since it’s written to be relatively accessible and non-technical, the guide does not address the how-to of writing HTML, using Photoshop, or working in a Content Management System (CMS). Please consult specialized resources for those tasks.

Recognize The Purpose Of Your Website

The purpose of most business websites is to drive sales. While successful sites engage, inform, and educate visitors, their end goal is to convert visitors into leads and leads into customers. In some cases, visitors may purchase tangible or digital products directly from the website, while in others they may engage in some way with the business, eventually purchasing products or services from the business.

If making sales is the end goal of your website, you must always keep this in mind. Too often this key point is forgotten in the quest for design features, boatloads of content and lengthy text descriptions of products and services. Don’t forget the reason you’re building a site in the first place.

If sales are not the goal of your site, determine what is. In most cases, you will still have an action you want site visitors to take: donate, request more information, or volunteer.

Additionally, investing in a website means investing in something that grows with your business. Plan for your website to change over time.

Why Plan?

Planning is essential for most businesses and organizations. Unfortunately, when it comes to websites there is often a failure to plan properly or at all. Sometimes this is due to the ever-busy, dynamic nature of the day to day running of a business — there are so many operational demands that sufficient time is not allotted to the project. Sometimes organizations simply underestimate the time, skill, energy and expertise that goes into building even the smallest website. But often it is because people fail to recognize that planning for the web is just as important as planning for anything else associated with their business.

Your Website Is The Responsibility Of Marketing, Not IT (Information Technology)

Building a website is not a purely technical endeavor. In some companies, especially those slow to recognize the value and importance of online marketing, the website is considered the domain of the IT department (or outside IT resources). This is wrong. Websites are a function of marketing, not IT. The design, structure, and content of your website should be driven by communicators, not technicians. Yes, you’ll need IT to successfully execute the plan of the communicators and keep your site running smoothly. But communicators should be steering the ship. The role of IT in the planning stages and beyond is to help research and support the technology that enables the company’s online marketing goals.

In too many cases, companies are getting in their own way by giving IT authority over their website instead of marketing. In every organization, each department has a specific area of expertise, and it’s vitally important to assign the responsibility for communication to the public to the people who do this best. If you don’t have dedicated marketing resources available to you, spend a little time engaging qualified communicators to help you build your site. Find the right people for each job and then hire them.

The Deck Example

Consider the example of building a deck. If you want to add a deck to your house, you probably won’t call several carpenters and simply ask “How much is a deck?” If you do, the smart answer will be “it depends.” In order to provide you with an estimate, a carpenter will need some details about the project. The more details you provide, the more you work out ahead of time, the more accurate the estimate will be. Of course there is always the potential for things to change during construction, but in general, the adage “measure twice, cut once” holds true for this, and for every other project. A good carpenter will start by asking a series of clarifying questions:

  • What kind of wood? Cedar? Treated? Or do you want synthetic?
  • Where exactly will the deck go, and are there any obstacles to work around?
  • What size and height will it be, and how many levels?
  • Do you want benches, railings, built-in planters?
  • Is there clearance to bring special equipment in to your yard?
  • Do you have Homeowner’s Association (HOA) rules to deal with?

Large preview

Then there are a host of other things for the carpenter to consider: scheduling, building permits, inspection, maintenance, etc. That’s why a smart carpenter will answer your simple question with “it depends.” Without more information, there’s just no way to to know. Obviously, it makes sense to meet with one or more contractors to address the questions above and more. When you choose a carpenter, they should provide a detailed plan of action that you both sign. As they’re building, they should check in with you periodically and discuss any potential snags in the project.

Surely all this makes sense, but consider what the deck project would look like without a clear plan:

“Hi, Jennifer Carpenter, it’s Juan Homeowner. I need a 20X30′ cedar deck in my backyard. I want it built in two weeks.”

“Okay, Juan. I’ll pick up the materials and get started tomorrow. If you have any questions, just see me in your backyard while I’m working.”

Jennifer Carpenter gets started, drilling post holes for each corner of the deck. She assumes Juan Homeowner has secured a building permit from City Hall, since that’s the way most of her previous jobs functioned.

There’s no building permit

As Ms. Carpenter starts framing the deck, she notices Mr. Homeowner has put a large hose reel against his house and connected it to his faucet. Based on where the deck will sit, the hose reel will have to go. But she’s not sure if he will want to move it somewhere else, or have his faucet rerouted so he can re-connect it and attach it to the deck, which is two feet off the ground. She stops building, and plans to ask Mr. Homeowner what he wants to do when he gets home. She waits…

He’s on a business trip for three days.

When he gets back, Ms. Carpenter reaches him by phone. He’s not happy that he’ll have to have his faucet moved, which now adds unplanned expenses to the project. But that’s not Ms. Carpenter’s fault, she’s not the plumber. She’s just putting the deck where he asked.

Once the deck is framed, she starts building a railing for one side. This wasn’t discussed initially, but she sees Mr. Homeowner has small children around and thinks this is a good safety feature. Mr. Homeowner comes home one day and is happy to see great progress on his deck, but then he notices the railing.

  • “What’s this?”
  • “I added a railing to this side, since you have kids. It’s a good safety feature.”
  • “I don’t have small children.”
  • “But I saw them playing in your front yard.”
  • “Oh, those are the neighborhood kids. My kids are in high school.”
  • “Well, a railing is a good feature.”
  • “Yeah, but can you make it shorter, and put a bench next to it?”
  • “I didn’t buy enough wood for a bench, and the railing is already drilled and attached. I’d have to remove and re-cut it. Also, we didn’t talk about a bench.”
  • “Well, I’d like a bench here.”
  • “That will take more time. I won’t be able to get this done by your two-week deadline if we add the bench. Plus, I’d have to charge you for the extra wood.”

What began as a “simple project” becomes a series of headaches due to failure to plan and to communicate. Jennifer Carpenter also has to bill Mr. Homeowner for all the unforeseen issues: for the extra material, for her extra time, and for all the unanticipated tasks that have gone into building this (now) complex deck project.

From a web professional’s perspective, developing a 50-page website for six unique stakeholders is far more complex than building a rectangular deck. Also, a deck is a physical structure built in stages. You can look out the window and see the progress. By contrast, a website has a number of technical and administrative steps which, while incredibly important, are effectively invisible to the business.

A caveat… and the “waterfall” method of development

When I worked at an insurance company, business analysts, part of the IT (Information Technology) department would write project charters — long, painfully boring documents which attempted to outline every possible aspect of a website. I really hated these documents. I preferred to work much more seat-of- the-pants. In part, this was because unlike print material, websites are flexible. Once a printed document has gone to print, its content is not going to change without starting all over again — printing new physical documents. Websites are different. The content in a website will change over time, at will. The idea that every single minute aspect of a website could be pre-planned on paper was ludicrous.

IT departments that handle large projects often use something called the “waterfall” method of development. The idea is that the phases of development flow downward through the steps, toward the completion of the project, with each previous stage effecting the next one. In theory, this isn’t a bad idea at all. But in practice, this can create the side effect of over-specification, of detailing each and every minute part of the project from top to bottom. Absolutely everything is specified, down to the point size of the type, the line length of page headers, and exactly how a simple photo gallery will work. This is my view of the waterfall method: if you’re building a banking application that transfers money in and out of customer accounts, you’d better be sure your code is perfect. When dealing with people’s money — debits and credits — there is zero allowance for error. For projects this critical, it makes sense to specify everything you’re going to do in great detail before writing a single line of code.

However, as I said earlier, websites are flexible. So how do we reconcile the need for clear and detailed specifications with the inherent flexibility of the medium? We can split the difference. By following the process outlined below, we can create a set of content and design specifications that greatly reduce the potential for mid-project glitches, while creating a framework that allows the site to grow with time. In fact, we can plan for expansion, allowing, for example, a news section to handle ten news items or two hundred. When properly implemented in a Content Management System (CMS), a website will allow site editors the flexibility to swap out key photos, change titles, headers, reorder content, etc. — but all within the framework established in the planning stage.

Getting Agile

You may also consider an approach called Agile Development. While primarily associated with software development, Agile concepts can be applied to website creation as well. It can be just as successful as following a detailed plan, but it needs to suit the skills, approach, and temperament of the project participants. Read The Agile Manifesto and consider if this approach is right for your project.

Keep in mind that Agile development can take a little longer (and thus cost a little more) than traditional methods, and if you tend to lose focus, this probably isn’t the best way forward. But for more complex projects it can be a very effective way of building a website. If you decide you want to go this way, make sure to talk to your creative team about their comfort level with Agile. Some web professionals are more at home with this method than others.

The Value Of Paying For Planning, Needs Assessment

Some businesses seeking an estimate for their site will have a general idea of what they want to do and possibly have developed a simple site map or list of pages. Others, especially organizations, will offer an RFP (Request for Proposal). In most cases, none of these items are enough, by themselves, to allow us to generate an accurate proposal. Even in the case of a multi-page RFP, there is often not enough useful detail from which to create a proposal and estimate. If a client just wants a very broad ballpark figure, we can usually do this. But to arrive at an accurate cost, much additional information is needed.

Enter The Needs Assessment

A needs assessment is the process of figuring out where a business has been, where its going, and how to get it there. That’s pretty broad, so let’s break it down.

Please, please, no more RFPs

While created with good intentions, RFPs are often a bad idea both for the issuing party and for web firms responding to them. Business and organizations who are used to the RFP process should realize that for a complex and creative project like building a website, this approach is often inappropriate. (It works just great for more static creative work, like print advertisements, but for flexible digital endeavors, it’s just not effective.) In many cases, asking a web designer to craft a detailed response to an RFP is like asking an architect to create blueprints for a house “so we can see what you would do for us.” This is akin to asking someone to work for free (on “spec”), and such a process can be demanding and unfair.

Worse still, when a business has already chosen a designer, RFPs may be issued simply to go through the motions, pretending to seek competitive bids, giving the appearance that rules were followed. This bypasses the critical needs assessment, forcing designers to invent numbers and timelines without enough information to do so. It is a waste of time and energy.

When RFPs are sent to a large number of designers, the only thing a response indicates is a willingness to respond to an RFP, not that designer’s suitability for the project.

Skipping The RFP, Assessing Needs

Businesses can benefit greatly from a needs assessment. Twenty hours spent on a needs assessment can easily save forty hours of development time during the building of the site.

Discovering the true needs of a business halfway through a project is a recipe for headache, extended development time, cost overruns and missed deadlines. As you’ll read below, failure to recognize and pay for proper planning creates big problems.

Proper planning is an investment in a headache-free development process, and the first step to planning is figuring out what is needed from top to bottom in as much detail as possible. That’s the purpose of a needs assessment, and it’s a vitally important step in developing any website.

What Happens When You Fail To Plan?

  • The designer or developer is forced to make assumptions, which may or may not be correct, as to how certain content will appear on the site. (The way content is displayed effects the way the pages are built, which effects the complexity of development.)
  • The amount of back-and-forth communication about trivial matters can be multiplied many times over. (Clarifying miscommunication takes longer than getting it right the first time.)
  • Backtracking causes delays and missed deadlines. (“Do-overs” often mean that developers are doing the same things twice in different ways.)
  • Work that falls outside the original scope of the project creates cost overruns. (More is more. This is called “scope creep” and can be a serious issue, even in small doses.)
  • Confusion and client dissatisfaction are the byproducts of the shoot-from-the-hip process. (Face it, nobody is happy when things go wrong.)
  • Anything but a simple tire swing.

The end result: a website that falls short of its goals,yields poor ROI (Return On Investment), and disappoints the people it was created to serve.

Needs Assessment

Three important things to remember:
  1. Unless you’re building a tool exclusively for internal communication, your website is not for you—it must meet the needs of its audience.
  2. A website is not a one-time event. It is a flexible, extensible communications tool which reflects, negatively or positively, on your business. For many businesses, it is the key touch point between the business and their customers.
  3. This is where we can potentially start using business-speak, i.e., “assemble your key internal stakeholders.” That’s another way of saying “get everyone together who has something valuable to contribute.”
The site must work in concert with the overall marketing

A website needs assessment may overlap with other efforts and approaches of your marketing department. That’s fine. In fact, established branding and marketing of your business should inform the structure and design of the website. A good website can’t happen in a vacuum. Continuity and consistency across all your marketing endeavors, digital and otherwise, are crucial to the perception that you are professional and that your business should be taken seriously.

We’ve all seen this done incorrectly — a nice website followed by a terrible brochure, or vice versa, and lack of continuity always makes a negative impact. Even if customers/users can’t quite put their finger on what’s wrong, they know something isn’t quite holding together, and they’ll judge the business for it. Most people don’t stop to think “Oh, they must have hired a professional web designer, but just didn’t bother to update their brochure, maybe they’re working on that.” It just feels wrong.

Cost and timeline

Generally speaking, a proper needs assessment will cost between 5 and 15 percent of your total project budget, and take between 10 to 30 percent of the total project time. Of course, this assumes you have determined a realistic budget and timeline for your project. It’s fine if you haven’t — sometimes you don’t know what you don’t know. A good needs assessment can help you figure this out.

The needs assessment: intake

In your intake meeting, you’ll want to address a series of questions. Start with the core ideas, values, messages and offerings of your business, then drill down in to more details.

There are many valid approaches — some very formal and precise, and others looser and more intuitive. In any case, if you’re leading this process, you should make sure you have a set of key questions prepared.

The following comes from a brief we use to learn the basics of a client’s project. In our experience, at least three new questions are generated for each question the business owner answers. If this is an internal company project, you can and should go through the same process, and ask and answer the same questions. The answers might surprise you. Note: the following questions apply to a small business, but can be easily modified to suit a nonprofit, institution or other types of organizations.

  • Mission statement: who are you and what do you do (or substitute one-paragraph company/or description).
  • Why was your company/org created?
  • How would you like to be perceived through your website?
  • What is the single most important thing visitors want from your site? For example: find new products, register for a course, join a mailing list. Note: Try to consider this from the customer’s perspective. This is not about what you want for the company, i.e., more sales, but what your visitors want from the site.
  • What is the single most important thing you want to convey on your site? From the perspective of your company/org.
  • Describe your target audience.
  • Who is your competition? (A competitive review should follow: look at three sites from similar or competing businesses. See where each website succeeds and fails.)
  • Why should clients chose your products or services over the competition?
  • How will you judge if this is a successful project?
  • List three or more websites you like.
  • List three websites you don’t like, and indicate why for each one.

There’s no hard rule for how many questions you should ask, or how long this should take. However, if you finish the process in 40 minutes and there are no follow-up questions, you’re not digging deep enough.

In fact, if you’re doing your job right, each time you go through this process, the questions are going to be different as you tune into the needs of the business, listen to their responses, and identify further areas needing clarification or uncover opportunities worth exploring.

Each business and each project is different.

Keep ‘Em Talking

The intake process is all about the business owner. It’s very important here to listen carefully, take good notes, and keep following threads and tangents if they are yielding useful information. Resist the urge to start offering solutions right away. Keep your focus on learning everything you can about the client’s business, their audience, and message. Solutions come later. You need all the questions to come up with the best answer.

Depending on the amount of time you have for the intake process and the scope of the project, you may want to return for one or more subsequent meetings to explore further. Some clients will resist this, as they are typically focused on the day-to-day challenges of running their organization. They may say they don’t have time. Reinforce that you must thoroughly understand the problem before offering the solution. Whether the website is for a business, nonprofit, sports team or science foundation, it should serve the needs of the client and their audience.

Often the only way to get this information is more discussion. If you still have questions or need more information to make informed decisions and recommendations for the assessment, forge ahead until you’ve got as much information as you need. You don’t want to be a pest, but it’s very important that you stay focused and follow through on every possible thread that comes up in the intake process. If you handle this process with grace and humor, clients will usually understand the importance of this period of inquiry.

Messaging essentials — you must know who you are

Your business probably has a lot going on. Classes, conferences, seminars, workshops, webinars, product demos, charitable work, sponsorships, trade shows. The sheer volume of content and activity within your day-to-day business can be overwhelming.

Since your home page can only focus on so many points at once, it’s very helpful to distill what your business does into a sentence or two. For example:

  • “We make project management better.”
  • “Beautiful, sustainably produced furniture for home and patio.”
  • “Building understanding about the impact of mental illness.”

This is different from a mission statement, though it can be developed from one. When you distill the essence of your business in to a short statement, this can be the starting point for how you present it and can make a huge difference for the creative team as they delve into the soul of the organization and figure out how to best present the business to the world.

In some businesses, key employees or managers hold a wealth of experience that could be helpful to the project, but you may not meet these people right away. It can be helpful to ask the business owner: “Is there anyone else I should be talking to about this?” Make sure you’re not leaving out the one person who can enlighten you and change the path of the assessment.

“Uh, we don’t really know who we are.”

Some businesses, especially those lacking a strong brand, may take some coaxing to reveal who they really are. Probing questions can help. For example, if you ask a business owner who their best customers are, find out why — what makes these customers so valuable, how did they find them, and what are they doing to find more like them?

Wait — You’ve Got No Brand, No Logo?

The value of an established visual identity or brand in the creation of a quality website cannot be overstated. Small businesses often dive in to website creation without paying any attention to branding. Suffice to say, if you do not at least have a professionally designed logo, you have not established a brand. A professionally designed logo is not something sketched on a napkin. It is not a font you found inside of Microsoft Word. The skills required to make a professional logo are very specific and you’ll need a professional with branding experience to do this for you.

What Is A Brand?

  • The visual representation of your business.
  • What people think of or visualize when they hear your business name.
  • The expression of the unique characteristics which represent your business.

Brand Guide

At bare minimum, a brand should have a (professional) logo and color palette. A more complete identity includes:

  • Short statement outlining the mission or purpose of the business and defining its audience.
  • Headline and body fonts.
  • Guidelines for use of photography.
  • Copywriting guidelines.
  • Additional design elements (glyphs, textures, shapes).

Why Your Brand Is So Important

  • It sets the stage for everything you produce — visually and otherwise.
  • It sets you apart from other businesses.
  • It is authentic, a manifestation of the cultural values of what is being represented. If it’s not consistent with these values, it may appear inauthentic (see surf shop vs. bank example, which follows).
  • Speaks to integrity. A reflection of all the things you are.

Why Your Brand Is So Important To Building A Website

One of the first steps in the web design process is to decide on a visual look and feel. Without at least minimal branding, your designer is starting completely from scratch, and essentially has to create a brand identity for your business on the fly. This may or may not be consistent with the image you want to project. Development of your brand needs to come before a website, because the site is an extension of the brand and not the other way around — don’t put the cart before the horse.

My Favorite Example: A Surf Shop vs. 110-Year-Old Bank

Both categories of business have strong identities established to suit both the products and services they offer, and their particular client base.

Large preview

Large preview

Now consider how successful they would be if they swapped brand identities. Would you be drawn in to a surf shop with a staid, conservative font as its visual identity?

Large preview

How about a bank with a laid-back, breezy, casual beach feel?

Large preview

Note: Using the formal, bank-like font for the surf shop isn’t completely terrible, but it doesn’t evoke surfing, and it certainly doesn’t say “fun.”

Proceeding Without A Brand

Inevitably, some businesses simply refuse to invest in a brand or insist that the fuzzy logo they “designed” in 1992 is perfectly suitable as the basis for their $15,000 website. Or they may want to design their site and then paste in a logo at the end of the process. By the way — if the following logo examples look like they took about five minutes to make — you’re exactly right, they did.

Large preview

Large preview

Large preview

Everyone needs to eat.

You will no doubt find a web professional who will gladly take on your project despite this critical deficiency. They might do a passable job on the website despite this major handicap.

Ultimately, however, you’ll have at best a beautiful, modern house on a crumbling foundation and at worst a house that’s barely standing, built in 8 different styles, with windows where the doors should be and vice versa. Yes, a consummate professional can “make do,” but making do will never be as good as doing it right from the get-go. Take a moment and decide whether or not it’s really worth it to move forward with your foundationless house.

Our Fictional Restaurant

To help illustrate brand identity, we’ve created a brand for a fictitious business called New Harvest Restaurant and Wine Bar. I chose this type of business because its easily understandable — everyone knows how a restaurant works.

New Harvest is an upscale business located in a major city. Its customer base ranges from young professionals to older adults with an interest in fine dining. Its goal is to serve quality food with high visual appeal, paired with mid-priced wines from around the world.

We’ve created a detailed branding guide for New Harvest which is available here. The core elements follow.


Large preview


Large preview

Color palette

Large preview

Large preview

We’ll use these elements, along with other brand guidelines, to create mockups for the New Harvest website. Keep in mind that this example is only used to demonstrate concepts within this guide. It is not a real restaurant, and does not represent all the aspects of marketing appropriate to such a business.

Mood boards

Where budget and ability allow, a designer may use mood boards to help establish the look and feel of a website, or the designer may ask the business to create a simple one to get a visual indication of what the business is looking for. Mood boards provide a range of visuals to help establish elements that can be hard to describe in writing. These may consist of textures, images, and font treatments drawn from a variety of print and web sources.

In this example, we’ve assembled a group of images that suggest wealth and elegance. They might be used for a travel website, or something related to luxury sailing or boat cruises.

Large preview

Establish The Brand, But Don’t Provide Design Solutions

While working through the needs assessment, participants may be tempted to suggest design solutions, especially for businesses who have weak or non-existent brands. Resist. A needs assessment will be more effective when focused on problems instead of solutions. You can’t offer a solution until you know what the problem is.

Choosing A Domain Name

Most existing businesses have a domain name. If the business is new, choose the shortest, most easily pronounceable name you can find. As they say about men, or women, “all of the good ones are taken.” That’s the case with domain names, too. You may have to get creative. For example, Fitzpatrick & Sons Construction Supply may prefer fitzpatricksupply.com, but if that domain is taken, consider fitzsupply.com or fitzconstructionsp.com.

Say the name out loud to see if it’s clear or potentially confusing. Type it out and look for visually confusing combinations of letters (sassyssamosas.com) and make sure it reads well as well as sounding good. Spelling out long business names can lead to typos when entered in a search bar, which is why fitzpatrickandsonscontructionsupply.com is not a good choice.

While search engines are very quick to correct spelling mistakes and say “do you mean {X}?” there’s still value in having a domain name that’s brief.

A Few Words About Domain Names

I highly recommend taking a moment to learn about the basics of names and how they work. A little bit of literacy about how domain names are administered, where they come from, what extensions (.com, .co, .org) mean and how they’re used can keep you out of a world of trouble later on.

Take a moment and do a little research. Changing your domain name after it’s established online is a headache which should be avoided at all costs. The time choose your domain name is during the preparation period, not after the site has been built.

New TLDs

TLD stands for top-level domain, as in .com, .net, .biz, etc. However, in 2014, ICAAN, the agency which regulates TLDs, approved the addition of a whole host of options, from .auto to .vegas. Which TLD to choose is a target-market consideration. A .com TLD comes with certain connotations—it may feel more traditional or trustworthy, while other available TLDs for your site may be easier to remember. You’ll have to decide if you want to stick with a more traditional TLD or try something novel, and your designer may advise you here. Time will tell if these new TLDs become commonly recognized and widely used.

In Part 2, I’ll go into more detail of evaluating a plan, choosing web professionals, and determining your site structure. Stay tuned!

Smashing Editorial
(vf, ra, yk, il)

Source link

Leave a Reply

Your email address will not be published. Required fields are marked *