Getting Started with Motion in Design Systems
How we introduced animation into our design system at AVIV.
Motion is an essential aspect of design systems that is often overlooked due to its perceived complexity and time-consuming nature. However, animations are an essential part of modern user experiences that help designers create intuitive and enjoyable products.
“Motion tells stories. Everything in an app is a sequence, and motion is your guide. For every button clicked and screen transition, there is a story that follows.”
– By Craig Dehner (UI & Motion Designer, formerly on the Human Interface team at Apple)
Animations help users navigate and understand the user interface, thus increasing the usability of products. Beyond providing functional benefits, animations are also important for storytelling and reinforcing brand messaging. By incorporating well-designed animations, it is possible to craft delightful and memorable user experiences that leave a lasting impression on users.
This is why the design system team at AVIV decided to prioritize motion from the early stages of the design system’s development.
Getting Started
The first step in gaining a deeper understanding of how to integrate motion into our design system was to do some in-depth research. If you are new to motion design, I highly recommend reading “Animation in Design Systems” by Val Head. It breaks down the entire process of integrating motion into design systems and helped me jumpstart the project.
To gain further insights, I followed a few key steps:
- Talking to stakeholders
First, I reached out to other designers and developers to gain insight into their needs and requirements. The goal was to gain a better understanding of their motion design process, identify pain points related to motion, and explore technical limitations. - Benchmarking
I then took some time to explore other design systems, such as Material Design and Apple’s Human Interface Guidelines, to gain a better understanding of how they approach motion design and to learn about their best practices regarding motion principles and tokens. This provided valuable insights and helped me better understand industry standards. - Motion audit
Finally, I conducted a motion audit to gain insight into the animations used across our various brands and determine where improvements could be made. I created a spreadsheet that included screen captures of components from all of our brands to compare and contrast the animations. This allowed me to identify areas for improvement and find similarities between brands that worked well.
Motion principles
Once the groundwork was done, I started working on some high-level guidelines known as motion principles. These principles explain the brand values around motion and are used to measure motion design decisions. By following these guidelines, designers can ensure that their animation choices are consistent with the brand’s values and enhance the user experience.
One easy way to create motion principles is to reference a brand’s established design principles and adapt them for motion. Since our design system didn’t yet have a specific design language, I had to approach the task from a broader perspective. To accomplish this, I drew inspiration from our corporate behaviors and tone of voice guidelines to develop a cohesive set of motion principles that aligned with our brand’s overall identity.
Another source of inspiration was Arron Walter’s hierarchy of user needs. In his book “Designing for Emotion,” Walter introduced a hierarchy that closely aligns with Maslow’s hierarchy of needs. According to Walter, meeting basic user needs such as functionality and usability are necessary precursors to satisfying higher-level needs such as pleasure and delight, which occupy the top of the pyramid.
After a lot of brainstorming, I created 3 motion principles around these core values:
- Functional
The foundation of any good user experience is a well-functioning product. This is the focus of AVIV’s first motion principle. This principle emphasizes that the goal of motion is to serve a purpose and add value to user interactions. All animations have a clear goal in mind and demonstrate function rather than just being decorative. - Focused
Our second motion principle is about enabling a seamless user flow. We want to allow the user to focus on their primary task without being distracted. To achieve this goal, it’s important to create non-intrusive animations that draw attention to important details. We also respect the user’s time by carefully choosing how much animation is needed in the product. - Enjoyable
Finally, our third motion principle focuses on the digital well-being of our uses and ensures that our animations can be enjoyed by everyone. We want to spark positive emotions and create memorable experiences in our products, while still keeping accessibility in mind. Additionally, it is important to us to create genuine and trustworthy animations that are honest and free of dark patterns.
Next up
Having some high-level guidelines in place is a great start, however there is still plenty of work ahead of us.
To ensure consistency and cohesiveness across different screens and components, our next step will be to create motion tokens. These tokens define animation properties, such as duration, easing, and direction of motion. Once created, we need to map these tokens to our existing components and transitions. We also plan to create guidelines for using tokens in icon and illustration animations.
But it’s not enough to create these resources. We need to make sure that users of our design system understand how to implement them effectively. We plan to provide guidance and support through documentation, onboarding, and training.
We will share more insights on all these topics soon.
