Align Technology

Micro-Interaction Guideline
& Dashboard Concepts

Internship Summer 2021

UX Design

User Research

User Research

Product Design

Mobile

Align Technology is a global medical device company that is changing lives through better smiles. Their products include Invisalign Clear Aligners and the iTero Element Scanner.

During the summer 2021, I was an Experience Design Intern that worked on a micro-interaction design system and dashboard concepts for the patient app. I made an impact on the team by instituting the design system and educating designers on animation techniques.

Title

UX Designer, Animator

Timeline

May - August 2021

Tools

Figma, Adobe Suite

Micro-Interaction
My first project involved creating a guideline of micro-interactions and a design system.

This guideline helped to instruct the internal design team in the fundamentals of animation.

The
Design System.

01

Starting initial research on micro-interaction

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

02

Deciding on an internal micro-interaction guideline

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.

03

Expressive vs. Progressive animation

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.

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.

04

Understanding the basic transitions of animation

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

05

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.

06

Defining animation timing and tokens

When defining the duration for various components, I discovered that there were no perfect timing parameters for progressive or expressive motion.

Duration

Duration is essential in animation

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.

Tokens

Tokens assist designers

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

07

Reflecting on the guideline project outcomes

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.

#1

Importance of animation

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.

#2

Document thoroughly

I incorporated several elements, such as comprehensive guides on using different animation software and step-by-step documentation detailing the creation of my examples.

#3

Growing as a designer

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.

Invisalign App
I collaborated with my mentor to develop potential visual identities for the Invisalign patient app.

My mentor sought to leverage my design skills to craft compelling interfaces.

The
Dashboard.

08

The Invisalign App has potential. I worked on initial research on visual development

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

09

What is the problem and what do we need to do?

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

Our project manager found that leveraging aligner timers, treatment progress, and aligner trackers would be a great way to pair the functions of our app to our current product.

10

Designing dashboard concepts to inspire change

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.

Conclusion
Reflections
I enjoyed being able to bring my skillset to the Align team. After switching my majors, I wanted to find ways to integrate animation into the design. I’m thankful for Marcus, my manager, who gave me the chance to explore this on a professional level.
I learned a lot about how corporate design works. I enjoyed being able to create for both the internal team and the consumer.

Up Next.

Explore more professional and personal projects

Kindle Direct Publishing

Summer internship 2022
Redesigning the Kindle Direct Publishing pre-login page to effectively communicate benefits, tools, and resources prior to login.

UX Design

User Research

Product Design

Web/Mobile

Hey!

Thank you for looking
Feel free to say hello 👋
Resume