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

A powerful feature of ProtoShare is the ‘Multiple Designs per Page’ filmstrip, located in the Prototype section of the tool. The options available are: Wireframes, Comps and Live Views. All of these options are actually wireframes. The Comp is a wireframe with a single image component, and Live View is an iFrame component that pulls in a live website.

Wireframing and prototyping are used to gain project clarity and make informed decisions. To that end, here are six ways I use the ‘Multiple Designs’ filmstrip in my own work, whether collaborating on the building of ProtoShare, or working on personal web projects.

1. Versioning Prototypes
   
   

   When prototyping, I like to version my work. When I am about to make a major set of changes and I want to preserve the current design, I use the New > Duplicate function in the filmstrip to make a backup copy. Once I have multiple designs, I need to choose which one to show when navigating to the page. This is done by selecting the design and pressing the Make Active button. The active design will have the star badge. I often end up with four or five designs on a page that shows the progression from low to high fidelity.

   Sometimes I want to extend someone else’s idea, but I don’t want to overwrite their work. Duplicating their design to create my own version not only allows me to use previous work, but it also allows me to keep similar ideas grouped together.

2. Comparing Ideas
   
   

   In the design work I do, I end up comparing a lot of materials to each other. This can involve Wireframes, Comps and even Live Views. In ProtoShare, I can compare these different options to each other at the same time by using the filmstrip. I might even ask other developers to collaborate with me and create concepts of their own. Some designers are more comfortable with Photoshop than a prototyping application, and since the filmstrip supports multiple design types, comparing Photoshop comps with wireframes is a snap! The end result is ideas get discussed, decisions documented, and the project keeps moving forward.

3. Idea Scrapbook
   
   

   When I start working on a web site, I like to collect samples for inspiration. It might be a color scheme, a layout, or a specific control (www.patterntap.com is great for this). Sometimes it’s not even another web site. It might be a picture, or there might be an article that I want to bookmark to remind myself of something. The filmstrip is perfect for this. I create a page in the site map called “Inspiration” and then load it up with Comps and Live Views of things I want to refer back to. This is especially useful on longer projects where you might have several days between work.I also use this as a way to elicit comments out of stakeholders. I’ll ask them what sites they like and put those in the filmstrip. Then I’ll ask them to comment on what works for them and what doesn’t. I find that this really accelerates the early phases of a project.

4. Monitoring Development
   
   

   One part of developing web sites that I used to hate was constantly emailing people links to the development site. Stakeholders need to see the work-in-progress and I often need their input or approval on something. The URLs associated with development sites usually aren’t the most obvious, which means emailing the same links to clients time and time again.With ProtoShare, when I start doing the actual build, I simply add Live View designs to the same pages I used for the wireframes and set these Live Views to be the Active Design. This way the client goes to ProtoShare just as they have done for the design phase. They can monitor the progress and ask questions, all in the same interface they have been using. And, if (okay, when) they want changes to something that will delay the project, I can easily refer them back to the discussion and decisions that were agreed to in the design phase because all that information is in ProtoShare. It makes the whole development process much smoother and I can concentrate on building the site. I highly recommend this workflow!

5. Metadata
   
   

   When doing a design project, there are usually constraints. Too often those constraints live somewhere other than the design environment and I find if I’m not diligent, I forget something. In ProtoShare I create a large Rich Text component in the first design of the filmstrip to capture the goals and parameters of the page I’m building. This way I can refer back and make sure I’m still on-track with objectives. Very helpful. I’ll also use these “metadata designs” for things like important decisions or conclusions. Even sign-offs can be tracked with an extra design. Anything that makes information more accessible is a good thing.

6. Include a Survey
   
   

   Prototyping is all about getting feedback and making decisions before committing to development. Sometimes I want general comments, but often I need to know the answers to specific questions. ProtoShare doesn’t have a good way to collect this kind of structured feedback (yet), but you can come close by including a survey as a Live View. To get the feedback I need, I use various survey utilities (like Survey Monkey, Survs, a Google Docs form, etc.) to create sets of questions relating to the ideas in the filmstrip.

And these are just some of the ways I use multiple page designs. Do you use them? Do you have workflows I didn’t cover here? Leave us a comment and let us know!

Peter Uchytil,
ProtoShare Product Marketing Manager ]]> http://blog.protoshare.com/2010/02/22/six-killer-workflows/feed/ 3 http://blog.protoshare.com/2010/01/19/protoshare-2009-revenue-increases/ http://blog.protoshare.com/2010/01/19/protoshare-2009-revenue-increases/#comments Tue, 19 Jan 2010 16:08:49 +0000 Andrea http://blog.protoshare.com/?p=1229 Customer Increase of 315% accompanies record sales year.

Portland, OR, January 19, 2010 — Site9, Inc., developer of the web-based, collaborative prototyping software, ProtoShare, today announced a record revenue increase for ProtoShare in 2009. Sales were up 990% from 2008.

