The Interactive Ideas Blog

When I was a account manager for an interactive agency, I got as much project feedback from my clients as I could. However, after facing consistent rework and headaches, we made prototyping part of our standard process.  As a result, I also learned to educate the clients by reviewing four main points about the prototyping process. I’ve recently learned that many agencies don’t clarify this process for their clients, frequently resulting in confusion and misunderstandings. Depending on the needs of the interactive project, you’ll often have to review the prototype with your client. If your clients are not as technically savvy as you, they may need clarification on the following points about creating a website / web application prototype:

1. Why a prototype is necessary
2. How to use the prototype
3. What is expected from them as the client
4. What are the next steps after the prototype.

If you find yourself in a situation like the one I just described, I’d like make it easier for you to explain to your clients the prototyping process with ProtoShare. Below are some common scenarios and answers to the topics (mere suggestions from personal experiences). Feel free to add your own tactics and experiences in the comments area below..

1. Why a prototype is necessary

Client: “I’m have a tight budget and deadline, so I don’t understand why this extra step is necessary. We already talked about my needs for the site/application. Can’t you just take my ideas and build what I need?”

Response: Yes, we could actually start building the site/application for you. But because you ARE on a tight budget and deadline, it’s best that we begin with the layout of the sitemap and pages to ensure we’re going in the right direction. We need to make the most of your investment by making sure that 1) We truly understand your needs, 2) We provide you with a proper solution to meet those needs, and 3) You and your end-users will be satisfied with the final product.  A good comparison is that of a house. Not only would we need blueprints to create the foundation to know where to build the walls, but we’d also need to know if it is important for you to have the garage next to the kitchen. And what if you decide you want 12’ high walls instead of 10’? You need to determine these things prior to building the house. Trying to move walls, redirecting a driveway, and tearing down construction once you’ve already started building is much more costly than if properly planned from the start. One “small” change can have a ripple effect throughout the whole structure.  Well, it’s the same with a website/web application. Making changes later in the process is much more costly because valuable development work has been done, and altering it is much more difficult than changing a drag-and-drop prototype.

2. How to use the prototype
Client: “What do I do with this thing? It’s just a grouping of boxes and lines and certainly does not look like a website. I also don’t like gray. Where’s the color? And I don’t know what “lorem ipsum” means; my site/application should be written in English.”

Response: You are correct. Right now, it doesn’t look much like a finished website/application. Let’s go back to the house planning we just discussed. The blueprints of a house look nothing like the actual house. However, when looking at the blueprints, you understand where the master bedroom is, where the windows and doors are, and how wide the hallways will be. We are doing the same thing with your website/application.
We need you to review the page and interact with the layout, navigation, graphics, interactive forms, copy placement, etc. Will this make sense to your users? Will this layout help achieve your goals? Does the flow of pages make sense to you? How you and your customers interact with the site is key to the success of the project. When we answer these questions, we can move into a more high-fidelity prototype.

3. What is expected from the client

Client: “Okay, I understand the comparison to building a house. What else do you need from me? How do I know what to look at and when?”

Response: Once we’re ready to show you part of the prototype, you’ll receive an email with a link into ProtoShare. You have your own login to access your site/application. Click through the pages as if you were navigating through a real site. Because your time is valuable and we cannot always meet or personally discuss the pages or changes, you have the ability to access your prototype when it is convenient for you. On the prototype, you may also find annotations (our notes about decisions) or red pins that are discussion points. If you see something you want to comment on, or reply to, just click on the red pin; or create a new topic and drag out a red pin.  We have access to all your feedback and if you have more detailed questions, or if we need clarification, we can schedule a time to talk. What’s important is that you are involved in the planning process upfront, ensuring that the project is done on time, on budget, and meet all goals.
(ProtoShare also has a brief video tutorial showing your clients how to work in the tool.)

4. What are the next steps

Client: “So what happens next?”

Response: (this will obviously vary from project to project and depends on your company’s process) Since we’ve reached agreement on an interactive prototype of your project, we’ll begin building your site/application. We may need to do some user testing.  Because we engaged you early in the process, we have a clear understanding of your project’s unique requirements. And we should be able to deliver with a minimum of changes and rework, meeting your budget and deadline.

Andrea Fidel,
ProtoShare Marketing Intern & MBA student at University of Portland

Last Thursday, Google Co-founder & President, Technology, Sergey Brin, posted the annual founder’s letter on the official Google blog.

Brin had many fascinating insights and observations about the state, and future, of search, online advertising, browsers, mobile, and more. Of particular interest to us here at Site9, however, were his comments about the benefits of online applications, cloud computing, and collaboration.

“The benefits of web-based services, also known as cloud computing, are clear. There is no installation. All data is stored safely in a data center (no worries if your hard drive crashes). It can be accessed anytime, anywhere there is a working web browser and Internet connection,” wrote Brin. “Perhaps even more importantly, new forms of communication and collaboration become possible. In fact, today I have worked on this document using three different operating systems and two different web browsers, all without any special software or complex logistics.”

What more can we say? Last year, as we surveyed the market in website prototyping tools, this philosophy guided us to develop a web-based collaborative prototyping tool called ProtoShare. It’s good to see Brin and others out there pointing out the many advantages of web-based tools. If you haven’t yet joined the thousands who are enjoying the benefits of collaborative website prototyping, you can check it out with a free trial. And if you are already using ProtoShare, thanks for helping us continue to make the tool even better.

