Cisco Networking Academy Program: Web Design Pre-Production Process

Getting the Project

Every project begins with contact with the client. In this section, you learn what steps need to be taken in the pre-production phase to have the client choose you for the project. First, you learn how best to work with the client, establish a main client contact, prepare for the initial meeting, and run a brainstorming session. After you assess the client's needs and generate ideas, you need to determine the audience, the scope of the project, and the competition. You then must consider time and budget constraints. Finally, you create a proposal and, if all goes well, negotiate a contract with the client.

Working with the Client

Your ability to help clients freely express their concerns affects the quality of the information you receive. Every client is different. Some might depend on you to tell them what they need. Others might be interested in participating fully in the process. Clients might have specific ideas about the site that they want you to implement.

You need to determine what will best serve the client's interests based on your own experience. Be clear and sincere about your opinions and be prepared to explain the reasons for your opinions.

Here are a few tips that can help you work with your clients:

1. Research and prepare for your meeting—As with anything, be prepared. Research as much as you can about your prospective client before the initial meeting. Some clients expect you to lead the discussion, so you should have an agenda ready that outlines the goals for the meeting.

2. Explain the design process—Detail the process of creating a website from its pre-production phase through its post-production phase. Specify when input from the client will be required.

3. Define your boundaries—From the beginning of the process, define the boundaries of your client's participation in the process. If you feel the client's ideas are off the wall, provide a rationale to illustrate that it would be in their best interest to go with another idea.

4. Know your client's business—Frequently, a client might be unable to articulate the specifics of their business. Ask questions and guide the client to give you the information you need. If necessary, interview others associated with the business to gather the information.

5. Be prepared to listen—Try not to interrupt your client. The time you spend listening to your client gives you a better understanding of the client's business and the client's needs and expectations. It also shows the client that you are interested in serving their needs.

6. Do not be afraid to admit that you do not know—Answer questions honestly. If you do not know something, say so. You can offer to research the information and produce it at a later date; otherwise, you might find yourself making promises you will be held accountable for later. If you cannot meet a particular need of the client, recommend someone who can.

7. Demonstrate your services and abilities—Show the client what you can do for him. Give a brief presentation of past successful projects. Demonstrate how your web design solved a problem or met the objective of another client. Assemble a media kit that provides a list of your services, URLs of clients, and your potential to serve the client.

8. Show enthusiasm and professionalism—If you show clients that you are enthusiastic about projects, they are more inclined to believe that you will work hard on producing the best website for them. You also need to convey to clients that you are serious about this project.

9. Be prepared to answer questions—The client might seek further information about your services. Provide that information as soon as possible.

Main Client Contact Identification

When working for a client as an independent vendor, identify to whom you will be ultimately responsible. This person will serve as your main client contact. If you are freelancing for a small company, this person could be the owner or manager. In a large company, it might be someone in middle management. If there is a web development team, find out which member holds the authority to approve and sign-off on your work. Working with an individual, as opposed to a group, is essential. It is far more difficult for a group to reach a consensus about the merits of a website. Having one person who has the authority to approve your work will greatly facilitate the process.

Work closely with your contact person so that you can receive direct feedback. Communicating directly avoids misunderstandings, which can result in additional and unnecessary work. A main client contact is important in keeping the development process running smoothly and on schedule.

Initial Meeting

A critical point in the web-design process is the initial meeting between the web designer and the client. This is where the designer assesses the client's needs. Addressing these needs should be the primary concern of the web designer throughout the design process. This meeting sets the tone for future communication with the client. It is recommended that you are confident, sincere, and enthusiastic. Be prepared to take notes and to direct the conversation, but also to listen carefully to your client.

Professional web development is rarely a solo operation. It is usually a team effort and your client is the most important player. Open and candid communication is essential. Engage in a robust dialog to gather all the information you need. Focus on establishing the goals of the project and understanding your client's expectations.

By the time the initial meeting is concluded, you need to have a good idea of what the client expects to accomplish by publishing a website. Take the time to get as much information as possible during the interview.

The following are good questions to ask during the initial interview:

• What is your business?

