Redesigning collaborative-remote-whiteboard experiences for designers — Invision Freehand

Before the “Work From Home” became a daily dose for all of us and before even companies started launching efficient solutions for remote collaborations, I was facing the issue of whiteboarding collaboratively with my peer whom I met weekly on an online video conferencing call. And a week later, WFHs happened and people starting finding ways to carry out their BAUs effectively.

I am working on designing data visualizations for one of my research projects and right now we are at the stage of designing and critiquing each other’s designs. My fellow researcher and I recently used invision freehand and our sketches came out a bit shaky to be presented to other folks, but nevertheless I was pretty impressed by the functionality of invision and the outcome we had looked something like this.

Credits: Invision Freehand

Step 1: Defining the problem

Not all my peers whom I collaborate with on the projects have a digital book(iPad.notebook/tablet-stylus) and therefore remote collaborative sketching is not as seamless. All of us have three things in common — pen paper and a laptop. Therefore I focussed primarily on the three problems:

1. Integrating the paper/pen sketching experience to online whiteboard experience
2. Focussing on ways of the non-intrusive amalgamation of getting hand-drawn sketches to the already existing online whiteboards
3. As designers, we value our whiteboarding sketches and the associated thought process, therefore making resultant designs presentable.

Step 2: Deep dive into whiteboarding experience

Let us dive into what are the features most important in a whiteboarding experience:

1. Drawing with freehand
2. Vast (nearly endless) canvas — zooming capabilities
3. Collaboration — other people be able to view and comment on your drawings
4. Erase and edit capabilities — both by self and collaborators

Step 3: Sketching

I did my brainstorming and came up with a few idea sketches:

Figure 1: The crazy-8 sketching for digital whiteboarding

After looking at various great freehand drawing tools like Invision freehand, Limnu, Microsoft whiteboard and many more, I realized that they all required digital touchscreens and pencils for the actual freehand experience. (Let's accept, trackpad/mouse drawings are not actual freehand)

Step 4: Pick solutions

From figure 1, I would want to design an experience that is a combination of:

Idea 1: Hold the paper in front of the webcam and it sticks the whiteboard to draw

Idea 8: Scan the paper drawing through the phone to transfer into drawing on a whiteboard on the laptop.

I wanted a feature on the software to embed hand drawings into online boards, on the fly. Having said that, the picture should not be pasted on the canvas rather converted into a drawing and fixed.

Step 5: Redesigning Invision Freehand

I have previously used Invision freehand to draw and brainstorm with my colleagues and it has turned great in the past. So, rather than going for a completely new design, I wanted to do a redesign or to be specific, do a minimal feature addition. I have made a few mockups of how invision freehand can integrate a drawing scan feature.

Pop-up notification on invision mobile app (left), Click to scan the drawing via camera (middle), send to the laptop or redo (right)

Step 6: Conclusion and learnings:

1. My initial hunch was with idea 1, where the user would hold the paper in front of the laptop camera and the drawing gets scanned on the board. But while discussing this concept with my friend, Bhawna Agarwal, she pointed out that scanning or pointing at things with the phone comes much handier and why not leverage that. I was convinced of the idea and hence added an extended experience with the phone.
2. This idea was extensible too — it just bypasses the process of ‘clicking the picture and uploading it on the online whiteboard (or google doc) and letting others comment’ on that to a shorter version of ‘pointing your phone camera to the drawing and it automatically draws it on your whiteboard’. If I were to convert this idea into a chrome plugin, how cool would that be?
3. This redesign was never contesting the actual touch device and stylus pencil experience. This was mainly finding an easy cost-effective solution with limited resources in hand.
4. These designs are under the assumption that we would be able to convert images to drawing seamlessly. (My engineering heart says it’s possible)

You might have noticed that I have obsessed about having paper and pen experience to convert into a whiteboard experience. It was a great exercise for me to make my mind work with a constrained set of resources and environment (remote) and come up with very basic functionality that keeps parallels of physical and digital experience. I hope to build this as an independent plugin in the future which would potentially pace up the productivity during remote brainstorming sessions.
All we can do right now, in the middle of this pandemic, is to make our remote experiences more realistic and stay safe and productive in the situation.

P.S. Special thanks to my friend Bhawna Agarwal for brainstorming on this with me, proofreading and pouring in her great insights!