As you’ve probably discovered by now, topics and comments in the Review area of ProtoShare can be assigned multiple statuses: Open, Closed and To-do. This is a great way to track the progress of your project. But what exactly does closing a topic mean? And when should you close a topic? What’s the point of marking something as “To-do”? Well, there are no hard and fast rules on how this should work, we leave it up to the individual user. But, I’d like to take a few minutes to discuss how I’ve been using the statuses on internal projects at Site9/ProtoShare.

When I finish a new wireframe for a page, I create a topic to announce there is something new to review. Then I sit back and watch as new topics and comments trickle in from the other members of the ProtoShare team.

Once the topic has been thoroughly discussed, and the team has reached a conclusion, I do one of two things. If there is no action to be taken, I’ll mark the topic as “Closed”. But if there is an action associated with a topic, I’ll mark it as “To-do”.

There’s a very handy way to see how many “To-do’s” you have on the project. Just click on the Site Map tab in Review, and use the “View Topics” dropdown box to display the number of Closed, Open, or To-do topics on each page. A tip: it’s a good idea to assign a status to all your topics at some point, or the “View Topics” display isn’t that effective – especially if every ticket is marked as “Open”. Learned that one the hard way.

When I, or someone on the team, takes care of the action associated with a To-do topic, I go back into ProtoShare and close it. Once every topic is closed on a page, we consider that page “done” and are ready to move onto the next step of the project – which is usually creating and posting comps. Then we start the process all over again with the comps.

We’ve found this method saves us a great deal of time on new projects. When we can’t resolve everything in ProtoShare, we call an actual meeting. It’s almost become a novelty. But if we do have a meeting, they take less time and are more efficient because everyone is already informed of opinions. Again, this is just my way of doing it. I’m sure you will find your own ProtoShare path to success.

I was recently selected for a trial that went on for four days. On the fourth day, about halfway through the deliberation process, it occurred to me that a jury is a perfect example of a successful collaboration. Here you have 12 people, with 12 different viewpoints, working together to reach a common goal: agreeing on a fair and impartial verdict. This reminded me that collaboration is nothing new, as a society we’ve been doing it for hundreds of years. But what is new is how online collaboration is becoming standard operating procedure for all forward-thinking businesses. And a lot of it is happening online. Which is where we come in.

Recently we spent a day at Portland’s InnoTech conference. The first event of the day was a breakfast speech by Don Tapscott, the co-author of Wikinomics. This popular and insightful book has the industry buzzing. And the buzz we heard from him and other speakers all day long was…online collaboration. You can imagine that we felt pretty good about this as ProtoShare™ is all about better results through online collaboration.

It’s become pretty clear that online collaboration will soon change business as we know it. As Tapscott says, “In the last few years, traditional collaboration—in a meeting room, a conference call, even a convention center—has been superseded by collaborations on an astronomical scale. Today, teams numbering in the thousands, or even millions, are creating encyclopedias, jetliners, operating systems, mutual funds, and many other items. Smart firms can harness collective capability and genius to spur innovation, growth, and success.”

There are many voices saying similar things. Take, for an example, Evan Rosen’s The Culture of Collaboration, which was a Gold Medal winner at the 2008 Axiom Business Book Awards. In the book, he describes “the trend towards real-time, spontaneous collaboration” and how “collaborative culture is changing business models and the nature of work”.

And then, of course, there is James Surowiecki’s 2004 classic “The Wisdom of Crowds: Why the Many Are Smarter Than the Few and How Collective Wisdom Shapes Business, Economies, Societies and Nations.” Surowiecki essentially formulated the philosophy behind Web 2.0 and online collaboration when he wrote “under the right circumstances, groups are remarkably intelligent, and are often smarter than the smartest people in them.”

You may be asking yourself, well, what does this mean to me? Well, from our own experience, and from the many people we’ve talked to in the interactive industry, there is a lot of pain out there associated with keeping a website project on track and under budget. We’ve all struggled keeping up with multiple partners on a project – whether they’re in the next cube or in another country, communication is disjointed. The frustrating email chains. The endless meetings with notes scrawled on stickies or in the margins of yet another paper document. The dreaded phone conference and summary. Well, we want to end all of that unnecessary stress.

We’re not selling a project management tool, but ProtoShare™ will help you better manage an interactive project. And not just with your team, but with the folks on the stakeholder and client side as well. The Review section of the tool allows you, your team, and your clients to create topics, add comments, and drag out pins to mark the specific area(s) under discussion. Review collects all comments and ideas; it tracks revisions, and keeps a complete record – all in real time.

We all know that one of the biggest difficulties in successfully prototyping a website is getting client buy in. Using Review in ProtoShare™ engages clients at an early stage in the process. They can click through the interactive wireframe, experience the layout and navigation, and make comments along the way. This tends to get them excited. And when you are finished with the project, ProtoShare™ is not a dead-end. You can export into a Word document as much or as little of the project as you want, and that puts you pretty far down the path to having a complete requirements document for the development team. Now it’s your turn to be on the online collaboration jury. Check out our 30-day free trial and judge for yourself if online collaboration works.