David Kelly, founder and CEO of IDEO Product Development and professor at Stanford, spoke at Stanford’s Entrepreneurial Thought Leader Speaker Series about design as an iterative process. You can watch his entire talk at the link I provided, but I pulled one quote that I thought was relevant to the thinking behind our grayscreen prototyping philosophy:

“You don’t find anything out until you start showing it to people… Humans are really interesting. If you show them your idea in the prototype form, very few people will tell you all the things they think are right with it. But everybody will tell you all the things that are wrong with it. So you just write down, you copiously take notes about all those things and you fix them. And the next time you show up you have all those things fixed. It doesn’t take very many times before you have a product that’s delighting the people that you’re making it for. And so, we call this enlightened trial and error.”

He’s absolutely right that there’s no way to properly prototype something that’s going to be used, whether a product or a website, without interacting with it as it’s intended to be used. So sketches will only get you so far with a website. A proper website prototype should of course be navigable, but also be easily changeable and capable of receiving feedback so you can capture every last comment and make sure that each round of fixes is comprehensive. Below is a screen-shot of a recent prototype done by Jason and Sarah that shows the feedback gathered during the process.

We’ve tried to make it very simple for our clients to submit feedback via the basic form at the bottom of each page. Those comments are immediately dated and placed in the white field. We can also add specific comments for the developers that are placed in the green field. All comments can be toggled on or off by clicking the ‘comments’ link above the green and white fields.

In the screen-shot below, I’m showing a prototype done by Katie and Brian recently, where they decided it would also be good to transfer some of the developer notes inline. During an internal review, Steve noticed this right away and expressed how helpful he thought it was, too.

By the way, I realized that the widget being magnified here doesn’t match with the one showing at actual size. It’s the one on the right. In any case, this prototype indicates that these are interchangable, so my Photoshop-sloppiness is vindicated… sort of.

Our goal is to make sure that the prototyping phase is an extremely focused and comprehensive planning process, which is enabled by how simple the tool is to configure for the Project Managers and the regular and documented input from the client.

  • Alex

    How do you guys build your prototypes? Looks like you have some pretty fancy stuff going on there with those pop-up screens.

  • http://ecorner.stanford.edu/authorMaterialInfo.html?mid=685 Andrew

    I really liked the 8th chapter of this video, which shows Kelly talking about how it’s more interesting to see a video of how a product is used than just seeing the project, so emphasizing the design of the entire experience, and not just the product in a vacuum:

  • https://www.newfangled.com/chris_butler_blog Chris Butler

    @Alex, We build them using a spinoff of our CMS to make generating pages in a site structure simple. Then we use basic HTML and a bit of javascript to lay out the page and prototype more complex functionality. The fancy pop-up you’re seeing is just something I did in Photoshop to magnify some details in each image that I wanted to point out.

    @Andrew, Yes, I did too. That’s another nice way of articulating what our prototyping philosophy is all about- being able to experience the site rather than just see it two-dimensionally.

  • Alex

    I see – feel a bit sheepish now. Do you ever prototype things on paper anymore, or is it all digital?

  • https://www.newfangled.com Brian

    @Alex, The above homepage prototype for Cambashi was sketched on paper initially by Katie. When she was content with the structure on paper, we shifted it online using our prototype tool. Katie and I generally work that way, but other project management teams may take a different approach.

  • Alex

    Brian or Chris,

    Do you guys have any images of your paper prototyping?

  • Brian

    Hi Alex,

    These paper prototypes are discarded once we have applied the content strategy to our grayscreen prototype. We usually only use them when we foresee many iterations before we are satisfied. It takes us less time to sketch out multiple versions of our content strategy than to prototype each new preferred method.

  • Rob

    I love the prototype approach, much better than showing clients mock ups they can’t use, then get the inevitable “The links don’t work” call. I think this approach also helps to limit the amount of browser hacks/headaches by doing all the markup first then just throwing a style sheet on it.


By Christopher Butler

Chris Butler is the COO of Newfangled. He writes and speaks often on design and the web. You can follow him @chrbutler. More by Christopher Butler