• Do you currently have a website?

• If so, what do you like and dislike about it? Why do you want a new one?

• Which websites do you admire? Who are your competitors? What do you like or dislike about their websites?

• What is the primary intent of the website?

• What are the short and long term goals of the website?

• What do you want your website to say about your business?

• What products or services are you offering to the world?

• Which other websites will you be linked to?

• How much information does the website need to provide?

• Do you have an established brand identity? If so, is it necessary that it be used on the website?

• What resources are currently available? (e.g., photographs, copy, logos, marketing collateral, and so on)

• What are the key sections of your site?

• How often to you plan to update the content on the final website?

• Who is your intended audience?

• How technologically advanced is your audience?

• What kind of feedback do you need from your audience?

• Will the website be static or dynamic? (Dynamic websites are integrated with a database. See Chapter 9, "Interactivity," for more information.)

• Will this site be used in a controlled environment? (e.g., intranet, extranet, packaged CD, and so on)

• How soon do you need to be online?

• Have you chosen a service provider?

• What is your operating budget for this project?

At this point, you must define the purpose of the website. It can be one of the following:

• Attract new customers

• Give existing customers an alternate storefront

• Offer an online catalogue

• Provide industry information

Make sure that you write down the statement of purpose and keep it visible so that you can refer to it when you create the design and content. It is easy to forget the purpose of the site when you concentrate on the details, such as individual images and navigation buttons. Use the statement of purpose to guide you throughout the design process.

Brainstorming Session

After you define the purpose of the site, start generating ideas for the content and design of the website. A great way to accomplish this task is to brainstorm with your client and other project members.

The purpose of a brainstorming session is to generate ideas that you can use to begin developing a coherent vision of the website. The brainstorming session should be conducted in a comfortable, relaxed atmosphere, and the environment should promote strong communication and trust. The brainstorming session enables the thoughts of the team to flow. Participants can say whatever comes to mind, no matter how absurd or far-fetched it might seem. Later, most of the ideas will be discarded. The best ideas will stand out.

Make sure you include the client in the initial brainstorming session. This is recommended for several reasons: The client feels that you value his ideas and opinions, and most clients want to be involved in the process. The client also sees that you are working hard to find the best solution.

By the end of the brainstorming session, you will have collected many ideas and have an initial list of website features. This is sometimes referred to as a vision statement. It sets definable, measurable goals for the website. For example, the client's goal might be to increase the customer base by 10 percent by offering an alternative storefront.

Audience Definition

How you present yourself usually depends on the intended audience. For example, you might dress differently for a job interview than you would for a casual get-together with your friends. The same is true when you create a website. It is crucial that you understand who the audience is for the website before you begin the production process.

A great website is one that is easily accessed and understood by the majority of its users because its elements are designed with the target audience in mind. For example, an educational website that is intended for children looks and feels differently than a site that is intended to promote elder hostel travel. The target audience is defined by the nature of the client's business. For additional help on determining the audience, check out the competition's websites.

You also need to assess the audience's technical background and equipment because many aspects of the site, from design to functionality, depend on the technical specifications used by the audience. This is a major determinant in the development of a site because you need to know if you will use multimedia, a large number of graphics, and so on. You also need to know what kind of Internet connection the audience will be using (such as dialup/modem, cable, DSL, or T1). Depending on the answer, you must decide if you will use multimedia or an HTML-authoring program and if you'll have many graphical elements. Another important issue is which operating system the audience will be using (for example, Windows 95, 98, 2000, ME; Mac OS 8, 9, X; or Unix). This question determines which operating systems you must concentrate on when testing the website.

The following are questions you can ask the client to determine a customer profile:

• How do you define your audience?

• What is the age range of your anticipated audience?

• What is the ethnic background of your audience?

• What is the average income of your audience?

• Is your audience primarily male or female?

• What are the typical occupations of your audience?

• Is your audience limited to a particular region or country? Or do you have a global audience?

• Does your audience have any unique characteristics?

• Do you anticipate that there will be any disabled users?

• How often will users be coming to the site?

• What will users gain from visiting your website?

