Motion Level -
Motion design system
Objectives
- Standardize the use of motion at Mercado Libre.
- Establish shared criteria for motion and expressivity across design teams.
Outcomes
- Contributed to the initial foundations for motion.
- Created Motion Level, a framework for shared motion decisions.
Context
Motion decisions depended on individual judgment. I joined as an interaction analyst to research concepts, criteria and practices that could inform a future design system.
My contribution focused on research and the initial framework before handing the work to a specialist motion team.
Challenges
- Component-level patterns existed, but custom motion lacked shared criteria.
- The team needed a repeatable process for designing animations.
- Limited specialist capacity made collaboration difficult.
- Designers needed guidance to take ownership of simpler motion work.
- Delivery demands left limited space to define shared foundations.
Roadmap
The initial work moved from research to foundations, documentation and expansion, with contributions from UX and motion designers.
- Research and analysis
- Define foundations
- Create documentation
- Expand the subsystem
Where did we focus first?
How do other teams approach motion?
We researched Material Design, Human Interface Guidelines, Carbon, Spectrum and Fluent.
What already existed internally?
We studied previous motion work at Mercado Libre: its process, tools and collaboration challenges.
What should we define?
We looked for references to guide the process of building motion foundations.
How do other teams approach motion?
I compared reference design systems to identify common ground and differences, inform MVP expectations and trade-offs, and shape the roadmap.
What already existed internally?
We collected and reviewed existing explorations to find patterns and understand which approaches aligned with the motion foundations we wanted to build. These are three examples:
What should we define?
Our research pointed to custom easing curves, durations and movement principles as important foundations. I explored animations to find motion that suited the brand.
Building shared criteria with Motion Level
After the research, we began defining motion principles, standardizing easing, timing and screen transitions, and establishing shared decision criteria.
I proposed Motion Level to guide animation intensity by comparing expressivity with how frequently an animation appears.
What do we mean by expressivity?
How much emotion or excitement should an animation convey?
What does frequency mean?
How often someone encounters an animation in their journey.
High-frequency animations support common tasks, such as updating details or making a purchase.
Low-frequency animations are reserved for milestones, such as reaching a sales goal or acquiring a new product.
With these axes in place, we defined the following points:
+ Expressivity
− Expressivity
− Frequency
+ Frequency
Left end:
Reserve these animations for meaningful milestones in a person’s journey, for example:
- Reaching adulthood.
- Acquiring a first financial product.
- Reaching a sales milestone.
Right end:
Use these animations for everyday moments, such as:
- Making a purchase.
- Updating a detail.
- Uploading a photo.
Final outcomes
- The framework translates research into shared criteria for functional, balanced and expressive motion.
- After my initial contribution, a specialist motion team continued the technical development of the design system.
Ready to connect?
I’m looking for a place where challenging myself, growing and solving problems I care about are part of the work.
Shall we work together?
