MENU

Microsoft Whiteboard – overview

I served as a Senior Designer and lead on the Product Design team for Microsoft Whiteboard from 2016-2019.  I also served as a manager on the team during 2019.

Product concept

In mid 2015, I was part of a small team of OneNote folks asked to envision, build, and test a new type of product for Microsoft, designed to be used primarily on Surface Hub for multi-input collaboration.   Needless to say, this was a seriously exciting opportunity – it’s not every day that you’re asked to help build a completely new productivity app for Microsoft.

Some initial ethnographic research had been done before the project kicked off, and we knew that there was a gap for meeting collaboration around freeform input, particularly for remote participants.  Physical whiteboards were (and continue to be) essential for lots of types of in-person collaboration, but there wasn’t a good digital equivalent that could allow remote participants to join in.  And physical whiteboards have lots of limitations – they can’t be shared and are restricted to drawings.  A digital evolution of this medium could allow a new level of collaboration for IWs, classrooms, and even home users.

Opportunity statement

Collaboration during meetings can be difficult when participants are remote or are forced to rely on text alone to contribute their ideas. Providing all meeting attendees a way to work together in real-time, using digital ink, touch, and rich objects can make meetings more effective.

From concept, to MVP, to major product offering

Our goal was to start with a simple MVP to test our mission statement. We’d learn from in-market telemetry on our MVP to improve the product and work towards a larger, more comprehensive vision.

We quickly put together our MVP app based on existing OneNote technology to serve as our proof of concept. It had just a few pen colors, an eraser, lasso select, and an undo button. It was designed to be used with the Surface Pen and touch and was built-in to the shipping device image of Surface Hub.

 

The very first release of Microsoft Whiteboard

While it was a useful tool for 2 or more users who wanted to draw directly on the Surface Hub’s interactive display, it was quite limited in its functionality.  The free-form canvas could be used by anyone in the room, but remote participants were limited to watching a screen share. Collaboration required all participants work on a Surface Hub, which made for an exclusionary experience

Despite these limitations, we heard from lots of users that Whiteboard was hitting the core value proposition. Their feedback helped us prioritize the missing functionality that would make it an essential daily tool.  In particular they wanted robust real-time collaboration on any device, more canvas intelligence, and better rich object support.  We also saw on expansion

We used this feedback to set a roadmap for the product design and feature-set that would help us develop the product over the next few years.

In late 2016, our MVP gained some traction inside & outside of the company, and a larger team was assembled to flesh out our Whiteboard product vision.

This vNext would be a new, standalone productivity app designed around free-form input, real-time collaboration, and modern meetings. It would continue to work on Surface Hub, but would break away from OneNote paradigms and work on lots of new platforms.  I was a member of that team.

Microsoft Whiteboard circa 2019

In a few years, we created an incredible digital Whiteboard experience that expands far beyond what a traditional analog Whiteboard can do – you can invite a co-worked from the other side of the planet to your meeting and collaborate on a schematic in real time.  While you’re remote participants are working, you’ll see exactly where they are on the canvas so it’s easy to feel like you’re in the same space.  Or if your teammates don’t have a large screen interactive display, they can join from any Windows or iOS device and contribute ink, text, images, sticky notes, and more.  If you’re having trouble communicating your ideas, Whiteboard can help you find content from Bing to visually show what you’re thinking.

We heard from all kinds of customers who say that Whiteboard has made their meetings more inclusive, their classrooms more engaging, and their brainstorming sessions more productive than ever.

Whiteboard remains an integral part of Surface Hub and ships on the latest generation hardware.  It’s also available in the Windows and iOS app stores. We built a web app in preview and there are plans for more experiences in the future.

 

The team

I was one of two designers chosen to design the first versions of the Whiteboard experience.  We eventually grew to a team of 10 designers, a subset of whom reported to me.  The team worked on a variety of projects from our different Whiteboard app/web clients, to new device experiences, Surface integrations, vision explorations and more.

Target audience

Our research and my prior work on OneNote uncovered two main target audiences for Microsoft Whiteboard.

  1. Information workers could benefit from a digital whiteboard that would allow them to collaborate with in-person and remote participants, access their work from multiple devices, share with co-workers easily, and power up their brainstorms with richer canvas experiences.
  2. Teachers could benefit from a digital whiteboard that would allow them to prepare more advance in-class lectures, enable collaborative group projects for students, share lectures to students en masse, and connect to their existing OneNote Class Notebooks.

Our two primary audiences for Microsoft Whiteboard.

Design goals

Our design goals for Microsoft Whiteboard.

Collaboration first

It should be no surprise that when meetings are more collaborative, more ideas are generated, better ideas are generated, and productivity is higher.  That’s true of both scheduled and ad-hoc meetings, brainstorming sessions, and problem solving huddles.  And while analog whiteboards are great for collaborating with another co-located person, nowadays 70% of people globally work remotely at least once a week. That’s a huge opportunity.  We wanted to enable people to collaborate with co-workers that are local, across the street, or across the globe. I’m the lead for the collaboration efforts on Whiteboard.

Collaboration in Microsoft Whiteboard

The number one design goal for the app was to make sure that Whiteboards are extremely easy to share with others.  Our number one metric for measuring if a user is “engaged” is whether or not , is if they’ve recently participated on a Whiteboard with a co-worker.

For more on the collaboration experience, see my deep dive on the Sharing and collaboration experience I designed for Whiteboard.

 

Deceptively simple

Every designer strives to make their product easy to use, but Whiteboard has a special constraint here.  Because the app is used on communal devices such as the Surface Hub, most customers’ first introduction to the app will be in a meeting environment.  That means learning how to use the app on the spot and in front of your peers (potentially in a high-pressure scenario). For this reason, we set out to make Whiteboard extremely approachableany new user should be able to walk up, grab a pen, and start using the basic functionality within 30 seconds.  The more advanced features will make themselves more apparent as your comfort level with the app increases.

A look at the overall simplicity of Microsoft Whiteboard – designed to be approachable for any new user

 

Free-form creation

A look at free-form content on Whiteboard

Whiteboards are inherently free-form.  Word documents and emails are not.  We wanted to retain the free-form nature of analog whiteboards while simultaneously allowing users to do new things that can only happen with a digital canvas.  Some examples of this:

– The “infinite” canvas grows to accommodate its contents

– Any object can be placed anywhere on the canvas

– Simple gestures quickly let a user see the entire canvas at once

– Hand-drawn shapes automatically correct to create “perfect” shapes

– Nested rectangles automatically create tables that grow and stretch to fit their contents

Making the canvas feel truly free-form was a team effort. For more on the aspects of the free-form canvas which I designed, see my deep dive on the Free-form canvas model.

 

Full of delight

We set out to make Whiteboard as delightful as possible.  Our motion + visual designers have filled the app with motion and visual delights such as rainbow and galaxy ink:

The team introduced elements like “rainbow” and “galaxy” ink to Whiteboard, much to our users’ delight

I also design the “velocity eraser” which grows as you quickly erase to even make the act of removing content feel enjoyable:

The velocity eraser erases more content if you move the eraser quickly

Project highlights

Below are some parts of Microsoft Whiteboard that I’ve designed over the years.  Click one for a deep dive.

★ Collaboration experience ›

Canvas model (coming soon)

In-app teaching ›

Object snapping ›

Whiteboard as a React app ›

 

Customer appreciation

Customers seriously love Whiteboard.  Rather than just tell you, I’ll let some customer feedback speak for itself. But beware, the list goes on and on…: