How much should I prototype?

We get this question a lot, and we’ve got a simple answer: You need to prototype enough to get your point across.

Think about it: the only reason to build a prototype is to share it and get feedback. When you build your prototype, you should always ask yourself what information do I need to convey? What are the decisions I need input on? Am I interpreting these requirements correctly? Will this design meet the business needs of all the various project stakeholders?

We’ve all had the experience of a customer signing off on a 100 page spec doc, only to come back with a new set of requirements 3 days before project launch. We call this the illusion of agreement. Why does this happen? Failure to communicate. Failure to comprehend. We have to see things to understand them.

The Bar-Napkin Prototype.

Let’s start with the bar napkin prototype. Discussing my new business idea with my colleague, we start to come up with some great ideas about how to build the next great web application. To show my friend what I’m talking about, I intuitively start drawing. Why? Because the information on the napkin below would take three pages of text to describe.

So is this an example of a successful prototype? Yes. I shared a visual representation with an important stakeholder and got valuable feedback (“This is awesome!”) Am I done prototyping? No.

What’s less than ideal about the back of the napkin? First, when I sober up the next day, I probably won’t remember all of the gems that my friend told me. Second, any additional prototyping has to start from scratch, and third, unless I’m incredibly diligent, this first prototype will not be part of the historical record of this project. ProtoShare solves this problem for you by allowing you to manage feedback and continue to iterate on your early drafts.

Simple Digital Prototype.

So what’s the next step? It’s easy to make a bar-napkin equivalent of a prototype on your computer. There are dozens of programs that will let you draw boxes and text. So let’s say you use a flow charting or sketch tool to do your napkin drawing on the computer.

Is this a useful prototype? Yes. Again the visual representation gets people on the same page. The formality of doing this digitally will probably encourage additional thought and detail. Moreover, when you get feedback, instead of starting over, you can save a copy and make changes.

What’s less than ideal? Sharing: while you’re less likely to clean up a coffee spill with this next prototype, you’re still confronted with emailing and tracking multiple versions of the prototype. You’re also still only prototyping one aspect of the project: the broad strokes visual layout. Granted, this is a very important artifact. A simple box and text wireframe can convey the central ideas of purpose, function, messaging and many other subtle messages. But it stops there. If you want to discuss or experience functional details, you’re stuck. And until you’ve explored the important details, you’re not done prototyping.

Site-map/Information Architecture.

In addition to the bar-napkin and rudimentary digital prototype, you are going to create an outline form of the site (the Information Architecture, or Site Map). Again, this allows you to focus on the broad strokes of the site, which help you hone the purpose, function and experience of the site. You can do this in 100 different tools, but you’ll hit a dead end in most of them. ProtoShare is the best choice, because building the outline is easy and fast. You can modify it as much as you want, it’s completely integrated into your prototype, and it has functional navigation that you can use throughout your prototype.

What Could Possibly Go Wrong?

So, you’ve created some important prototype artifacts — simple wireframes and a site architecture. This gets you off on the right foot, but if you’re not careful, this is the point at which projects go wrong.

How? When we did services, the next thing the client always wanted to see was design comps. Why? They’re easy. They’re pretty. They’re fun. But jumping to design at this phase is ALWAYS the wrong move. Why? Because there are too many details that you don’t know. And a design that does not incorporate an important detail will have to be re-done.

I’ve also seen people go straight from bar-napkin to coding. This is fine, you can build a prototype in code, as long as you have unlimited time and money. If coding weren’t so time consuming and expensive, endless iterations on an actual product might be ideal. But they are. So you need to keep prototyping.

How Do I Know What To Do Next?

OK so you did not fall into the trap of starting to code or design. What do you do next? Well, inevitably, some areas of your project will be more complex than others. Some will be harder to communicate. How do you know what to do next? The answer is in the feedback. What questions have been asked? Do these indicate that some aspect of the project is not completely understood? A simple question like “Are we going to require phone numbers for checkout?” provides you with an important clue: There are vital business requirements for the checkout process that are not understood. So, the next step is to add additional detail to your prototype in the areas where it needs it.

In the ProtoShare process, the next steps are easy. Your site architecture is built out with the tool, and can be used to create navigation between pages. Feedback is stored with the wireframes so that it’s easy to get the context and to focus on the right items. And you can easily refine, increase fidelity and layer interactions on your existing wireframe.

Is the video going to link to a new page or pop up in the current window? How does this slide show work? What information are we going to require for registration? How do I find the support phone number? All of these questions can be easily answered in the prototype, and ProtoShare lets you model this functionality easily and quickly, using the work you’ve already done. Questioners get their answers quickly, visually. And you have a persistent record of questions, answers and decisions.

ProtoShare helps you quickly get the information you need from stakeholders, easily communicate even complex ideas, and add appropriate details.

Am I Done Prototyping?

When are you done prototyping? When the important questions have been addressed. You don’t want to build a full-scale replica of your site in a prototyping tool. It takes too long, and additional details have diminishing returns. A prototype will never answer every question. There will be further iteration during the design and build phases. If you prototype enough, you will find that sweet spot where the important items, both big picture and detail, have been brought to light, discussed, explored and decisions made. You want to get this done quickly because there is still a lot of work left to do.

Now, when your designer starts the visual design phase, they are working from a well-thought out prototype. They’ll be able to start with the functionality so that nothing is missing from the design. And when development starts, your developers have everything they need. Site architecture, interactive prototype, and a full record of discussion and decisions that went before, including design. As a programmer, I can tell you that working from a ProtoShare prototype, I see more than just what I’m being asked to build. I see the reasoning behind it. That helps me as a developer to make good decisions while I’m working.

(ProtoShare continues to help you manage the process through the design phase and the build phase of the product, by reviewing design comps and live views that allow you to embed your development site into the prototype right alongside your wireframes. There’s a lot more to that, so look for it in a future blog post.)

Why ProtoShare?

ProtoShare is the ideal prototyping tool because it solves your real problem: communication. Remember the client who signed off on the 100 page spec document and then demanded wholesale changes 3 days from launch? That client was not just trying to make your life miserable. They didn’t adequately understand what was proposed until they experienced it. With ProtoShare, you communicate visually and can manage the entire conversation from the earliest development phase through to deployment and ongoing maintenance.