Microsoft Whiteboard

Microsoft Whiteboard is a collaborative digital canvas in Teams that remotely engages students and instructors in effective learning and interactive class exercises.

Released Article | Video

UI/UX Design | Interaction Design | Mobile Design | Motion Design | Prototyping

Durations

7 Months

Tools

Figma, Protopie.

Mobile MVP Launched On

Sep, 2021

My role

UX designer for mobile

UX framework expert across platforms (shape manipulation & context menu)

Overview

From Dec 2020 to Jun 2021, I was working as an interaction designer (contractor) in the Microsoft Whiteboard team, focusing mainly on mobile & laptop UX Framework and mobile interaction design.

Majority of mobile users are reactors & viewers

Frequent mobile editors & viewers are students in developing countries.

Although there are very few frequent mobile editors in the U.S., many students in developing countries, such as India, can only use the mobile Whiteboard as they can only access mobile devices during the COVID period. Thus, we want to make sure that the editing experience is user-friendly to them.

Key Scenarios

Problems

How can we design a scalable, inclusive, and user-friendly Whiteboard mobile UX framework to improve customer ratings, reduce operation errors, and increase the mobile customer conversion rate?

My design process for improving the UX framework for viewers & reactors

Create Design Plan

Improved mobile information architecture

Mobile UX framework brainstorming

Make sure that the insert new items features are clear, easy-to-understand, scalable, unique, and delightful while ensuring the largest view space for viewers and allowing quick reactions for light reactors.

Design standard: recognizable, discoverable, scalable, simplified, and delightful

Design Flow

Usability Test

To evaluate the design, I created a mobile prototype and worked with our UX researcher to conduct 11 usability tests with target mobile users to understand the effectiveness, usability, and potential issues of the design. Then, I iterated the design and updated the prototype.

Here is an older version of the Protopie prototype we used in the 1st usability test session.

UX Framework Design

Increases the scalability
Improve the discoverability and recognizability of features
Leaves more view space
Prevent accidental editing
Simplicity & delightfulness

2nd Iteration changes based on usability study insights:

Make the reaction stickers more accessible.
Make Undo/Redo more accessible and flexible.
Allow users to view other users and follow someone.
Adapt to new Teams meeting UI.

Old

Iteration 1

Iteration 2

Mobile-Specific Rotation & Scaling

Painpoints:

The old rotation and resize allow users to resize proportionately only from one direction. Users find it really hard to select the handle on touch screens or may accidentally select it, causing a lot of usability complaints.

Design requirements:

Users can scale from 4 directions.
Prevent accidental rotation.
Allows both proportionate and disproportionate scaling.
Larger touchpoint for touchscreen users.

Old

Iteration 1

Iteration 2

Light Reacting - Insert Quick Reaction Stickers

Painpoints:

Viewers or reactors cannot insert stickers as reactions to whiteboard contents.

Design requirements:

Prioritize sticker insertion.
Users should easily discover and insert stickers.

Iteration 1

Iteration 2

Share & Follow

Painpoints:

Mobile users cannot easily follow someone.
Old sharing design does not provide multiple sharing options to users.

The New Design:

Allows users to share the whiteboard by searching a participant in the contact list, searching emails, exporting the board as image or pdf, and copying an invite link.
Allows users to easily view participants or follow someone.

Follow a person

For each feature, I created and presented at least 3 versions in the design review, and finalized the design decision based on all team members’ feedback.