Motion Design System
At yellow.ai, developers were using preset animations and did not match with what the designers needed. I took the initiative to learn and establish standard guidelines that can be one source of truth for both developers and designers.
My Role
UX Designer (5 weeks)
Collaborators
Design Manager, Senior Engineer
Problem
Individual design appraches
Independent use of Figma's smart animate without a unified strategy.
Developer Inconsistency.
Used readily available resources, causing inconsistencies.
Prototype vs. Implementation
Hard to implement due to no standardized guidelines.
Solution & Approach
Developed comprehensive Motion Design guidelines, including best practices, standardized animations, and transition patterns ensuring design consistency and improved collaboration.
Impact
Reduced prototype to implementation gap by 30%
Increase in user satisfaction
by 10%.
Cohesive UX and quicker development cycles.
Delightful UX yet acting as visual guides.
The Process
Step 1
Listing all the UI components that needed motion.
Step 2
Defining the principles aligning with the company’s vision.
01. Purposeful
All animations help users reach their goals by surfacing connections between states or views, drawing attention to important details, or providing feedback.
02. Seamless
The amount of motion used should be just enough to get the intention across and no more.
03. Natural
The motion should abide with the principles of nature such as gravity etc.
Step 3
Defining custom durations & Easings.
Step 5
Designing a selected set of effects that can be commonly used on protopie.
Step 6
Defining nomencleature for motion tokens.
More examples where motion design has been implemented.
Note:
Below is an embedded figma prototype file, might take a few seconds to load.😁
Learning and Personal Achievement
1
Leading the Project
The Journey from prototyping the concept, learning fundamentals of motion design and implement have been rewarding.
2
Acquiring Knowledge
Gathering knowledge related to motion design from various design systems.
3
Cultural Impact
Initiating this project inspired other designers to start making an impact in unexplored areas of design.