The global pandemic has changed people’s methods of collaborating significantly, especially for the onsite environment. Many companies decided to ask their staff to work from home; in turn, Online Collaboration Whiteboards have become popular.
BoardX - Private Board
A board to enhance your online collaboration experience
BoardX?
My Role: UX Designer/Researcher
Duration: July 2021 -Aug 2021
Tool: Figma, Photoshop, Miro
Problem:
BoardX is an emerging company that focuses on the online collaboration environment. They want to build something different from the current whiteboard products on the market.
Solution:
My team conducted several rounds of interviews and research to understand the current users’ pain points. We collaborated with PMs and PMMs in translating research findings into the MVP. We decided to design a Private Board feature, a personal space for users to work and think. This tool enables the BoardX to stand out on the market, and this feature is currently under implantation.
Have You Ever:
felt uncomfortable with your thinking process fully exposed on others’ screens?
been struggling with switching between online collaboration platforms and note-taking platforms?
had trouble tracking your notes to certain parts of the presentation or teamwork discussion?
Don’t Worry, You Are Not Alone:
Those are some common problems that happen in our everyday online collaboration environment.
Our Founder mentioned that BoardX is supposed to solve the current online collaborative environment problems, so we conducted a landscape audit based on his advice and request.
Research Takeaways
We started our research with more than 20 in-depth interviews with online whiteboard users to better understand users' needs.
More than 70% of participants mentioned they had faced privacy problems in the online collaboration environment.
More than 60% of users said they have trouble with note-taking during the team meeting or presentation
They Said:
At this moment, 0 online whiteboards allow users to have their personal space to think and work. Personal privacy has become a considerable problem for many users.
“How can we leverage the creative capital of privacy in online collaborative environments?”
Design Solution
Based on our research result, we believe that users need a private working space to help them think and record, so we decided to add a Private Whiteboard option on the mainboard.
We believe that as a tool that may be used frequently, the Private Board needs to be in a prominent location.
We want users to know which whiteboard they are on, so we differentiated the private and motherboards. When users select private board, a red line will appear outside the board.
Why is Privacy Important?
“People need punctuating moments of private time to think or process information during collaboration.”
— Harvard Business Review
Other online whiteboards are trying to solve the board using the scenario:
From
Onsite office workshop environment
to
Online collaboration environment
The Using Scenario Can Be:
Users need to concentrate on the workshop but are distracted by switching tools to take notes 🙅
Users need to visualize their thinking process but don’t know where to do it 💁
Users need to take notes next to the workshop content, but there is currently no way to do so 👨💻
Users need to individually brainstorm but are distracted by others’ input 💆
Design Principle
The primary target audience for this platform is the people who need to have online team collaborations. They may be of different ages, backgrounds, and understanding of technology. My design needs to be inclusive for most users, so I want my design is:
Design Exploration
In the beginning, we came up with four solutions, and we collaborated with the product manager to identify the pros and cons for each potential solution; finally, we decided to use the floating window.
The default size of the Private Board is designed in a 4:3 ratio based on the 1/2 main whiteboard. Users can have enough space for activities while not affecting the content of the original whiteboard.
Private Board Functions
Add Text/Template
Users have full access to the mainboard functions, when Private Board is selected, the user can add the needed function by clicking the left toolbar.
Take Notes
To better save users time and connect their thoughts with the presenting material, we designed the Note-taking function in 5 simple steps.
Capture Tool - Select - Add Note - Confirm - Place
Re-locate Notes
Connect the personal notes and mainboard material won’t struggle users anymore, and they can trace back to the original content by clicking the locate button.
Private to Public
Users can always share their thoughts with teammates by quickly drag and drop.
To avoid the misoperation situation, we added a confirmation process before they post.
Brainstorm Mode
This is the essential function of the Private Board. This feature is trying to solve the major privacy issue of the online collaborative environment, and it gives users personal space to think and work. Since this function involves multiple roles, we differentiated the facilitator and participant pages.
To better reduce the facilitators’ time and workload, we made the function straightforward and added built-in templates. The facilitator can hit on the start button to start the mode. All the participants on the board (including the facilitator) will focus on the brainstorming board opening inside the private board.
Facilitator View
Participant View
The participant can do individual brainstorming and add ideas to the Brainstorm Board, and they can still browse content on the mainboard but are not allowed to edit it.
Before You Leave
We understand users want to save their work or notes for future use, so we added an export function. For the BoardX users, the private board will be automatically saved with the main board when you close the file.
Guests who are invited to the board will be asked to export their private board when they leave.
Design System
The BoardX’s existing design system has enabled me to design the new function effectively, and it also has helped with the consistency of the design.
Design Spec
To better communicate with the development team to develop a perfect product. It was vital for me to translate the style into words and numbers.
Reflection:
It was my first time working for a Startup company, and I saw how quickly design and technology can iterate and how important creative ideas can be. A design system can help designers rapidly understand a company's design style and communicate with Engineers more effectively. I hope our design can help more people who encounter privacy issues in the online collaboration environment. That's the essence of human-centered design.