Email Work LinkedIn Dribbble
WINDOWS 11

Motion language, UI Motion, animations, and implementation for Microsoft's Operating System

I currently lead the design, implementation, and documentation of motion and animations for all features across Windows 11.

Jump to:

01. Designing the Motion

02. Building Blocks

03. Benefits of Motion

04. Product Making Process

05. Measuring Success

01.DESIGNING THE MOTION



For a Functional and Delightful OS

I designed motion on Windows 11 functionality and delight in mind. They guide all transitions and animations so the OS feels connected, responsive, and alive.

These principles are also documented on the Windows App Development site.

Functional Motion

Defined by light, connected, adaptive, and consistent transitions. It helps users retain context, predictability, and boosts confidence.

Light
Transitions are near instant and reinforces an action. They soften interactions and help users process changes easier.
Connected
Transitions are near instant and reinforces an action. They soften interactions and help users process changes easier.
Adaptive
Transitions help confirm and optimize for input and hardware changes, and reveals elements to boost user confidence.
Consistent
Transitions for UI with similiar entry points transition with established patterns to create predictability.
Delightful Motion

Defined by micro-interactions, animated icons, device driven animations, and unexpected moments. They add refinement, elegance, and a heartbeat.

Micro-interactions
Animations in UI elements increase responsiveness and user confidence by reacting to stages of user input.
Animated icons
Animations in icons can reveal purpose and reinforce actions by providing additional layers of information.
Device driven motion
Animations of software recognizing and reacting to hardware changes adds immersion and intentionality to a user's experience.
Unexpected moments
Animations purely to delight users are opportunities for ownable signature experiences and help memorability of a product.

02.BUILDING BLOCKS



Foundations Enabling Motion Implementation

Motion on Windows 11 was designed and implemented through easing curves, Lottie Windows, and WinUI. Together, they keep transitions consistent, simplify workflows, and reduce engineering costs.

Easing curves: UI motion + transitions

Easing impacts how gentle or strong something appears and disappears, drawing attention or softening elements. I chose these curves so transitions could feel fast, responsive, yet gentle when necessary.

Documented on the Windows developer docs website and toolkits.

Fast Invoke
Ease: Cubic-Bezier (0,0,0,1)
Timing: 167, 333, 500ms
For: Position, Scale, Rotation
Strong Invoke
Ease: cubic-Bezier(0.13,1.62,0.00,0.92)
Timing: 167, 333, 500, 667ms
For: Position, Scale
Point to Point
Ease: Cubic-bezier(0.55,0,0,1)
Timing: 167, 333, 500ms
For: Position, Scale, Rotation
Fast Dismiss
Ease: Cubic-Bezier (0,0,0,1)
Timing: 167, 333, 500ms
For: Position, Scale, Rotation
Soft Dismiss
Ease: Cubic-Bezier (1,0,1,1)
Timing: 167, 333, 500ms
For: Position, Scale, Rotation
Fade In + Out
Ease: Linear
Timing: 83ms
For: Opacity

Lottie Windows: Animated icons and illustrations

All the animated icons and illustrations in Windows 11 were implemented using Lottie Windows.

I also worked with Window's Lottie devs to develop support for system theme colors and Windows interaction states, and optimized the design/dev hand-off process.
Animated Icons
Animated Illustrations

WinUI: Default components and preset behaviors

WinUI is a library that provides transitions and animations for UI elements that would otherwise be prohibitively expensive if done per surface.

I also designed the transitions for all newly released Windows 11 controls, and updated existing controls to match the Windows 11 motion language.

03.BENEFITS OF MOTION



Problems Motion Can Identify and Solve

Motion is uniquely positioned to capture UI and UX issues across surfaces, postures, and input. This helped me identify problems that would help the OS feel more natural, connected, consistent, and polished.

Natural

Rotation on Windows 10
Rotation on Windows 11
The right motion reinforces user actions, and better connects hardware to software.

Connected and coordinated

Resize + repositioning a window on Windows 10
Resize + repositioning a window on Windows 11
Motion identifies and solves issues that undermine experiences when states change, not just how it looks at the beginning and end.

Consistency across surfaces

Launching Start + Search flyouts on Windows 10
Launching Start + Search flyouts on Windows 11
Motion analyzes products holistically, and is primed for capturing discrepancies across surfaces and features.

Stutters and flashes

Launching Task View on Windows 10
Launching Task View on Windows 11
Motion looks at experiences end to end, and sees unintended behaviors that undermine polish and user confidence.

04.PRODUCT MAKING PROCESS



Implementing Motion with Care

Implementing motion requires empathy, adaptability, and vigilance. Being considerate and aware of my PM and engineering partner processes ensured what we shipped was intended and polished.

Empathy for partners

Treating specs as products, and creating a good user experience around how designs are documented, organized, consumed, and actualized is crucial for partners to easily and accurately implement designs.

Documentation
Videos are documented in the same files, and always updated and shared with the same link.
Organization
Specs are easy to navigate and are organized based on surfaces, features, and interactions.
Consumption
Specs anticipate partner questions and provides clarity with supplementary videos and values.
Actualization
Designs map to items in partner specs to ensure inclusion in funding and ranking discussions.

Adapting to engineering realities

Products don't always build like how they are designed even when coded to spec. Iterating with engineering partners is crucial to closing UI/UX gaps that arise from unforeseen product and dependency limitations.

Resizing a Window without the right easing
Resizing a Window with the right easing

Vigilance with bug documentation

Selfhosting builds is crucial to understanding the state of a product. Submitting, tracking, ranking bugs and verifying fixes before a product ships ensures users experience designs at the highest quality bar.

Panel sliding down in front of keyboard
Window restoring from an incorrect position
Indicator scaling up from incorrect position
Content pixelation and blurring on launch
Flashing UI while flyout dismisses
System hiding windows post rotation

05.MEASURING SUCCESS



Feedback Based On Public User Sentiment
Motion and delight are hard metrics to measure and quantify.

Gauging the reaction of users on social media and tech publications can provide data into whether motion is positively or negatively received.
Tech Publications
The Verge
Ars Technica
PC Gamer
CRN
Reddit
Twitter

Select Work

Various work from product motion design to motion graphics

Microsoft Rewards

Animation assets, interaction guidance, and implementation journey for Microsoft's user rewards experience.



Microsoft Accounts

Animation assets and interaction guidance for Microsoft's user account, privacy, and family experiences.



Facebook Home

UI animations and process for broadcast spots, and in-store device product demos.



Misc Animations

Broadcast spots, explainer videos, end tags, logos, music videos, and more.