Grayscreen/Whitescreen Process Applied

Since the summer of 2000, Newfangled has promoted the grayscreen prototyping methodology as a highly effective means of communicating the subtle yet crucial aspects of a site's structure, content, and functionality during the very early stages of site development. We have built tools that help us create grayscreen prototypes quickly, and have written a book called Client vs. Developer Wars that further documents this process. Grayscreening continues to be the cornerstone of all of our web development projects. However, in the past year the grayscreen process has evolved into a complete web development methodology that extends beyond grayscreen prototyping. By bringing together grayscreen prototyping and the NewfangledCMS (our Content Management System) we have brought the grayscreen process to an even higher level of efficiency and effectiveness. The story of a recent project for the New England Gas Company provides a great example of how grayscreening overcomes the challenges facing many web development projects and introduces new benefits.


New England Gas Company approached Newfangled Web Factory to create a new website that would integrate four separate sites (ProvGas.com, FallRiverGas.com, nattlegas.com, ValleyResources.com) under one new company name. This presented a major information design challenge. The new website would need to combine and organize the content from all four sites into a single logical structure and present state-specific information as well as other information that varied by city and town within two New England states. Along with these information design requirements, the new site would need to be visually redesigned and include a number of new features. In total the new site would contain roughly 100 individual pages.

Compounding the challenge of the project was the reality that more than ten people representing various departments at New England Gas Company needed to have input into the project as it progressed. The greatest challenge by far, however, was its aggressive launch schedule. The project, which began on July 8th, 2002 would need to be finished for a "go live" date of August 1st, 2002. That allotted just 19 working days to complete the project, from start to finish.

Traditional approaches to web development are typically plagued by a variety of problems that can stall projects. Miscommunication, unclear expectations, content creation bottlenecks and HTML formatting delays are commonplace with web development. Adding to these problems is the reality that each party is often dependant on the other to complete tasks before they can move forward. The grayscreen prototyping process was employed to overcome these problems and enable clear communication between Newfangled and the committee from New England Gas Company.


Newfangled began the project by creating an HTML grayscreen prototype of the proposed website. This grayscreen prototype allowed Newfangled to work closely with New England Gas Company to define three key aspects of the site: its structure, content and functionality. The prototype allowed the project team at New England Gas Company to see their site's structure in the context of HTML, giving them the ability to grasp and evaluate its subtleties. Newfangled's specialized prototyping tools allowed the development team to modify the site's structure quickly in real time as new ideas, suggestions, and refinements were proposed during the project's initial brainstorming sessions. Using their prototyping tools, Newfangled was able to work efficiently with New England Gas Company to finalize the structure of the site during the first few days of the project.

The grayscreen prototype was visually generic in order to keep the focus off of the site's visual design and on the three key elements of structure, content, and functionality. This approach allowed us to define these elements clearly, using a tangible structure that eliminates confusion and miscommunication inherent in traditional web development methods. Once completed, the prototype became the blueprint by which the actual functioning website was constructed.

Upon completion of the prototype, the project branched into two concurrent phases, visual design and whitescreening. Whitescreening is the phase of the project where the site prototype is transformed into a fully functional, yet still visually generic, website that includes all of the benefits of the NewfangledCMS. We call this process whitescreening, because both the prototype and the fully functioning NewfangledCMS site follow the visually generic format of the prototype. Changing the background from gray to white helps distinguish the prototype from the working site. Once the whitescreen was complete, key contacts at New England Gas Company could access the site through the intuitive, non-technical NewfangledCMS interface and enter the site's content directly into the site. This is the one of the keys to transforming the traditionally slow and inefficient web development process. By allowing the client to enter their own site content prior to the completion of the web project, the entire development process is accelerated because both the client and developer are able to work simultaneously on content, programming and design rather than continually waiting for each other to proceed.

Meanwhile, as the whitescreening and content entry phases of the project were underway, Newfangled was creating the new visual design for the site based on the structure defined in the initial prototype.


Once approved, the visual designs were applied ("skinned") to the NewfangledCMS templates and the site was transformed into its finished state. Skinning is one of the most "magical" aspects of our process. Content can be entered into the site before the visual design is complete. Once the visual design is finalized we begin the "skinning" phase, applying the approved design to the site templates. This takes place even while the client continues to enter content. This phase can make for some interesting effects as the client begins to see the site change into its final state as they continue with content entry.


On the day prior to site launch, the staff from New England Gas Company was continuing to add content while we addressed a few remaining programming issues and tested the site in various browsers. The next day was launch day. In this case New England Gas Company was hosting their own site, so system administrators from Newfangled delivered the site and helped to set up and install it on the client's server, just 19 business days after the kick-off meeting!

While not all web projects demand such a fast turn around time as the New England Gas Company project, the grayscreen development process offers many other benefits besides speed. New England Gas Company benefited from a significant cost savings in the project budget since Newfangled did not have to do HTML formatting for the site's content. Additionally, the quality of the final site was due in part to thorough planning and modeling that took place during the initial grayscreen phase of the project. The site also benefited from the broad base of input made possible by the prototype. The prototype allowed the committee to gather good ideas and insight from many experienced employees, whose feedback, in a traditional development process, may come too late to be implemented. Finally, the visual design of the site was much more effective as a result of the grayscreen process because the prototype provided the designer with an excellent base of detail from which to create his designs.


Newfangled's agency partnership mission statement is to "fortify advertising and design firms to comfortably, confidently, and profitably provide web development services to their clients." We have designed our process to maximize effective communication between multiple parties. Because a prototype is such a tangible means of communicating about a website, we can effectively work with our agency partners and their clients, making sure the expertise of each party has proper influence on the project. Newfangled has also developed a password protected client page system that is available to our agency partners. This system includes our prototyping tools. The tools allow agencies to create grayscreen prototypes themselves. This maximizes their influence during the prototyping phase while also enabling them to retain the prototyping line item of project budgets.

Because Newfangled is committed to helping agencies offer web development services profitably, we pass the efficiencies this process provides on to our agency partners in the form of tightly quoted budgets that leave room for agency markups or additional agency services.

Finally, the NewfangledCMS ultimately pleases the agencies' clients, because it leaves them with a website that they can control. Helping our agency partners to confidently satisfy their clients' website needs is perhaps the greatest benefit of all.