Back

Building the Motion Product Practice

Overview

When I joined monday.com, teams asked for “a delightful animation.” Nobody could say what for. There was no motion role and no precedent, so I built the practice from scratch: what motion means in a complex work platform, why any given animation earns its place, and the team to make it.

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 built a framework that gave the R&D org a shared language for what motion is for. 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

Which Pillar Does This Serve?

The framework changed how we handled requests. Where teams once asked for a delightful animation, there was now a question to answer first: which pillar does this serve? Most requests died there, and the ones that survived were better.

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.

Ex. 01: Dashboard Refresh Button

Before

  • UI updated silently. Nothing told the user it had happened.

After

  • A deliberate beat before the numbers change pulls the eye to them. You can't miss the update now.

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

Two Layers

I put motion into the design system in two layers.

Tokens are the values. Durations aren’t scaled to the size of the element. They’re mapped to what the user is trying to do. A toggle gets 100ms because you’re mid-thought. An alert gets 500ms because it needs you to stop. Easing is five curves: entering, exiting, moving between states, building keyframes, and plain opacity.

Patterns are the behaviors built from those values. A fixed set, so the product doesn’t end up with forty ways to do the same thing.

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

Motion Without a Motion Designer

Tokens set the rules, patterns carry the behavior. Together they let every team in R&D ship consistent motion without one of us in the room.

  • ~50% fewer custom specs

    Reusable system components replaced most one-off motion work.

  • Teams ship on their own

    Designers and engineers implement motion themselves, and it comes out consistent.

  • Less to read

    Handling state changes and relationships the same way every time cut the effort of making sense of a complex board.