I started this project by researching where micro-interaction is used. We thought we could use it in our menus, buttons, call-outs, and loading screens. 
‍
At this point, we decided that I would create GIFs and LottieFiles to build a resource for other designers. Initially, I worked on different menus using After Effects, exploring where these interactive elements could be applied.

Popdowns examples

Doctor page menu example #1

Doctor page menu example #2

Supplier menu example

The database concept only lasted for two weeks. As I continued to receive feedback and share my progress with the design team, it became evident that what we truly required was to establish a design system. This system would empower designers to incorporate their own animations instead of relying on me to create them.

After researching design guidelines from Adobe and IBM, I found that we can develop an internal micro-interaction guideline sheet that will standardize the use of animation across all our different products.

For the remainder of my internship, I worked to create different graphics and modules that could be implemented by any designer, no matter their animation skills. The three most important parts of this guideline were my lessons on PROGRESSIVE VS EXPRESSIVE MOTION, EASE, and DURATION.

I wanted the guideline to detail where to use different speeds and timing. I started by defining two different types of motion: Expressive and Progressive.

• Expressive was meant to be seen by the user. It was intended to add value to an object.
  

• Progressive Motion was fast and meant for assets that need to convey a quick message.
  

Expressive vs. progressive

Designers were encouraged to apply these principles as needed. Additionally, I developed reference charts that allowed them to choose examples and determine whether a motion should be categorized as progressive or expressive.

Position, transparency, scale, and rotation are the basic types of motion. They can be used together, alone, or one after the other.

Animation principle chart

Easing plays an important role in animation because it smooths out the transitions at the start and end of a sequence. I developed three distinct ease variations for different components, allowing them to be seamlessly applied by any designer.

I provided CSS and After Effects parameters to assist designers in creating prototypes within Figma, After Effects, or CSS.

When defining the duration for various components, I discovered that there were no perfect timing parameters for progressive or expressive motion. Duration is essential in animation because it determines the spacing of keyframes, which are the animation points, within a sequence. A faster animation results in keyframes being closer together, while a slower one spreads them out.

Time chart examples

Time chart: Progressive vs expressive

I developed a chart containing different tokens to assist designers in selecting timing based on the message they wished to convey, whether it was progressive or expressive. This chart provided them with the flexibility to choose their desired timing while adhering to the guideline.