Tools for Facilitating Feedback on Prototypes and Wireframes

Wireframes and Prototypes are a powerful communication devices. These tools will help your clients and team mates provide you with useful feedback on your wireframes, prototypes, and designs.

Stay up to date. Subscribe to the UX Booth newsletter.

Subscribers get a 15% coupon to Rosenfeld Media.

Wireframes and Prototypes are an essential tool when building websites and applications for clients. They’re more than just a simple deliverable or milestone—they function as a “common communication language” as Todd Zaki Warfel puts in Prototyping: A Practitioner’s Guide. Prototypes and Wireframes give us the ability to share ideas that can otherwise be difficult to communicate, and sell designs that might otherwise be dismissed.

Also important is the ability for your clients or team members to leave feedback on said wireframes and prototypes. To keep the process quick, to the point, and a two-sided conversation, people have created a lot of clever tools and processes for discussing these early design stages. In this post, we take a look at some useful ways for for facilitating these conversations..

Notable

Easily take notes on pages and share them with your team. Also, share a secure link with anyone you want to be able to take notes as well.

Notable has one of the most refined interfaces I’ve seen for taking notes on top of wireframes/designs/prototypes. Using Notable, you can quickly upload pictures to take notes on top of, or take snapshots of a site directly from a URL.

From there, it’s possible to share a secure URL with your team or a client so that they can also leave feedback on a design. Creating annotations over a design is as easy as dragging a box, and leaving a comment.

One feature we’d like to see from Notable in the future is the ability to take snapshots of URL’s that require a user to be logged in. Presently, it’s possible to use a bookmarklet to take quick captures of any page you visit in a browser, but Notable doesn’t seem to be able to capture pages that require a log in.

Notable has a free plan that’s useful for evaluating the service, and various other paid plans that allow you to organize projects, teams, and pages (as well as brand your Notable dashboard).

Recurse App

Recurse allows people to make quick notes over a website very easily.

While it doesn’t appear that Recurse App has been actively maintained for a few month, it’s definitely one of my new personal favorite tools for communicating ideas with clients. Interestingly enough, it seems to be entirely free at this point for unlimited projects.

Recurse App allows you to create quick mockups of what your wireframe or design might look like in a web environment. No interactive elements are available (ie: you couldn’t hook together a group of wireframes to create a quick mock prototype or anything), but both you and others you share your project with can take notes on top of the design.

From your user dashboard, you have the ability to create Clients and Projects, similar to other solutions like Basecamp. Projects can be password protected if you need your work to be hidden from the public view. You’re projects are given a link you can share with anyone, and people can view pages in the project, leaving notes without registering for any user account. It’s very quick, very easy to use, and great for getting quick feedback from parties involved with a project.

Protonotes

Protonotes, like Recurse and Notable allows you to take notes over a website, but there are a few differences. In regards to implementation, Protonotes is a javascript that you drop into your site, and it can even be configured to store notes in your database rather than an off-site database. Also worth noting is that Protonotes is really built to be used on prototypes rather than Wireframes.

Personally, I’ve had mixed success with Protonotes. I’m not sure if I ran into a simple error while trying it out, but I seemed to have trouble when viewing a site using different viewport resolutions. Protonotes is free, but I’d want to see consistent note placement before using it to share thoughts back and forth with a client.

Basecamp

Basecamp is one of the most widely used project management tools online, and is great for handling many types of communications when working on projects.

Does Basecamp need any introduction? One of the most well known project management tools online (perhaps the most popular), Basecamp is used by millions of people to manage nearly every facet of small to large-scale projects.

That said, there are a few reasons Basecamp may not be the most ideal tool for sharing wireframes. For instance, Basecamp is a bit clunky, and by that I simply mean that when you use Basecamp, you get everything that comes with it. For long term projects where it’s essential to stay organized, this is great. For a really fast interaction between a single designer and single client, the initial work it takes to kick-off a project/share a file/& get a first round of feedback could likely be done much more quickly in a more light weight application.

I’m a big fan of Basecamp overall. At work, we use it nearly everyday to manage our projects, and have found it to be extrordinarly useful. What’s more is that we’ve found that a lot of companies we frequently do work with already use it, making collaboration super easy.

Google Drawings

Google Drawings offers a robust set of tools for creating wireframes, and it’s free!

As a part of Google’s suite of document tools in Google Docs is a Drawing document. I’m not entirely sure if there is a suggested purpose for the drawing tools, but they actually work really well as a wireframing toolkit (and it’s free too!).

If you’re team is on a budget, definitely look into wireframing with Google Drawings. It’s pretty robust for a free tool, has a pretty easy learning curve, and comes with everything you expect to find in Google Docs applications (Revision history, cloud access, integration with other Google Docs apps).

As a communications tool, it’s possible to create speech bubbles over the wireframe (though it isn’t a feature rather than a clever use of shapes). Alternatively, you can drop a Google Drawing into another Google doc, and take notes there. If you take advantage of Google Docs “Collections”, you can setup a collection for a project that everyone in your team has access to, that way new documents in the collection are shared with everyone automatically.

