✨
Beyond Animation: Crafting Meaningful In-Apps Motion Design Principles.
I joined the micro-interaction team at Tiket Design, with most of my work focused on research and framework design. In this project, I collaborated with another designer and two motion designers to explore motion.
Skills I utilized:
Framework thinking, Research, and Analytical Thinking.
📊
Context
Micro-interactions are functional, interactive elements of a product—integral to the design, not just minor details. They enhance the user experience by making interactions smoother, more engaging, and easier to understand. Well-designed micro-interactions can also help users grasp complex tasks while maintaining a natural, intuitive flow that aligns with real-world behaviors.
Before this framework was established, designers often implemented micro-interactions based on intuition, without consistent guidelines or shared standards.
💡
The Quick Story Behind the Inspiration
In the beginning, the micro-interaction team was formed to help designers create animations—often as a side project, simply because they had the skills. As an explorative designer with a passion for animation and filmmaking, I wanted to push this further. I tried to persuade the team to bring meaning to motion, not just movement. I believed motion could be more impactful and deeply connected to the experience—an idea shaped by my fascination with animation-making processes like Disney’s work, stop motion, and my own journey exploring the 12 Principles of Animation to make animations feel alive.
12 principles of animation by Disney
was also inspired by Chan Karunamuni’s WWDC18 presentation "Designing Fluid Interfaces" on creating smooth, meaningful interactions at Apple.
These explorations sparked an idea: what if we treated motion in our apps as a powerful design tool to enhance the overall experience, rather than just an afterthought?
🎯
Challenges
Before this framework was established, designers often implemented micro-interactions based purely on intuition, without any consistent guidelines. This lack of clarity made it difficult to ensure that micro-interactions effectively addressed user needs or aligned with product objectives.
The challenges was clear:
Define the purpose of Microinteraction
How might we determine the specific goals and ideal conditions for using motion in our apps?
Determine the Motion Style
How might we establish rules and a visual style that bring consistency to in-app motion?
🖌️
Research
The story began when I had the opportunity to present my ideas on how we could elevate the use of motion in our products. I shared my vision with the entire design team, showing how motion could go beyond aesthetics to enhance understanding and create more intuitive experiences.
Not long after, I officially joined the micro-interaction team to help establish a framework that would guide motion design across our apps.
(Screenshot taken by a colleague while I was presenting the concept of micro-interactions.)
Why we needed a framework?
To understand why a framework was necessary, we need to look back at how humans perceive movement in the real world. We’re naturally familiar with the motion of everyday objects—shaped by forces, just as Newton described. These real-world experiences form our mental models, helping us predict how objects should move.
This became the foundation of our thinking: we needed our own set of “laws of physics” for the virtual world, a motion framework that would bring consistency, predictability, and meaning to every micro-interaction.
(For a deeper dive into this concept, I’ve written a separate essay here.)
Vienna, 2023
Process
During the research phase, we explored how micro-interactions were currently being used by consulting with designers and conducting desk research. We benchmarked against established motion and interaction frameworks, including Microsoft’s Fluent, IBM’s Carbon, Adobe’s Spectrum, Google’s Material, and others.
From this study, we identified four common functional purposes of micro-interactions:
Indicating state changes
Offering feedback
Guiding users
Capturing attention
These were validated through a thorough process involving literature reviews, analysis of similar projects, and a review of internal team requests. By identifying recurring patterns in these requests, we ensured that our framework was grounded in real, recurring design needs, making it both practical and intentional.
With this insight, we established three core principles aligned with our company values:
Educate effortlessly: Help users learn without friction.
Guide with focus: Capture attention to direct action.
Delight sincerely: Evoke joy and emotional connection through thoughtful motion.
These principles ensured our micro-interactions were not just functional and consistent, but also emotionally engaging.
Let's connect the dots!
The development of our micro-interaction formula is shaped by two pillars: functional purposes and design principles. Together, they form a framework that defines how, when, and where motion should be applied—ensuring animations are purposeful, not arbitrary.
By introducing structured rules, the framework prompts designers to think critically about the intent behind each motion, reducing unnecessary animations and improving their overall impact.
Design principles guide the aesthetic side—covering motion dynamics, timing, and the overall feel—to ensure visual coherence across the product.
Functional purposes focus on the goal-driven aspect, determining how motion enhances usability and interaction efficiency.
This dual approach balances expression with function, creating micro-interactions that are not only visually engaging but also meaningful in improving the user experience.
The Purpose of Micro-interaction
Principles
Educate
Vienna, 2023
Focused
Vienna, 2023
Expressive
Formula
Functional Purposes
+
Vienna, 2023
Principle
Tiket.com Micro-interaction Framework!
Vienna, 2023
The circular framework serves as a structured approach to defining and implementing micro-interactions. It functions as a step-by-step guideline for designers, ensuring a purposeful and well-thought-out application of motion.
To use the framework, designers begin from the innermost circle by first determining the fundamental purpose of the micro-interaction. They need to specify key factors such as:
Where: The location of the micro-interaction within the interface.
When: The right timing for triggering the motion.
Who: The user’s emotional state and context when encountering the motion.
Once these foundational aspects are defined, designers can refer to predefined common patterns for micro-interaction applications. During discussions with the motion design team, they refine the direction, style, and emotional intent of the interaction. This process is guided by functional purposes and design principles, which categorize the motion into specific styles based on intent.
For example:
Expressive interactions are vibrant and playful, suitable for celebratory moments such as confirming a successful payment or applying a discount.
Focused interactions are designed to draw attention, making a specific element stand out within the interface.
Educational interactions provide subtle guidance, such as a sliding card animation to encourage users to swipe.
By following this structured approach, designers can make informed decisions about motion speed, style, and timing, ensuring that micro-interactions enhance the user experience meaningfully rather than being added unnecessarily