Prototyping Website Functionality

Working the edges of a site's structure and diving into the details of its content is essential for communicating effectively. But websites are often more sophisticated than that. E-commerce, personalization, advanced applications, integration with third party services, community features, complex forms, and surveys add intricacy to today's full featured websites. Therefore, grayscreen prototypes must include functionality mock-ups and technical notes that describe exactly how custom web applications, or e-commerce implementations, will work. If a normal web page can contain many subtle considerations, a web application or transactional site has far more. Click through screens that mock-up typical interactions helps to refine functionality, and reveal areas where important questions need to be answered before development.

This ten minute video shows our process of grayscreen prototyping.
To embed this video on your site copy and paste this code:
<embed style="width:400px; height:326px;" id="VideoPlayback" type="application/x-shockwave-flash" src="http://video.google.com/googleplayer.swf?docId=-1308138296088477010&hl=en" flashvars=""> </embed> <br>Grayscreen Prototyping video by <a href="http://www.newfangled.com">Newfangled Web Factory</a>.

So when building a prototype we mock up everything from simple comment forms and log-in procedures to more complex e-commerce and account management screens.




Building a thorough grayscreen prototype requires several rounds of review. Each successive round refines the details and brings the prototype into focus. One of the advantages of building web-based prototypes is that many people can review them online and chime in on the work in progress. We like to include as as many people in the prototyping process as we can.

The project manager and the information architect here at Newfangled take in all the initial information and begin turning over all the puzzle pieces. Once they've worked through the prototype, we do a broader internal review. I personally review our prototypes at this stage. We also invite review from a couple of other internal resources, who have no familiarity with the client or the prototype. Fresh eyes bring a level of insight that clients and the prototyping team don't see because they're so close to all the pieces. After our internal review, we invite the client to weigh in on the first round of prototyping work.

While we make our best educated guesses during our initial prototyping, we always need the client's feedback to move forward. This stage is not without tension. One of the classic mistakes in information architecture is not being able to see past internal ways of thinking about organization. Clients can get too caught up on their own internal jargon, or even get derailed by internal politics. That's one of the benefits of hiring an outside firm. You get an objective perspective. But reorienting your mind--when it's used to thinking one way about things--and fighting internal battles, can be daunting. Being able to show a working web-based prototype to stakeholders helps demonstrate the benefits of one solution over another.

Once a prototype gets close to completion, we bring in the designers and developers. They will inherit the prototype as their blueprint for design and coding, so their understanding of its features, and their insight on its formulation are extremely valuable. We make sure that there is still time so that whatever insight designers and developers have can be integrated and evaluated by the team before the prototype is finally approved. Everyone's background contributes to their perspective on a website. Marketers think one way; programmers think another; and designers have their own refined perspective. Ultimately, it's the site's users that we're trying to serve, and they're never there during planning. But by getting as many different perspectives on the prototype as we can, we will start to approximate the average user. (Of course there is no such thing as an "average user." Marketers, developers and designers are all site users too, so a variety of insight from different perspectives usually results in an effective site design.)


One of the features we've built into our prototyping system is a commenting area at the bottom of each prototype page. Clients can note their ideas, change requests, and concerns, which become a part of the prototype.


One of the things we learned about how to prototype is how important it is to keep the prototype generic. Adding any design elements at all, including subtle color suggestions, begins to beg the question "Is this how the site will look?" We've actually worked very hard at making our prototypes look professional and clean, without looking "designed." If anything, we want them to look ugly, so that our clients don't get distracted by visual design.


We spend as much time as we need to thoroughly detail a site during the prototyping phase. We never watch the clock. After all, it's far easier to integrate changes, refinements, and ideas into a prototype than it is after a site's been designed or coded. There are many other benefits to grayscreen prototyping that we've observed. We invite you to read or download our book Client vs. Developer Wars to read more about how and why we prototype and the amazing difference it makes.