How we use Freehand (our digital whiteboard) at InVision

While most of the buzz around InVision HQ (which is just the #team channel in Slack) recently has been about InVision Studio, Design System Manager, and some of our recent acquisitions and launches, we thought it might be a good idea to showcase how we’ve been using one of our own products that’s been available for a little while.

I’m talking about Freehand, the infinite, collaborative whiteboard space where your team can work through design ideas in real time. Freehand in InVision lets you rapidly capture feedback throughout the product design process in a real-time, flexible, and collaborative way, all contained in your desktop or mobile browser. You spend less time exporting work into presentable formats and more time creating meaningful experiences for users in collaboration with your team.

Kaysie Garza, one of our content specialists, puts it like this: “Freehand, in particular, is a product for anyone. You don’t need any special skill set to come into an empty Freehand whiteboard project and start working, so it’s often a good waypoint between ideation, planning, and basic wireframes before entering a more specialized design arena. We use it because it’s the halfway point we need, not just because it’s our product.”

Related: Wireframing vs. prototyping: What’s the difference?

Here are some other ways we’re using Freehand in-house to make designing our products and experiences better, faster, and more efficient.

Brainstorming

Part of the design thinking process is getting all of your ideas (good, bad, or otherwise) out in the open for analysis. Some people prefer to do this on paper while others like to mind map and brainstorm digitally with a whiteboard. Why not try a hybrid of both?

With Freehand, your team can brainstorm ideas and solutions collaboratively. Think of it as an endless whiteboard with built-in commenting that everyone can add to all at once. You have the freeform creative style that paper gives you alongside the collaboration and backup that a digital tool offers.

Stephen Olmstead, our VP of Product Strategy, likes the limitless possibilities that a new Freehand project offers: “Freehand is a blank, infinite canvas. I don’t need to start with a priority, and I don’t even need to understand how deep in the weeds I am when I first start. If I find that I need to be on a higher level, I simply zoom out and construct a larger idea. If I’m too high level, I zoom in and add more details.”

Freehand also offers some variety when it comes to the design elements within the product. Claire Karjalainen, our Senior Manager of Design Education, likes to use different color and opacities to showcase varying levels of connection: “[The line tool] allows you to create visual distinctions between parts of your plans, and use different opacities to show different levels of intensity. It gives nuance to something that could otherwise just be overwhelming.”

“Freehand is a product for anyone.”

There are a few ways you can create your first Freehand. The easiest way is to simply click the “+” button inside InVision and select Freehand. Save it as a draft, and it’ll be added to your projects for easy access later.

You can also create and collaborate with Freehand using our free app for iOS. With the whiteboard app functionality, you’re able to draw and write with an Apple pencil for more flexibility and detail.

If you’re working in Sketch or Photoshop, you can generate a Freehand right from your design environment with the Freehand plugin from Craft. Lastly, if you have the InVision for Slack app, just type /freehand into any channel to generate a brand new Freehand document.

Pro tip: Your drawing experience is completely transformed when you hold down the alt/option key. Go from weird toddler-esque shapes to near perfection with the touch of a button:

Related: How to make your first wireframe

Bridging the gap between low and high fidelity

Another part of the design thinking process is generating prototypes and solutions. Once again, feedback (and potentially approvals) is a key piece of this step. Freehand gives your team an open space to view screens and workflows, weigh in on changes, and collectively move forward.

Claire uses Freehand to bridge the gap between a low-fidelity idea and a high-fidelity prototype: “Nothing beats a visual medium for getting people onboard with a shared vision and showing interactions between things. [Freehand is] a no-brainer for visual projects, of course, but it can also help people understand relationships and progressions—chronological time, lead flows, where programs fit in relation to other programs, etc.”

“Freehand is a blank, infinite canvas.”

Will Fanguy

To load images or screens from your computer into Freehand, select the image tool at the top, then choose an image on your computer. You can also just drag items right into your browser. Looking for feedback on your latest prototype? You can copy and paste layers, groups, and artboards from Sketch or Photoshop.

Related: Low-fidelity vs. high-fidelity prototyping

Visual planning

Freehand is great for more than just digital product design. It works well for any kind of visual planning as long as you’re open minded.

Our Senior Manager for Industry & Partner Events + Sponsorships Jessi Thorp uses Freehand to help plan some of our in-person InVision events: “I design in-person events, so my nature is to be very visual when conveying ideas or concepts to my colleagues or partners. Freehand has allowed me, in real-time, to highlight the attendee experience through storyboarding. I’ve uploaded venue floor plans and laid out the activations with our partners and vendors, saving valuable time on-site.”

Using Freehand in this visual, collaborative way really helps the tool shine. Once you’ve spun up a Freehand project in Photoshop or Sketch, hop into the browser with your team and get feedback. You can markup the screens using the pencil and text tools, leave comments and feedback, and sketch out new solutions.

Once you’ve come to a consensus on the changes, you can go back into your design tool, redesign your project based on what your team discussed, update the Freehand in two clicks, and watch the changes sync quickly with the Freehand project in your browser.