• What do you hope to gain from the users' visits?

• What type of web experience do you anticipate?

• What kind of Internet connection does your audience have (e.g., dialup/modem, cable, or DSL)? With what target bandwidth do you expect most users to access the site?

• What are the operating-system specifications within that audience (e.g., Windows 95, 98, 2000, ME; Mac OS 8, 9)?

• What is the standard hardware used? How old are the computers used by your target audience?

• What type of resolution do you expect most users to have?

The target audience is a determining factor as to how the visual, verbal, multimedia, and interactive elements are used. You must tailor colors, text, graphics, and interactive elements to your client's brand identity and the target audience. For example, a site created for children will be more media-heavy and have lots of colorful elements, cartoon characters, fun type fonts, and many animated elements. A site for an elder hostel, however, would be more text-heavy, use muted colors, have a more conservative composition, and use large or bold text to make it easier to read. Design the site with the audience in mind, but remember that, for most sites, the audience can be anyone.

Scope Definition

To define the scope of the site, you need to determine how much detail needs to be presented. Figure 4-1 illustrates some of the many factors associated with determining scope. Ask the client what are the most important aspects of the business, the second most important, the third, and so on. This is largely determined by the nature of the business. Is the site for a small family business with a specific focus or a large corporation with several different departments?

Figure 4-1 Scope Definition

Consider the scope of competitors' sites. Are they focused? Or do they incorporate information that is only remotely related to that particular business? What special features do they have? It is important to reinforce the client's primary objectives by focusing on topics related to the client's business.

Next, envision how best to present this information. Is the client be best served with a simple home page designed to communicate basic information to the public, or does the client require a more complex multiple-page site that offers interactive elements, animations, and response forms?

The customer's time and budget also influence the scope of the project. If the site needs to be up and running in a short amount of time, you need to consider how much you can accomplish in a limited amount of time. If the client has a limited budget, which is usually the case, you might have to reduce the scope of the project to make it affordable.

After you define the scope of the website, you need to determine several critical characteristics of the website project:

• The website's message

• How you will present the message

• The website's tone (such as formal, informal, academic, fun, and so on)

• Whether the client has existing materials (e.g., logos, images, concept, and so on) or if you need to create everything from the ground up

• Whether you will be hosting the website

• Whether you will be maintaining the website after it is posted to the Internet

Competition Survey

It is worthwhile to analyze the websites of similar organizations or businesses. Have the client provide the names of their competition. You can run a web search and analyze the content, design, look, feel, and navigational capabilities of the websites, and then list the items that you like and dislike.

The following questions can help you analyze the websites of competitors:

• How well is information conveyed?

• Is that information similar to what will be on your website?

• Is the site effective in engaging the user?

• Does the site address the same audience as your website?

• Are there any unique features?

• Is the site easy to use?

• Do the pages download relatively fast?

• Is the site attractive?

• What elements should you incorporate into your site?

A website, as with any product, needs to hold up against the products of competitors. Use these sites as a benchmark. Try to make your website better than the competition's. Avoid using material gathered from the competition's websites. Instead, use these sites as a source of inspiration to provide you with a look at how other designers approached similar businesses and problems.

The added benefit of analyzing competitors' sites is that your client will like to hear that you have an active interest in making the site better than his competitors'.

Available Time and Budget

After you have a clear idea of your client's needs and you have determined the scope of the project, you can establish a budget and time line for the project. It is important to be candid with your client as to the fee you require for developing the website. It is equally important that the client knows what to expect from you and when you can deliver each phase.

Be sensitive to the client's budget. Ask the client what they can spend and then realistically assess what you can do within those parameters. Avoid giving too much for too little. Novice designers should undertake an assessment of the going rate in their area.

The customer's needs must be balanced with the time and budget available. If the site needs to be up and running in a short period of time, the scope of the project might have to be limited. If you need to hire others to finish the project within a short time frame, the fee you charge might need to be increased. If you need to discard certain elements to keep the project within the client's time and budget limitations, consider simplifying the site.

