After building a site that did not meet client expectations one too many times from 1995-2000, we had an important but seemingly futile epiphany. We realized that we could solve most of our communication problems if only we could build the site twice. We could build the site the first time, let the client interact with it, gather all their feedback, and then build it a second time to their exact specifications. Surely that would be a foolproof process! The only hangup was that no client would be willing to pay twice as much and wait twice as long for their site.
The solution to this problem is grayscreen prototyping. Grayscreen prototyping allows you to create grayscale web pages that mimic the pages of the site you are planning without doubling the budget or timeline. These pages are interactive wireframes, free of any real imagery, design, or content. They exist solely for your clients to interact with their information design document via the web medium. Using one of the many inexpensive grayscreen prototyping tools available (such as Protoshare), you can create an initial grayscale version of a site in a few hours, and it is easy to add, edit, and delete pages at will throughout the information design process.
A Suggested Prototyping Process
The length of the prototyping stage of the web development process is usually about one-third of the entire project. If the project is in the typical three to five month range, prototyping will probably take four to six weeks.
You can start a prototype with a basic sitemap, either one you create after going through the 9 Step Process or one that the client supplies. Either way, the sitemap should just be a rough sketch of the site’s navigation. No one should spend much time on it, and it certainly should not go through any rounds of approval. This is because all you really want from the sitemap is a starting point, and given the effect prototyping usually has on site maps, it will be a starting point that you quickly leave behind.
Once the basic prototype is built from the sitemap, it is time to start the revision process, which will take you through to the end of the prototyping stage. You can, of course, approach this however you like, but we find it to be useful to have two prototyping meetings per week (per site). A session usually lasts an hour and includes the project teams from both the agency and the client. The agency leads the meetings and makes the updates to the prototype.
In terms of the order, I suggest working on the navigation systems first [main, secondary, tertiary, and then auxiliary (breadcrumb, global, footer, etc)]. Once all the site’s pages have been defined, you can then move on to prototyping out the elements on each page. This requires a discussion about each page, or at least each type of page, on the website. You can deal with some pages, like “Privacy Policy,” quickly, but other page types, such as complex product detail pages, may individually require a few hour-long sessions to work through.
If the idea of taking a few hours to talk through the logic of a particular page sounds intimidating, think of how many ways you could get that page wrong if you do not spend the time to talk through its workings with the client. It is worth noting that working through difficult information design problems at this stage is far easier than trying to work with a client to re-architect a page that has been failing them on a live site. Prototyping does not eliminate these sorts of failures, but it greatly reduces them. This is work that has to be done sooner or later, and the earlier in the process you and the client discover and deal with these issues, the easier it will be to work through them.
The prototype is complete once you and the client document every type of page a site visitor might see. I recommend working through all the navigation first, and then working through the page details section by section, starting with the most complicated sections, and then asking the client for final and formal approval on the entire prototype once it is finished. Let them know that this approval is meaningful. After the prototype is approved, any changes to structure or functionality defined in the prototype would constitute a billable change of scope.
This is an important line to draw. The information design process precedes visual design, content creation, and programming because it provides the rule book for the people doing all three of those things. If the rule book changes after the prototype has been approved, there is a lot of work to redo, most likely by all three roles. When you stop trying to explain the web with print and drop traditional wireframes and site maps in favor of grayscreen prototypes, virtually all of your client communication issues about the web project disappear, and you can begin to have focused and effective conversations with your clients about information design.
Instead of badgering them to approve version 2C, rev. 4 of a site map, you can have interesting debates about which solution to a specific information design problem is best. The conversation changes from “approve this” to “let’s prototype a few possible solutions so that we can find the best one together.” Where the old “approve this” approach built anxiety and mistrust in your clients, the new conversations will build trust, understanding, and excitement.
Furthermore, since your clients can interact with the prototype, they can observe and enjoy the tangible work you do for them at the earliest stage of the project. Between having the sense that you communicate about their needs in an effective and self-documenting way, and seeing such clear proof that you get a lot of work done quickly, your clients can relax early on in the development process.
What happens when they relax? They start thinking more clearly, having better ideas, and being more valuable brainstorming partners. In short, they become good clients.
There are many great books written solely about web site planning, and often the web developer with whom you work helps to guide this stage of the process. It is your job as the agency to give the information design discovery and planning stage of your web development project the time and attention it requires. If you get the right information design in place, you will have a stable foundation upon which to design a first-rate, effective website.
This post is an excerpt from my book, “A Website That Works.”
#macro:blognav,23697,24156#