Scroll to see more
This guideline helped to instruct the internal design team in the fundamentals of animation techniques.
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.
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.
My mentor sought to leverage my design skills to craft compelling interfaces.
The Invisalign App had potential. The senior UX team recognized the possibility of expanding its utility beyond the existing SmileView feature, which offers an augmented reality teeth straightening simulation.
I was responsible for developing visual identities as part of a redesign initiative that enhanced both the patient and parent sides of the app. In my role as a designer, I was tasked with sparking a fresh design direction. Collaborating with senior designers, I crafted mockups and received feedback from the team to refine the design further.
The Invisalign App’s main focus is to guide people to the SmileView function, search for nearby doctors, and provide helpful articles. As a UX team, we were looking to add value to the app by incorporating medical uses.
In our initial stages of the redesign project, we focused on creating a new dashboard. The objective behind this dashboard was to provide users with a clear view of their progress and Invisalign wearing habits.
This personalized dashboard operates with an individual's treatment plan, which is prescribed by a doctor and specifies the daily duration for wearing aligners. These metrics were designed to align with the introduction of new Invisalign cases. These cases will enforce automatic tracking and send notifications to the user's phone when their aligners are not in place.
Some of the later mockups I created included the whole patient dashboard screen and new user screen. In these iterations, I experimented with different cards and tried condensing information. Scroll on the prototype below to see two of my final screens.