You need to calculate how much time you anticipate the job will take based on the project scope. Calculating the time needed to complete each task can be difficult. Try to get these estimates from each design team member. What might take one person x number of hours might take another y number of hours. Be sure to include time spent on redesigns (generally, web designers include estimated time for two redesigns) and changes to text. Some designers who bill as a total amount include two redesigns in their budgets, while stipulating in the contract that any further redesigns will incur an hourly charge on top of the agreed-upon amount.

Determining the final cost requires that you consider all your expenses:

• You might need to hire subcontractors for their expertise. Acquire estimates from them and any other vendors you might need.

• Include material and processing costs.

• Scanning and manually entering content to a digital format is a service that typically is billed above and beyond the initial scope of work. Be sure to have a disclaimer to this effect in your proposal or contract.

At this point, you must determine how you plan to bill the client–—hourly (otherwise known as time-and-materials) or by a total amount. You will find that many clients have a set budget and will want to sign a contract agreement for a total amount. Other clients are in a rush to complete their websites and prefer to pay an hourly rate to save time and money. Ultimately, there is a greater risk to the client if he chooses to pay on a time-and-materials basis because if he is not pleased with the first set of designs, he will have to pay for the second, or maybe even a third round of revisions. On the other hand, if he is pleased with the first set of designs, he ends up saving money in the long run because the process was smooth and efficient.

When you are working with clients on a time-and-materials basis, help consult them on how to keep the total number of hours spent to a minimum. For example, one common snag when creating a website is the time spent making edits to content previously provided by the client. Explain that this is a common problem and that they should thoroughly proofread any and all content before sending it to you to be formatted in HTML.

Educating the client on the process of making changes is important. It is a good idea within the proposal and the contract to have procedures in place for both changes and approvals because changes to both the scope of the project and changes to content after it has been approved will cause a re-estimate of both the schedule and budget.

The Gecko Designs example illustrates the kind of education and procedures necessary to curtail changes affecting the scope, estimate, and time line of the project. This educates the client on the front end as to a web designer's process and how changes affect the development of a site. Clients typically try to add new content to the website continually through its development. If you do not have these kinds of procedures in place, it can be difficult to maintain the integrity of the site and your estimate, unless you are being paid hourly.

You also need to factor in costs if you will be hosting or maintaining the website. Talk with your client about the following issues:

• Does the client own a web server?
• Does the client have a hosting service?
• Does the client want you to host the website?
• If so, do you have the facilities and time to host the site?

In Chapter 11, you learn about hosting services.

You might be asked to break down the costs so that the client can pay in installments after each phase has been completed. Typically, you can ask for a third of the payment at the beginning of the project, a third after the mock-up has been approved, and a third after final delivery of the website.

There is no set price for a web design project. Research the web design firms in your area to determine the going rate. There are many factors that influence the cost of a web design project:

• Needs of the client
• Location of the web design agency
• Expertise of the web design agency
• Experience of the web designer
• Local market

Proposal Development

After you have a good understanding of the client's needs and have formulated the intention of the website's scope and content, incorporate this information into a proposal.

The proposal needs to include a detailed itemization of the website's elements, including a description of the basic functional requirements of the site. In addition, include a budget, target dates, and a creative concept describing how you envision your website will meet the client's needs and expectations. Typically, an initial list of website features and the initial flow chart that illustrates the relationship of the pages to one another are part of the proposal. All parties should clearly understand and agree upon the proposal by signing it.

The proposal should only contain the start and end date of the project. Make sure that you can complete the project by that end date. A more detailed time line is usually developed after the project has been approved, based on the proposal.

Above all, your presentation should be professional. This takes time. You will need to plan the proposal, check for errors, and produce high-quality work. If your proposal looks thrown together at the last minute, it reflects poorly on you as a businessperson.

Contract Negotiation

You will be more successful if you understand the negotiation process. When beginning any type of business relationship with a client or vendor, the project and financial arrangements are usually informally discussed. But it is a good idea to begin formal negotiations over a contract as soon as possible.

After you begin developing a new situation with a client, have an attorney draw up a contract. Give the attorney a description of your goals, what you need to have included, what should not be included, and so on. If your client or vendor submits a contract to you, read it and highlight clauses that bring up questions or concerns.

