Has this ever happened to you? You are with a prospective client, the discussion comes around to project cost, and someone at the table helpfully offers, "My brother-in-law designs Web pages." True, anyone can design Web pages, including brothers-in-law and sisters-in-law. But not everyone creates Web sites that communicate the client's message to the viewer and elicit the desired response. The thought that the project might sacrifice effectiveness so that it can go to the lowest bidder makes my toes curl.

There are, however, some insights and techniques that a professional Web designer/developer can bring to the table to ensure delivery of exactly what the client needs—techniques that will yield results that far outweigh the cost-savings of going with an amateur. First, you need to be well versed in the differences between designing for the Web and for print so that you can explain why you might recommend certain courses of action. The real trick, however, is to be sure you have a methodology to follow—a methodology that ensures you understand exactly what the client needs.

Along the road of experience (read that as many mistakes), we have developed a methodology that we follow with many of our clients. By exacting this process, we have been able to increase client communication, improve client satisfaction, and reduce project costs.

Got your interest? OK. The remainder of the article discusses the process. It includes four basic phases, each phase including one or more steps.

• Discovery
• Organization
• Mockups
• Completion

Please note that this is not a replacement for time-honored project management tools, but is offered as an additional methodology to consider.

Many clients walk into my first meeting with them and begin by telling me what they want in a Web site. I have rarely found this to be a blessing—principally because often they have not thought about the site from the perspective of their customer. However, I do need for them to talk—but first about their business instead of the site. I need to understand my client's business to create a truly effective Web site. For your meeting, explicitly ask the client to talk about the business. As you listen, partition the business into logical groupings or chunks that reflect how the client's customers might perceive the company.

These groupings may not always agree with the structure of the business as defined by the organization chart or even by clients themselves. Be patient and allow the clients to put all ideas about business structure on the table. This ensures you hear everything they have to say and ensures they will be listening to you later instead of thinking of things they forgot to mention.

To guide you in these initial conversations, discovery process is presented below as a series of discrete steps.

STEP 1: Have the client explain how his or her business functions by explaining the manner of generating sales, profit centers, and present marketing plans. Additionally, ask him or her to show you existing brochures and areas of product/services growth, as well as to rank products/services by profit margin. Act as a customer and ask what may seem to be naïve questions about products and services. If you are unclear about the client's market and how they position the business in that market, repeat back in your own words what you think you heard and ask for clarification.

STEP 2: Ask the client why he or she thinks a Web site is necessary and write down the stated purpose and goals of the Web site. Refine this into succinct sentences or phrases and get agreement from the client. From this point forward, every task, every graphic, and every piece of text on the Web site must support that stated purpose and/or goals; if not, either revise the purpose/goals or don't use the information or graphic.

