Design is not only how it looks,
but also how it works.

Wireframing is key to a successful user interface design.

Wireframes are like blueprints, the foundation on which you plan to build your project. Not only do you get a chance to flesh out the overall structure of the application, but you also find commonalities and differences among key areas that can help spawn new ideas during the process. 

Communication is key to a successful set of wireframes.

So, therefore, Collaboration + Wireframes = Success!

As the wireframe designer on a recent project, I’m only stirring one little spoon in a big pot of revisions: simplifying, clarifying, structuring, re-structuring, etc. My spoon along with my coworkers, developers, project managers, the client, the client’s developers and managers and all their spoons. Stirring this living, breathing, iterative pot of wireframes.

It’s a LOT to keep track of and I cringe at how clunky the process was, and would still be, had I not been introduced to InVision. Thanks, Steve!

I recently picked up a project with about 100 existing Balsamiq wireframes (.bmml) which had already been ported into InVision, an online prototyping / collaborating app. My project manager sent an InVision invitation to access the project files, I signed up, downloaded the desktop app, set up my sync folder and within minutes started poking around project files, exploring the group environment and learning my way around.

Having 100+ wireframes to quickly become familiar with is no small task, but finding them organized in an easy-to-sort-through gallery of thumbnails, along with comments, internal links, in-context notes, etc – it was a breeze seeing the big picture, as well as re-living the thread of communications leading to certain process and flow decisions.

I jumped right in with updated wireframes, replacing existing ones, continuing the comment conversation, and ultimately, taking joy in marking comments as resolved.

Clean and simple

First thing I noticed was InVision’s simple and intuitive interface. The sign up process was painless and even when I was I knee-deep in the project, I always seemed to be one click away from what I wanted to do. Screen thumbnails can be titled, grouped, dragged and dropped for easy sorting and navigation. The toolbar drops to the bottom when you’re viewing individual screens, for easy access to all page specific options, such as hotspots, comments and an archive of revision history.

Hotspots – anchor, hover, URL

Screens can be linked together via hotspots drawn on-screen, which I found incredibly helpful when working out the user flow and illustrating popups. They recently released a “hover” hotspot feature which is a nice touch, especially when mapping out hidden options tucked away in drop downs and navigation sub-items.

Sync Files

They have an InVision Sync app (Mac only) to auto sync your wireframe files and assets. It also alerts you to notifications about recent project updates from other collaborators. If you’re not able to use their desktop Sync app, they also have an elegant drag and drop uploader on the project’s Screens page. However you manage your uploads, it replaces files with the same name, maintaining links, comments, etc. This let’s you make updates on the fly, upload it, see the changes, carry on.

Real time, in-context comments

When speaking with the client and his team (all in different locations), we drove them through a GoTo screenshare of the InVison “flow” of the screens. We were able to click through each step of a very detailed process, discovering ways to simplify, and saved potential development time in later phases by finding “what if” scenarios that needed to be addressed, the earlier, the better.

Throughout the call, we were dropping comments and notes in place, on-screen, of what needed to be addressed. The puffy red bulleted marks are a nice eye-catchy way to specify areas that need attention.

Those comments are also managed in the Comment History screen, which works perfect as an ongoing to-do list of action items. When you make a revision, you re-upload, comment and mark as Complete.



I love that it saves you the post-call time of merging call notes with the associated wireframes. It’s all done, real time.

Cost

I’m currently using the free trial, which is an unrestricted version of the subscription app, limiting you to only one project. I do plan to suggest it for other collaborative projects, not only for wireframing, but I can see it being helpful for presenting design mockups, as well. They have plans starting at $15 per month for 3 sites.

Conclusion

Overall, InVision provided an easy and engaging way to organize and feel in-tuned with the wireframes, while keeping everyone on the project connected and on the same page. It provides the developers and designers a solid foundation upon which to build. It allows some collaborative discovery time to explore new ideas and possibilities, building closer working relationships between the visionaries and the team who puts it all together. It brings some life to wireframes and the iterative process that goes into perfecting them.