The privately held software company also grew its customer base for ProtoShare SaaS by over 315%. Sold both through its website on a subscription basis and with a direct sales force, the software was adopted and implemented by a record number of enterprise customers in 2009. ProtoShare also saw significant growth in subscription accounts adding new users.

“We are delighted that the industry is embracing the value proposition of collaborative prototyping,” said Site9 CEO and co-founder Andrew Mottaz. “When you dramatically improve communication and understanding between team members and stakeholders, and can translate that into changes early in the process, the ROI of ProtoShare quickly becomes clear.”

Last year, leading interactive agencies and Fortune 500 companies Disney, 3M, Motorola, Sony, Razorfish, OgilvyInteractive Worldwide, McCann Worldgroup, Abbott, NBC, and Deloitte adopted ProtoShare to reduce rework, cost, and time on their interactive projects.

“We’re very happy with the numbers for 2009,” said VP Marketing and co-founder Blake D. Johnson. “ProtoShare is the fastest growing requirements visualization solution on the market for a reason. It provides incredible value.”

About Site9, Inc.
Founded in 1999, Site9, Inc. is the developer of ProtoShare. Fortune 500 companies, leading interactive agencies, and web developers in over 84 countries around the world use ProtoShare’s collaborative prototyping to deliver better products while cutting time and costs. No software required.

###

Yesterday, ProtoShare 3.6 was released. The update brings with it many highly requested features, and also introduces the new Professional and Standard Plans. Additionally, ProtoShare now supports the Google Chrome browser, for both reviewers and editors. Chrome joins Safari 4 and Firefox 3 & 3.5 as browsers that are approved to work in the ProtoShare editor. As always, ProtoShare reviewers can also use Internet Explorer 7 and 8.

The Standard Plan received several new updates including a new rich text editor, speed and performance improvements, and the ability to store your assets in the palette. This allows images put in the Gallery folder in the Assets Library to appear at the bottom of the palette. You can then drag and drop them onto the page to work more quickly in the wireframe editor.

The Professional Plan, aside from having no more limits on projects and pages, contains all the updates to Standard, plus some highly-requested features.

• HTML Export – Access and run your projects offline, create and store archives, have a starting point for development. Further, because ProtoShare uses HTML, CSS, and JavaScript, your exported site will look and function EXACTLY like your ProtoShare prototype.
• Interactive Grid View component – A true interactive, configurable, sortable dynamic data grid.
• Interactive Tree View component – A hierarchical list of items that are configurable and clickable.

Director of Sales, Josh Chaney, put together this preview video to highlight the features’ benefits to effective, better prototyping. As usual, keep your ideas and feedback coming; we’ll continue to listen and deliver.

Click here to view the embedded video.

Consulting Services for ProtoShare are now available. If you need help prototyping a complex website, simulating rich Internet functionality, or transitioning from another system, let us do the heavy lifting. We will work with you to plan and build custom solutions that meet your specific needs and that support your overall business strategy. Your success is our primary goal! To request a quote, please complete this form.

We offer a wide range of services covering all aspects of the prototyping process including:

Building templates

Creating resources that can be reused across projects by multiple stakeholders is an important way to maximize your team’s efficiency and success. In ProtoShare, templates are the primary way to reuse resources such as headers, footers, and sub-navigation.
ProtoShare Consulting Services can build a flexible and extensible library of templates that meet your current requirements and that grow with your future needs. We can create a collection of stock company templates or custom templates for your key clients.

Creating custom components

To support the creation of rich prototypes, ProtoShare includes a large number of built-in components. These components can be used individually or they can be combined in unique and complex ways. Moreover, you can create any component by specifying HTML, CSS, and JavaScript.

ProtoShare Consulting Services can create custom components that suit your specific needs. From complex navigation schemes to completely customized components, we can create a prototyping experience that is visually and functionally compelling.

Transitioning from another tool

Prototyping has been accepted as a best-practice by many software professionals and organizations. This wide acceptance is matched by the large variety of tools used to create prototypes. Everything from simple drawing and presentation applications to complex development environments have been tried – with varying levels of success.

ProtoShare Consulting Services can help you transition from your legacy prototyping tool to ProtoShare. We can reproduce content and interactivity from almost any tool, providing you with continuity and peace of mind for all your projects.

Incorporating branding information

Whether your audience is an internal development team or a big-name client, branding can be an important way to bring your prototype to life. Including a client’s logo and design aesthetic, or a corporate color scheme and terminology can add a comforting feeling of familiarity, while strengthening project ownership.

ProtoShare Consulting Services can incorporate your branding information. We can create brand-specific designs, content, and styles to produce the desired look and feel.

Training your team

ProtoShare projects typically involve multiple stakeholders with diverse skills such as information architects, designers, and developers. Bringing everyone up to speed can be a real challenge. And with advanced functionality such as rich Internet simulation, stateful wireframes, and complex navigation schemes, there’s a lot to learn!

ProtoShare Consulting Services can train your team on how to maximize the benefits of ProtoShare. You’ll learn the necessary skills to efficiently develop compelling prototypes, while increasing efficiency, productivity, and satisfaction.
Get started today.