UX Design
User Research
Product Design
Mobile
UX Designer, Animator
May - August 2021
Figma, Adobe Suite
This guideline helped to instruct the internal design team in the fundamentals of animation.
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.
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.
Doctor page menu example #1
Doctor page menu example #2
Supplier menu example
Popdowns examples
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.
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.
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
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.
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.
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.
Time chart examples
Time chart: Progressive vs expressive
This project was a great learning experience. We had a pivot point where the entire experience had to be re-evaluated. Despite the curve ball, we delivered something useful and delightful.
Reflecting on my work, I recognized the important role that documentation played in creating a successful guide. It was a valuable learning journey, teaching me how to effectively communicate my process.
I incorporated several elements, such as comprehensive guides on using different animation software and step-by-step documentation detailing the creation of my examples.
Towards the end of my internship, I had the opportunity to present the guide to stakeholders. This experience not only honed my UX design skills but also allowed me to develop my presentation abilities.
My mentor sought to leverage my design skills to craft compelling interfaces.
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. Collaborating with senior designers, I crafted mockups and received feedback from the team to refine the design further.
Old design
New concept
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.
SmileView screens
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.
