Design a System
for Whiteboard Interaction

Can we accelerate development speed in a complex system using design approaches?
In this work, I introduced a new way to design collaboratively with developers.

Product Designer in a 8 SDE, 2 PM team

BeeArt↗
an online collaborative whiteboard

March 2023

2 months

# Web # Design System # toB

Key Solution Highlight

Overview

BeeArt is a B2B collaborative whiteboard platform serving enterprises like Huawei and Trip.com. BeeArt features facilitating outcome production process based on orchestrated steps & transforming visualized info into structured data.

Key Solution Highlight

Internal Efficiency Improvement

Before

Low development speed

frequently delayed whiteboard component delivery

Inconsistent interactions result in a disjointed user experience

After

Structure Interactions through Design System

Renovate Function Delivery Workflow by combining Engineer & design Mindset

33.3% increase in development velocity

80% reduction in component-related delays

Design Challenge

As a toB product, we benefit from meeting the functional requirements of our enterprise customers. Thus, the business success heavily relies on our development speed.

However, we have observed that whiteboard elements has become an unstable factor affecting the development speed. The flexibility of whiteboard components leads to intricate interactive rules that often result in delays.

Everyone is professional in their job, but why does the delay still occur?

We shouldn’t relay on team members to be "careful" to avoid mistakes. We need to design a standardized and integrated delivery framework to solve this problem.

As a product designer, the product owner assigned me the following task:

How can we use design approach to help improve function delivery speed?

Where are the mistakes?

To understand what were the obstacles to slow delivery speed, I walked through the past function documentation and took part in product & engineering meetings to observe their workflow. The research findings are as follows:

‍

‍

I gathered the story cards that led to the delay and tried to identify the root causes. The errors we made can be categorized into two categories.

‍

The major problems for each stage are:

‍

Traditional Design System Didn't Work Well for Whiteboard Components as our components couldn't be described as discrete variables

Interactions were overlooked as previous methods focused much on the static visual presence.

Solution Envision

How might we
integrate user interaction and component variants documentation into a unified system that enables seamless cross-functional collaboration?

Introducing New Concept

This model includes the following assumptions: human-computer interaction systems have "finite states" and are always in a specific state at any given time, and only specific "events" trigger "state transitions."

‍

With FSM, we redesigned the failed tasks. Red indicates the errors we neglected in previous tasks. Using FSM, the static states of the components and the interactions can be abstracted into clean mesh-like structures, exposing all the possible routes.

‍

Solution

Design System Renovation

1. Overview

The core of redesigning a design system lies in introducing interaction rules and integrating them into the design system to guide subsequent designs and ensure design consistency.

To address this issue, I integrated the concept of FSM introduced above and hierarchically structured the state machine inspired by game design:

Component: Describes the visual styles of elements in different state nodes and the conditions for state transitions.
Interaction Rule: Describes the interactive behaviors that elements can undertake, focusing on interactions and the style changes brought about by interactions.
Interaction Pattern: Describes a series of combinations of elements and interactive behaviors, such as attachment (select element a, move, drop on element b).

2. Whiteboard Elements as Component

At the component level, I focused on both the style of elements and the consistency of styles. When the style of a element is continuously changing, E.g., through stretching, we only need to extract the node styles that cause changes in elements or interactive behaviors.

✓ Abstract Element State: Focusing on the status breakpoint (visually & technically) of elements.

✕ Focusing on subtle style changes & not aware of the technical breakpoint.

3. Whiteboard Action As Interaction Rule

Interaction are a series of operations applicable to different elements.

Elements may exhibit different patterns of change under the same interaction. We also categorize these different behaviors according to interaction types (Basic) to ensure that the interaction results meet various user expectations in different scenarios.

4. Interaction Pattern

Delivery sOP Renovation

‍