As a comment on Step 2: we see a lot of meaningless animation and cute phrases sprinkled throughout many web sites and it is our opinion that unless the animation or phrase supports the goal of the web site, it is distracting. Often it is the client requesting the animation (which they saw on someone else's Web site) and as a developer you can ask the client to refer back to the stated goals and objectives.

STEP 3: One of your most difficult challenges will be getting the clients to think outside of their own perspective on their business and how they run it. Guide the client into looking at how a customer might perceive the business. Specifically, try to determine exactly what information would encourage a customer to make a favorable decision (such as purchasing product or digging further into the site for more information), the best method for completing any transactions that result from that decision, and even what problems might arise to inhibit the customer from making such a favorable decision.

So far we have the following information:

• How the client's business operates
• The purpose/goals of the Web site
• How the client's customers view the company or business
• What information and functionality the Web site needs to offer a customer to ensure they make whatever decision your client would like them to make.

Now we turn to the organization of the site. This is where the Internet's environment really shines. No printed advertisement or color brochure can achieve the level of customer interaction possible through a Web site. With a careful design strategy supporting the site, all necessary decision-making information can be at the customer's fingertips.

• STEP 4: Gather the Web development team together—clients and designers—and begin to lay out the structure of the Web site in diagram form. Start with the "home" page and work down through each of the subordinate product/service chunks. The diagram, looking like an inverted tree or pyramid, has both horizontal and vertical page layouts.

The simple example in Figure 1 below illustrates how the basic pages of a Web site for an arts organization may be developed. (The site that reflects this organization may be seen at www.shorelinearts.org). Each page below the Home page represents a major chunk of the organization. Convenient horizontal cross-page links allow for ticket ordering and membership application.

Figure 1: Web site structure diagram.

Design the Web site as a consumer sees the company. Create pages and links to encourage the customer to follow the ideal course of action—purchase, further reading, etc. Eliminate as much as possible the need for the customer to drill down through several pages to arrive at the desired information. In multi-page links there is always the opportunity for the customer to lose interest, get distracted or just plain give up.

STEP 5: Ask your client what emotions they would like to evoke in the site visitor when that visitor sees the home page—what message that page should immediately convey. Some examples include quality, fun things to do, professionalism, trust, or friendship. This kind of thinking may be a challenge for some clients, but help them along with the process. If your clients have formally invested in the development of a brand, they may have faced the same question before. You can remind them that the look and feel of their site needs to convey that brand and whatever emotion the brand should evoke.

STEP 6: Once your client has an idea of what emotion they would like to evoke, find out what colors, images, and words they think would create this emotion in the viewer. Standard psychology texts will provide some help, but usually the client has a good feel for this. (Don't be surprised if the "corporate" colors don't support this step).

If the Web site diagram discussed in step 4 is extensive and has several large product/service chunks, you might consider specifically repeating steps 5 and 6 for the "home" pages for each of those sections.

STEP 7: Return to the Web site diagram and annotate the Web pages with the above information. Briefly describe the contents of each page in terms of images, text, and links. It can be helpful to create a Web site plan document that describes in words the site's menu structure, pages, page content, database constructs, and other important information. At this point in the process, everyone signs off on the diagrams and documents. I call this the "gelatin" stage ... the design isn't quite solid and can be changed easily.

The next milestone for key players to agree on the look and feel of the home page and interior pages. I like to prototype the pages in Adobe's PhotoShop and make use of the layers feature. It allows me to put images and text on different layers and move them around easily to quickly accommodate edits to proposed designs.

STEP 8: Based on all the prior steps, create a mock up of the home page that includes the company logo, graphics, text, menu structure, header, and footer. With the client, talk through the page's operation. (Now you can discuss JavaScript, Flash, RealPlayer and other goodies). Revise this mock up as necessary and gain client approval.

Once the mock up is approved by the client, I usually touch up the graphics we created in Adobe PhotoShop and build the Web images from them. At this stage, you might also want to review the Web site's purpose and goals to ensure that the mocked up design agrees with and supports them.

Incidentally, stopping at every fork in the road may appear to create a slow process, but experience has shown me that if the client has interaction and approval at these smaller steps, communication improves and the design benefits.

We tend to design interior pages that have a look and feel similar to that of the home page, often reusing colors and some graphics. For us, the next step is a coded implementation of the home page and one interior page. This will give the client a deeper perspective of the site design and create room for additional comments. It is easier to change and revise one "sample" interior page before beginning the remaining interior pages.

STEP 9: If this is a database-intensive site that uses Cold Fusion or another technology that allows dynamic page creation, I suggest first creating the ColdFusion code to build a functional page without graphics or text. The many trade offs between database structure, ColdFusion code, and page performance/interaction are easier to make when there is no clutter on the pages. Once the code performs the way it should, adding it to the actual pages is just a matter of cutting and pasting the ColdFusion code.

STEP 10: Create the home page and the selected interior page using the final graphics, text and code. Combine any ColdFusion code at this time into a truly working, but limited Web site. Gain customer approval. You have just moved into the "Clay" stage ... the project is firming up, however minor changes can still be accommodated.

At this point it may be appropriate to get some friendly customers to review how the site looks and operates. Does their assessment agree with the purpose and goals set forth? What are their emotions when viewing the pages?

The gathering of information and feedback from the client often governs the project schedule and at what point you reach completion. As each new group of pages are developed, have a reality check with the client, and then proceed according to any original schedules as much as possible.

STEP 11: Create the remaining Web pages referring back to the site diagram you built. In some cases, it might make sense to test one of the vertical page sequences to for ease of use and linking strategies. In other cases, it might make sense to test a horizontal page sequence. The key here is to select a representative group of pages that will check the operability of the site.

As you have guided your client through the various phases of the process you will of course have cautioned them about the "Gelatin" and "Clay" stages of the design. My clients and I joke about these stages, but they get the message. Oh, by the way, congratulations you have arrived at the "Cement" stage ... where changes come with difficulty.

I jokingly impugn brothers-in-law as beginner Web page designers, so please resist sending me flaming email. But I will admit that I have actually heard the opening phrase at more than a few client meetings. Hence the title of this article.

Regardless of proficiency, it is my hope that the process outlined above will help brothers-in-law and sisters-in-law everywhere to design and develop better customer-centric Web sites. The important lessons to learn are to put the customer's vision of the business at the forefront and to enable in every way possible the customer making the desired decisions.

Give the consumer what they want ... and they will return the favor.