In this case study, I have described my process of building the Motion Design System v1.0 for Polygon Technology. Polygon (previously MATIC) is a protocol and a framework for building and connecting Ethereum compatible blockchain networks. Polygon is a Layer 2 scaling solution created to provide faster and cheaper transactions on Ethereum.
The motion design system was designed for Polygon’s digital products that are being / will be used by various stakeholders. The motion design system adds personality to the brand’s products along with building a consistent system for implementing motion across a wide range of products.
Building a Motion Design System for the products of Polygon Technology
By default, products do not have any motion for their component interactions. The components just change from one state to another when triggered. Implementing motion individually across various products is tedious and also leads to inconsistency. The motion design system was an attempt at building a standardized system to easily implement motion across a wide range of products.
Different types of users use Polygon products on a day-to-day basis. People with varying levels of Crypto and Blockchain understanding, builders, artists, transactors, etc. For the scope of this project, the overall user base was broadly divided into two major groups:
→ Developers - Users who build products on Polygon Blockchain using various Polygon products
→ Hodlers - Users who carry out transactions and other financial applications using Polygon products
Some users might be new to the blockchain ecosystem but both the user groups have sound technical experience in using the web and mobile applications
As defined by NN Group, a design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.
The motion design system defines consistent parameters for implementing motion across various component interactions. By default, the component interactions do not have any motion. They just change from one state to another when triggered. Implementing motion in these interactions adds to the personality of the products. Various parameters such as easing, duration, and motion play a role while defining the motion for the interactions. The motion design system makes it easier to implement motion by defining consistent parameters for various interactions across products.
Motion can be used to convey the type of feel and emotion that we want to deliver across the products. Hence, it was crucial to understand early on in the process the brand values and what kind of vibe we want to give to the users who are interacting with the products. Upon discussion, the kind of vibe we wanted to invoke through the usage of motion were playful, collaborative, and secure.
This project was something new that I had ever worked on. This project lied at the intersection of Product Design and Motion Design. Since this was one of a kind project, research and planning were necessary before moving forward. The research was done to understand how to build and deliver the motion design system, what technologies will be used etc. Key findings from the research were:
→ How different types of motion perceive different types of emotions
→ Understanding real-time and non-realtime interactions
→ Complex animations such as icon animations can be converted to Lottie for smooth execution
→ Simple interactions such as hover, click, press, etc. would be built using CSS
→ For any interaction, the key properties must be defined such as the easing, duration, and animation type
→ Over-usage of motion can lead to user frustration
Post research and planning everything seemed overwhelming. The best way (maybe) to overcome that was to start working on the designs itself. Things that seem simple are not that simple to make. It took a lot of iterations playing around with different components, experimenting with different easings and durations to come up with the vibe we wanted to create with the motion.
Since we had an overall idea about the target users for our products, it was also important to think of the motion from the lens of the users. Many of the features of products were built to be used multiple times again and again by users, so over usage of any kind of motion might lead to user frustration.
As a result, it was planned to:
→ Avoid long duration motions (> 1 sec) in any interactions
→ Avoid highly complex motions in any component interactions
As per a previous discussion with developers, it was finalized to use CSS to build these interactions. It was crucial to understanding how CSS animations work and what are its limitations. I played around with CSS animation properties to get a better grasp of how things work and also it was later helpful during the handoff stage.
The component interactions were explored, designed, and iterated alone. Some interactions seemed and worked well alone but it was crucial to test them on the real (existing or in development) products to check if they fit there. Some scenarios to check out before handoff were:
→ Components like the checkbox are being repeated in close proximity to each other
→ Different components with different interaction styles are present in a single page
→ Components with dynamic durations working on actual products
Once the designed motions were tested on various products and analyzed for various users, this is how the parameters were standardized.
1. Motion Type
There exists a wide array of motion presets such as scale, fade, dissolve, slide, etc. Upon a couple of iterations and feedback, a few of the motion types were chosen. The motion types were chosen in a manner such that they appear consistent across products and can be combined together without making them look too complex. Scale, Fade, Move were the primary motion types that were chosen.
2. Duration
After multiple iterations, a range of durations was defined for the motion design system. Starting from INSTANT (0 ms) to SLOWEST (800 ms). The wide range was necessary due to the different types of components that are being used in the products.
Dynamic Durations were used for components like tab and pagination as the duration of motion might vary depending on the position of the tab or page number that is being interacted with.
3. Easing
Four key easing curves were defined that worked for all the components. taking various use cases and scalability into account, all 4 kinds of easing - Linear, Ease In, Ease Out, Ease In Out, were defined.
Based on the discussions, explorations, and feedbacks, the final set of interactions was created for the existing components in the design system. The final set of interactions was crafted in a manner that reflects the brand personality while catering to usage across a wide range of products. Here are the final set of the interactions that were designed and are being implemented across various products.
With all the interactions being designed with CSS motion in mind, the handoff was straightforward. Figma and Google Sheets were used for the handoff.
→ Figma - to view the component properties and preview the interactions
→ Google Sheet - to get the easing and durations data for implementation
The project that I worked on was the v1.0 of the Motion Design System. It has a large scope to grow and become more comprehensive. Certain additions that can be implemented in the future versions are:
→ Including complex interactions
→ Metrics to track the performance
→ Better documentation
This project was a unique one that I have worked on so far. It has been a great learning experience working on this project. Some major takeaways for me were:
→ Motion, when implemented in the smallest of places in the right manner, adds to the personality of the brand and its products
→ Though coding isn't necessary to be a designer, having an idea about how it works helps a lot to work smoothly with developers
→ When documenting for personal use, a proper format might not be needed. But when documenting for collective use, it's quite essential to follow a format that is understandable to everyone
→ The motion design system helps in implementing consistent motion in the products at scale