COMPANY

tldraw

COLLABORATORS

CEO
Software Developer

RESPONSIBILITIES

Research & Analysis
UX Design
UI Design

OVERVIEW

With the new 'Groups' feature–a collaborative space where users share visibility of files–users can pin, unpin, reorder, and move files. These actions can become complex when the system's automatic rules conflict with user behaviour and the need to align with tldraw's design principles.

For the upcoming feature, we needed to support structured file organisation without breaking user trust.

Whilst I designed the overall end-to-end experience, this case study focuses on defining interaction rules that resolve conflicts between manual actions and automatic sorting, keeping file order intuitive and predictable.

Creating a group: The empty state guides the user by suggesting the first actions they can take

USER AGENCY VS SYSTEM RULES–TWO COMPETING SOURCES OF TRUTH

Each action sounds simple on its own:

- Move files into and out of groups
- Reorder files
- Pin and unpin important work

The difficulty wasn't the gestures themselves–but how their rules collided. Manual actions and automatic recency sorting were competing for control of the same list. Without a clear precedence model, the system behaved unpredictably, and users lost confidence in where the files would end up.

This created three failure modes:

MANUAL VS AUTOMATIC RULES

User-driven changes clashed with system-driven recency sorting, creating inconsistent outcomes

COLLAPSED LISTS

Files could move out of view inside long, collapsed sections, making items appear to 'disappear'

AMBIGUOUS DRAG GESTURES

Small contextual differences triggered different results, reducing predictability and increasing cognitive load

Sidebar: Hovering over a group name highlights its files and displays action buttons to improve visibility and access

So the problem wasn't 'how do we move files?', but something more fundamental:

How do we balance automatic ordering with direct user intent–without letting files disappear?

DESIGN PRINCIPLES

The groups feature needed to align with tldraw's philosophy:

HIGH TRUST

Generous, low-barrier collaboration rather than heavy permission layers

SIMPLICITY

Iteractions should be lightweight, low-friction

FOLK-USABLE

Flexible enough for people to adopt them in a creative way for their personal workflows

Move file across groups: Closed groups auto-expand so users can see where the file landed

Strict recency sorting: In long groups, strict recency sorting can push an unpinned file below Show more, creating the impression it disappeared

MAKING A DELIBERATE EXCEPTION

I benchmarked other tools, mapped user stories, documented edge cases, and worked closely with the CEO and staff developer. We scoped the collaboration model to be intentionally lightweight (invite links, group-level ownership), letting the design effort focus on organisational rules and interaction mechanics.

Pinning sounds trivial–keep important work at the top–but it became complex once combined with recency sorting and drag gestures. Early testing confirmed unpinning was particularly confusing: Files could 'disappear' in long lists, making the action feel broken.

To resolve this, we defined a two-part ordering model with a deliberate exception:

Group pinning logic: When a user takes a manual organisational action, always leave the item in a visible, predictable location immediately after the action

This model reconciles control and predictability: pins are stable, recency governs discovery and unpinning provides immediate, visible feedback.

Automatic unless intentional: (1) Recency is default order (2) Pinning overrides recency and creates manual order (3) Unpinning is treated as the latest event, returning the file to recency

Pinning: When a file is dragged over the pinned section, the area highlights as a drop zone. A handle bar appears to show that pinned files can be manually reordered–if no files are pinned yet, only the bar is shown

Unpinning: When the dragged file is over the unpinned section, it will only display a drop zone, as the file will be placed on top of the list

Context-based gestures: Drag direction and origin determine whether the file is pinned, unpinned, or moved

GESTURE SEMANTICS AND DISCOVERABILITY

Gestures are context-based:

- Drag up within a group: pin
- Drag down within a group: unpin
- Drag across groups: move to target group

These gestures are intentionally lightweight and slightly 'secret'–reflecting tldraw's interaction language. Discoverability comes from consistent cues: hover states reveal drop zones, clear sections appear during drags, and drop indicators show exactly where a file will land. All actions are also accessible through the contextual menu.

Our goals: (a) A move should never surprise the user, (b) a dropped file should always end up where the gesture implies, and (c) every action should have visible confirmation.

Groups will be rolled out internally first, followed by a feature-flagged release. We'll monitor usage patterns to validate that the gesture model is predictable and intuitive.