BoardX

BoardX

Private Board Design

Private Board Design

Time: 2021 Aug / 4 weeks
Tool: Figma / Miro / Photoshop
Contribution: Research / UX Design

Time: 2021 Aug / 4 weeks
Tool: Figma / Miro / Photoshop
Contribution: Research / UX Design

Overview

Since Covid-19 outbreak, most schools and companies have been shifting work-mode from offline to online by using collaboration tools like whiteboards. They are trying to improve the collaboration experience but none of the online whiteboard platform gives users freedom to work on their own space.

Since Covid-19 outbreak, most schools and companies have been shifting work-mode from offline to online by using collaboration tools like whiteboards. They are trying to improve the collaboration experience but none of the online whiteboard platform gives users freedom to work on their own space.

BoardX is a startup company that focuses on online collaboration that powers co-working like workshop, presentation and brainstorm. Based on our research, we found that privacy is an important factor that users value when they are collaborating on whiteboard. We designed private board with similar functionality of the main board to improve the productivity of teamwork and it also can be used for different scenarios.

Background

In the kick-off meeting with product manager, they visioned BoardX as a potential tool for hybrid working environment that improves productivity of teamwork including collaboration, storytelling, and feedback. The transition from virtual to hybrid is happening and filling the gap between them becomes a challenge.

In the kick-off meeting with product manager, they visioned BoardX as a potential tool for hybrid working environment that improves productivity of teamwork including collaboration, storytelling, and feedback. The transition from virtual to hybrid is happening and filling the gap between them becomes a challenge.

Challenge for BoardX

The product manager mentioned that currently BoardX needs to improve user engagement and provides users more flexibility, so that we can keep BoardX users motivated and they will have a better performance in different collaboration scenarios.

The product manager mentioned that currently BoardX needs to improve user engagement and provides users more flexibility, so that we can keep BoardX users motivated and they will have a better performance in different collaboration scenarios.

Collaborate vs. Individual

Most of the whiteboard collaboration platforms focus more on collaboration than individual working experience. However, they are equally important for teamwork productivity, which means we need to give users enough privacy for a better hybrid collaboration experience.

Most of the whiteboard collaboration platforms focus more on collaboration than individual working experience. However, they are equally important for teamwork productivity, which means we need to give users enough privacy for a better hybrid collaboration experience.

Why Privacy?

Why does privacy matter to collaborative workflows?

Why does privacy matter to collaborative workflows?

Based on our research, having a private mode for participants’ input during workshops is also a highly requested feature for whiteboard. Users said they can be distracted, either actively or passively, by seeing other participants’ efforts on the board while coming up with their own ideas.

Based on our research, having a private mode for participants’ input during workshops is also a highly requested feature for whiteboard. Users said they can be distracted, either actively or passively, by seeing other participants’ efforts on the board while coming up with their own ideas.

How can we leverage the creative capital of privacy in online collaborative environment?

🤔 What the users said...

  • “I need to switch to Microsoft Word to take notes.”

  • “When someone is presenting I’d love to write down the question to ask. But later I’ll forget the where content is on the board.”

  • “I need a place to write down the thoughts just for myself.”

  • “During brainstorming, I don’t want to see what others are doing or let them see what I’m typing.”

💡 Identified Scenarios

  • You need to concentrate on the workshop but are distracted by switching tools to take notes.

  • You need to take notes next to the workshop content but there’s no way to do so.

  • You need to visualize your thinking process just for yourself but don’t know where to do it.

  • You need to brainstorm individually but are distracted by others’ input.

Solution

Based on our research results and discussion with PM, we think participants need a private board to think and work individually for better collaboration experience.

Design Process

The private board is attached to the main board while users switching the working space between them. Icons for teamwork will be disabled when users select private board but they are able to use all the tools from the toolbar. Users will be noticing that the board is active when it has the border highlighted and only the owner can see what’s on it.

The private board is attached to the main board while users switching the working space between them. Icons for teamwork will be disabled when users select private board but they are able to use all the tools from the toolbar. Users will be noticing that the board is active when it has the border highlighted and only the owner can see what’s on it.

