Back

Building the Motion Product Practice

Overview

When I joined monday.com, motion design had no role, no precedent, and no expectation within the product. I built the practice from scratch: researching what motion should mean for a complex work platform, defining its strategic purpose across the R&D org, and growing the team that brought it to life.

Role

Motion Design Team Lead

Concept, Strategy & Delivery

Part 1

Establishing Motion’s Purpose

The first question wasn’t how to animate. It was why. I formalized a framework that gave the entire R&D org a shared language for motion’s role in the product. Every animation we ship belongs to one of four pillars:

Orientation & Guidance

Motion that tells users where they are and where things came from.

Attention & Education

Directing focus to what matters, at the moment it matters.

Feedback

Every action gets a response. No state change goes unacknowledged.

Brand Recognition

The motion signature that makes the product feel unmistakably itself.

Part 2

From Decoration to Communication

The framework changed how we responded to motion requests. Where teams once asked for “a delightful animation,” we now had a language to push back with the right question: which pillar does this serve?

The Dashboard Refresh is the clearest example. Before the framework, a data refresh happened silently. The UI updated with no signal to the user. Motion’s job here wasn’t decoration. It was communication.

The Shift: If a state change occurs, it must be visible and clear. No user action goes unacknowledged.

Ex. 01: Dashboard Refresh Button

Before

  • The data refreshed silently. Users had no way to know the update had occurred.

After

  • A deliberate pause before the refresh draws the eye to the change, making the system response impossible to miss.

Guidance through Behavior

A one-time expand-collapse animation that reveals hidden tabs on first entry. By using motion instead of instructions, users learn through behavior, ensuring discovery without pop-ups or extra clicks.

Feedback with Location

I bridged the gap between the editor and list view with a subtle pop animation. The new item appears exactly where it was added, so users always know where to look next.

Brand Recognition

I replaced jarring search "hard cuts" with a fluid transition where loaders evolve directly into "No Results" illustrations. This eliminates the feel of a system failure, ensuring stability and brand charm through continuous motion.

Guidance through Behavior

A one-time expand-collapse animation that reveals hidden tabs on first entry. By using motion instead of instructions, users learn through behavior, ensuring discovery without pop-ups or extra clicks.

Feedback with Location

I bridged the gap between the editor and list view with a subtle pop animation. The new item appears exactly where it was added, so users always know where to look next.

Brand Recognition

I replaced jarring search "hard cuts" with a fluid transition where loaders evolve directly into "No Results" illustrations. This eliminates the feel of a system failure, ensuring stability and brand charm through continuous motion.

Guidance through Behavior

A one-time expand-collapse animation that reveals hidden tabs on first entry. By using motion instead of instructions, users learn through behavior, ensuring discovery without pop-ups or extra clicks.

Feedback with Location

I bridged the gap between the editor and list view with a subtle pop animation. The new item appears exactly where it was added, so users always know where to look next.

Brand Recognition

I replaced jarring search "hard cuts" with a fluid transition where loaders evolve directly into "No Results" illustrations. This eliminates the feel of a system failure, ensuring stability and brand charm through continuous motion.
Active slide 1 of 3

Part 3

From Framework to Delivery

I integrated motion into the Design System via two layers:

Motion Tokens: Standardized values that create a consistent physical “weight.”

  • Duration: Mapped to user goals, from Micro-interactions (70ms) to Attention (500ms).
  • Easing: Purpose-built Cubic-Bezier curves for Enter, Exit, and Transition states.

Motion Patterns: A curated library of reusable behaviors that prevent visual fatigue and ensure platform-wide consistency.

Tokens

Duration

Cut0msInstant state change, no transition
Extreme Short70msMinor changes: color change, fades
Short100msMicro interactions: toggle, button press/release
Medium150msComponent appears, dialog box, button
Long250msInteraction with emphasis: chips, tabs, fab
Soft350msTransition of big element or distance: cards
Attention500msSystem alerts, notifications, errors

Easing

Entercubic-bezier(0, 0, .2, 1)Use for object appearance
Exitcubic-bezier(.6, 0, 1, 1)Use for object disappearance
Transitioncubic-bezier(.4, 0, .2, 1)Use for changes between states of the same object
Keyframecubic-bezier(0.33, 0, .67, 1)Use to build keyframes
LinearlinearUse for opacity: fade or color change

Patterns

Pop Directional

Highlights the spatial relationship between parent and child components.

Pop Enter

Standardizes the entrance of new UI elements

Pop Emphasize

A non-intrusive method to grasp attention without breaking the user's flow.

The impact

Patterns Create Flow

By combining Tokens (the rules) with Patterns (the behavior), we gave every team in R&D the tools to ship consistent, high-quality motion without needing a motion designer in the room.

  • Consistency

    Designers and engineers can now implement high-quality motion independently.

  • Efficiency

    Reduced the need for custom motion specs by ~50% through reusable system components.

  • Usability

    By highlighting relationships and state changes consistently, we significantly reduced the cognitive load required to navigate complex boards.