Skype Screen Share

Skype is a powerful web conferencing tool, and can also be used to share screens.

There are other applications for this as well (for instance, Mac users can use iChat), but Skype Screen Share is a great cross-platform tool for remote desktop viewing.

More than just an effective way to get feedback from clients, Skype actually has proven to be a useful tool for setting up a remote co-working environment. While wireframing and prototyping, we sometimes use Skype screenshare to collaborate as if we’re working side by side. One monitor is dedicated to my partner’s screen, while the other screen serves as my active workspace. Similarly, my partner can watch what I’m doing as we give each other feedback or solve problems together.

I’ve also worked with many clients and project managers who are already familiar with Skype as a conferencing and screen sharing tool. Many of them aren’t afraid to use it to convey a though with me about their product, while many are sometimes a bit hesistant using tools that are new to them.

Develop an in-house solution

One thing we’ve started doing in combination to managing projects with Basecamp, is documenting our process using some in-house tools we developed.

While Basecamp is an amazing communications tool, it didn’t include some of the features we were looking for in our own practice. We wanted to share some complex data visualizations and reports that we could discuss with our clients, and also have a place where a client could navigate through research we conduct.

An custom built solution might offer you the flexibility to share more complex ideas with clients and others working on the same project.

Our custom solution is tailored to our process and practice, so it probably wouldn’t work for everyone. However, we are considering creating a possible application that could be used by other practicioners that are looking for a good documentation tool. It’s not available yet, but we have already released a small part of the system that is useful for creating sitemaps.

Any others?

Do you use any tools for communicating ideas back and forth with your team & clients that aren’t listed here? What does your usual communication process look like?

About the Author

David Leggett is a designer, developer, and builder of things. He currently resides as Director of Marketing and Design at Python Safety.

I really enjoy sharing screenshots on dropbox and using chatbox – http://chatboxapp.com/ to throw up comments if needed (simple and free). Aside from that, I usually just use Skype and gotomeeting to collaborate live.

David,
Thanks for posting this article on tools to provide feedback for wireframes and prototypes. As you mentioned, feedback is a key component to the prototyping process. We like to say, “If you’re not sharing, you’re not prototyping.”

ProtoShare is a web-based wireframing and prototyping tool that was built on that premise.

Once you create wireframes, you need to validate your work and ensure you are eliciting the right requirements for your project. ProtoShare facilitates feedback directly in the application by allowing participants to pinpoint discussion topics without the need of a third party tool. You can even direct comments and questions to specific participants so they may address the topic.

The feedback / collaboration process really helps move your project forward. Getting things right in the prototyping stage will make development go that much more smoothly.

Thanks for stopping by Andrea! I haven’t had a chance to try ProtoShare yet, but it’s definitely on my todo list. It really looks like an awesome suite for the entire wireframing/prototyping/sharing workflow.

I use Basecamp and find that although it does take a while to setup projects even for minor ones, it is helpful to use for wireframes and prototypes. Mainly because the project can then flow onwards after they have been approved by a client. Rather than then moving onto a more functional project management tool. The client is already setup and the files and their communication about the wireframes/protypes are already stored in Basecamp so it makes it easier to manage the project in the long run.

Even small projects seem to eventually need more project management than originally thought so I think the time in setting up Basecamp pays off in the end.

+1 for the Google Drawings mention. I just recently incorporated this into my wireframing workflow, and although it’s not a perfect tool, there are some great benefits to using it in a collaborative environment.

Having tried it a few times, I don’t necessarily agree that “Google Drawings offers a robust set of tools for creating wireframes…” It’s pretty rough for the purpose.

But I used it for a while because it had the real-time collaboration aspect. But then I found LucidChart which has the real-time collaboration of Google Docs with all the aspects of a great wireframing tool!

Nice overview of various third party tools David. The only thing I am missing in this article are wireframe/prototyping tools that are already capable of leaving comments and gathering feedback – as a built in function. Would be nice to see that in a follow-up article maybe?

Sure, I’ve already seen a few suggestions that seem to accomodate (at least in part) both the building and communication part of the process.

I’ll say this much though: Different setups work for different teams. Our team usually goes straight from wireframing in Adobe Fireworks/Balsamiq Mockups to HTML prototypes. For us, we need a way to get feedback on both basic wireframes and html prototypes all one place. Unless we can find a better tool for handling all of that, we’ll likely stick to a third party tool built specifically for communication.

There are other teams and people out there where more all-in-one setups would probably be very useful though. Definitely on the lookout for more applications that provide that more complete toolbox.

Great list of third party tools for collecting feedback on prototypes.

Also since you mentioned HTML prototypes, here is a new tool that you might find useful: App Sketcher (http://www.appsketcher.com). It lets you create interactive prototypes with HTML and jQuery without coding and produces prototypes in HTML/CSS/JS that can run in any browser.

David, I’m working on a creating a tool for design file version control and collaboration for agile software development and was wondering if you would be willing to take it for a test drive? We’re in the iterative design phase right now and actively looking for feedback.

We built this project around the process at our own company and want to see whether it’s useful to others.