The following items are important points in a contract negotiation:

• Whenever possible, be the party that originates the first draft of the contract. It will be more work and expense, but you will know the contract extremely well, and you will have included all of your important requirements.

• Do-it-yourself or cookie-cutter contracts from a book or software can be challenging because they rarely are developed for your specific situation. If you use a contract template, you might need to adjust it to your needs.

• Be prepared to have the other party dispute some contract clauses and come back to you with a revision to your draft contract. Ask them to highlight the changes that they made, and then read the contract again to see if any other changes were made. Again, the wisest way to proceed in such situations is to also have an attorney review the revised contract. A change in words or even punctuation might appear meaningless to you but it could in fact be significant.

• If the other side prepares the first draft, you need to read it carefully. Highlight anything that confuses you or that you do not like and take it to an attorney for review. With an attorney, develop compromise positions to present to the contract's originators that address your issues or concerns.

• Only sign contracts that you have read completely and understand yourself–—preferably after an attorney has read the contract.

• When you make a concession in negotiations, ask for one in exchange.

• Be prepared to walk away from an unfair situation or an unprofitable deal. Knowing your price limits and preferred payment terms in advance can help you determine whether a particular negotiation is going against your wishes. Know your limits beforehand.

• Do not start negotiations with a final position or best offer. People usually expect some room for negotiation.

• Avoid automatically dropping price as a first concession. Research has shown that price is not usually the biggest concern. Rather, clients are focused on quality, reliability, and time of delivery. If a price is expressed as being too high, ask what deliverable the client would like to leave out to lower the price.

Many people are not comfortable negotiating a contract. Unless you want to trust that everyone else will operate with your best interests at heart, you need to negotiate or hire someone to do it for you. The best approach to negotiation is to look for a win-win solution, where all parties are satisfied with the outcome and the overall document is fair to all involved.

Unfortunately, some people and some companies, as part of their corporate culture, negotiate for a win-lose solution, where they win and the other party pays a high price in concessions or money. This negotiation strategy is not good for long-term relationships among parties. Most businesses depend on repeat business from satisfied customers. Customers on the wrong end of a win-lose agreement will take their business elsewhere. Research also shows that they will let other business colleagues know of their dissatisfaction.

Contracts describe what will be accomplished, how those tasks will be accomplished, when payments are earned and due, and who owns what. As questions arise between you and your clients during the process, the contract is the ultimate reference for what was intended.

A written contract is more effective than a verbal one for obvious reasons, and writing down your agreements is highly recommended. In general, few business people object to contracts because they know that they usually prevent misunderstandings, and a good fair contract protects all the parties. At a minimum, a web development contract should describe the following:

• Who has ownership of the website, and when the ownership transfers.

• What is to be accomplished–—Final project deliverables and completion criteria is also an important factor in the contract because it notes how the developer has fulfilled his obligations.

• Who is responsible for doing what.

• The time frame, including deadlines, for each phase.

• The price and terms of payment.

After the terms and conditions have been agreed upon, both parties should have a clearer understanding about what is going to happen and what is expected of everyone.

The following text refers to contracts in the United States. Other countries might have different laws governing contracts. In addition, contract laws vary from state to state. Always consult a lawyer before signing a contract.

In legal terms, a contract is defined as an agreement among two or more parties who promise to perform a transaction with each other. A contract is comprised of three basic elements. If one of the elements is missing, there is no contract.

• An offer made by an offeror—The person or entity extending the offer

• An acceptance made by an offeree—The person or entity accepting the offer

• Consideration—an exchange of something of value, such as money

• Oral and written agreements

A contract does not have to be in writing. There is such a thing as a verbal contract, but it is usually much harder to enforce than a written contract.

Some requirements associated with contracts make them enforceable by a court, if the need arises:

• An enforceable contract must be legal. In other words, all the agreements within the contract must conform to law.

• Most contracts must be in writing and signed by both parties to be enforceable.

• Minors cannot participate in enforceable contracts unless there is a legal guardian or cosigner of legal age.