Design

A look into the collaborative wireframing process

4 min read
Mike Waecker  •  Feb 6, 2019
Copied To Clipboard

Wireframing is a critical step in design—for you, for developers, for copywriters, and for anyone else who needs to understand your design.

With all those people needing access, wouldn’t you want to work collaboratively from the get-go?

Together from the start

Why bother making a wireframe collaboratively?

Well, for starters, collaborating lets you get feedback from your peers and stakeholders early on in the design process, keeping you from endless feedback cycles and helping you launch better designs faster.

Live working sessions

Whether you’re sitting right next to someone or they’re halfway across the world, working sessions help foster creativity. Ideas are the gift that keeps on giving—one leads to another leads to another and, before you know it, you and your team are throwing creative calls back-and-forth like old pros.

“Collaborating lets you get feedback from your peers and stakeholders early on in the design process, keeping you from endless feedback cycles and helping you launch better designs faster.”
Twitter Logo

Taking flight

We like to start any working session by reviewing:

  • What product or webpage we’re wireframing
  • Who the end user will be
  • What did they come to this section to do

Then we begin a timer and get to it. Since InVision Freehand allows multiple users to work in a single document simultaneously our working groups begin in a frenzy, with people jotting down ideas left and right and above and below one another. After a few minutes of chaos, there are tons of ideas—and everyone’s had a chance to review what’s coming out of their teammates’ keyboards.

“Ideas are the gift that keeps on giving.”
Twitter Logo

That transparency leads naturally into the next step: voting.

Voting on ideas

If you’ve just come out of a live working session or if you’ve put together a series of wireframes on your own, Freehand is a great way to let people weigh in on what they like.

Continuing on the working session example above, let’s imagine the timer has stopped and the team has 15 different wireframe concepts in the document. You’re all obviously proud of the ideas you’ve put forth, but the team can really only continue with a few, so you need to figure out which ones the team is drawn towards.

Freehand lets you do informal voting easily: just put an “X” or a “+1” (or draw a :+1: if you’re feeling fancy) next to ideas you like and some favorites quickly emerge.

If you like only a part of an idea, you can easily circle it with the Pen tool and put an indication of appreciation next to that.

Pro tip: When you draw that circle, switch to a lighter tone of the text color.

Gathering feedback

So you and the team have landed on a wireframe, or a few, that you want to present to stakeholders. Awesome!

But, oh no, the next available free time that stakeholder has for a presentation isn’t until late next week—putting your team way behind schedule.

Freehand has you covered; just send that stakeholder the Freehand your team was just working on, or a tidied up version with just the final favorites, and ask for their feedback.

They have the ability to circle, point to, or even cross out components of the wireframe, and leave comments right next to the item they just drew on.

You should encourage reviewers to provide some gut impressions and written feedback when sending asking for a review—this will give you and your team more information than simply a :+1: or :+-:, so the changes to be made are informed.

Putting it all together

Collaborative wireframing with Freehand shortens the time to feedback and certainty during the earlier stages of a project. Through live working sessions, voting, and asynchronous feedback, you and your team can land on the right direction quickly, leaving a bit more time later in the project to make things pixel perfect.

Want to learn more about wireframing?