Board Format

We proposed 4 different formats for private board to product manager. After comparing the pros and cons of different solutions, we decided to implement a floating window with the screen of main board to provide private working space.

We proposed 4 different formats for private board to product manager. After comparing the pros and cons of different solutions, we decided to implement a floating window with the screen of main board to provide private working space.

  1. Private Board Overview

  • Clear information architecture for user’s eyes to focus on the highlighted board.

  • Shared tool icons provide flexibility of using private working space experience.

  • Clear information architecture for user’s eyes to focus on the highlighted board.

  • Shared tool icons provide flexibility of using private working space experience.

  1. Personal content for individual working

  1. Personal content for individual working

  • Screenshot attached with personal notes help users better focus on individual working.

  • Tracking location improves the interaction between private board and main board out of different scales.

  • Screenshot attached with personal notes help users better focus on individual working.

  • Tracking location improves the interaction between private board and main board out of different scales.

  1. Interaction between private and public

  1. Interaction between private and public

  • The interaction between private board and main board makes it easier to share content to public.

  • Confirming moving content avoids user’s misoperation.

  • The interaction between private board and main board makes it easier to share content to public.

  • Confirming moving content avoids user’s misoperation.

  1. More flexibility and control on personal content

  1. More flexibility and control on personal content

  • Exporting and saving board give users more control on personal content.

  • Private board is always attached to the main board with autosaved notes for teammembers, while guests have the option to export and will be notified when leaving the teamwork.

  • Exporting and saving board give users more control on personal content.

  • Private board is always attached to the main board with autosaved notes for teammembers, while guests have the option to export and will be notified when leaving the teamwork.

Let’s try using the private board in a workshop session!

Let’s try using the private board in a workshop session!

Facilitator

  • By selecting options, facilitator can select brainstorm templates based on the need.

  • When facilitator starts the mode, all users on the board will focus on the brainstorming board that’s opened inside the private board.

  • All inputs will be shown on the main board when the mode is ended and facilitator can choose to display inputs anonymous or not.

  • By selecting options, facilitator can select brainstorm templates based on the need.

  • When facilitator starts the mode, all users on the board will focus on the brainstorming board that’s opened inside the private board.

  • All inputs will be shown on the main board when the mode is ended and facilitator can choose to display inputs anonymous or not.

Participants

  • Users can do individual brainstorming, add ideas and browse content on the main board but can’t edit it.

  • After finishing brainstorming, users can submit their ideas and update their input before the session ends.

  • Users can do individual brainstorming, add ideas and browse content on the main board but can’t edit it.

  • After finishing brainstorming, users can submit their ideas and update their input before the session ends.

👨🏻‍💻 👩🏼‍🏫 👨🏾‍🔧 👩‍🎨

👨🏻‍💻 👩🏼‍🏫 👨🏾‍🔧 👩‍🎨

The user is the one to decide how to use the private board.

The user is the one to decide how to use the private board.

Other Scenarios

  • If you’re a facilitator, you can save the workshop instruction for yourself.

  • If you’re a teacher, you can let your students finish their homework on private board before sharing on the main board.

  • If you’re an editor, you could prepare some content on a board and hide it from other people but you can still see and edit it.

  • If you’re a facilitator, you can save the workshop instruction for yourself.

  • If you’re a teacher, you can let your students finish their homework on private board before sharing on the main board.

  • If you’re an editor, you could prepare some content on a board and hide it from other people but you can still see and edit it.

Design Spec

To better communicate with engineers, we provided design spec for the private board.

Design System

To better communicate with engineers, we provided design spec for the private board.

Feedback & Future Vision

The product team indicates that the private board design highly aligns with their vision of how BoardX could develop in the future. With another personal space imbedded into BoardX, users have freedom to work offline without being distracted to achieve higher efficiency. The interaction between private and public will keep users interested and motivated for better product engagement.

The product team indicates that the private board design highly aligns with their vision of how BoardX could develop in the future. With another personal space imbedded into BoardX, users have freedom to work offline without being distracted to achieve higher efficiency. The interaction between private and public will keep users interested and motivated for better product engagement.