Email Work LinkedIn Dribbble

MICROSOFT ACCOUNT SERVICES


Animations, Principles, and Guidance for Accounts, Privacy, and Family pages

I animated illustrations and explainer videos for Microsoft's Account portal and its sub-pages. I also drove animation adoption and wrote the animation and interaction principles for Microsoft's then web framework.

Jump to:

01. Accounts Dashboard

02. Privacy Dashboard

03. Family Dashboard

04. Animation + Interaction Guidance

05. Impact and Progression

01.ACCOUNT DASHBOARD



Microsoft's User Services Entrypoint
The Account dashboard is a portal to Microsoft's various management and billing pages.

I created illustrations and animations and drove the adoption of lottie animations on the page. The redesigned experience and animations resulted in a 40% increase in click-through rates.

Formerly on account.microsoft.com
Account Dashboard

02.PRIVACY DASHBOARD



Microsoft's Privacy and Data Management Page
The Privacy dashboard informed users of how Microsoft managed data in a simple, concise, and visual ways.

I animated each illustration which was paired with a control that gave users control over how much data they shared.

Formerly on privacy.microsoft.com

03.FAMILY SAFETY DASHBOARD



Microsoft's Family Service Enrollment Page
The Family dashboard was a collection of Microsoft services to help families connect and stay together via their Microsoft account.

I designed and animated illustrations to showcase the different features for the service provided.

Formerly on family.microsoft.com
Family Dashboard
Sign Up Explainer Video
I also storyboarded, designed, and animated an explainer video and that was shared on the Family enrollment page, and on Microsoft's social media channels.

04.GUIDANCE AND PRINCIPLES



Documentation for Microsoft's Web Framework
I wrote the guidance and principles for playing and interacting with animations for Microsoft's web surfaces, and created assets that accompanied each principle.

Formerly on getmwf.com, the now defunct Microsoft Web Framework.
Animation Principles

Playback respected common design and animation principles and did animate for animations sake, while also also being aware of the context it was in.

Protagonist
Do
Don't
Define a clear protagonist. Apply loud, active animations to main elements to give importance, and subtle animations to less significant objects to give context.
Framing
Do
Don't
Generally, elements shouldn’t appear from offscreen. Animated elements should either be visually present at the start or animated from within the canvas.
Reveal Content
Do
Don't
If a scene only has a single element, additioanl elements can be revealed to tell more engaging stories. Hidden elements should never be present when the animation is inactive.
Overlapping Elements
Do
Don't
Avoid animating individual elements sequentially. Instead, overlap secondary elements with the primary animation to create a visually blended, continuous scene.
Exaggeration & Energy
Do
Don't
Vary the easing and timing to build up anticipation and climactic moments, rather than staying linear and flat.
Follow Through
Do
Don't
Don’t end animations on hard cuts unless intended. First and last frames should match to create seamless looping animations.
Interaction Principles

Interactions needed to be calm and focused, accomodate different navigation methods, and not get in the way of a user's flow or selection.

Focus
Do
Don't
If you play all animations at page load, users will scroll to animations mid-play. Use hit areas that start looping animations at entry, and stop them at exit.
Continuity
Do
Don't
To reduce visual friction, avoid pausing animations mid-play when exiting a hit area. Animations should play through to the end when exiting a hit area.
Playback
Do
Don't
Animations should only trigger when interacted with and should never delay or slow down a user’s action or selection.
Attention
Do
Don't
A user’s attention is limited. Keep animations to 5 seconds or less. Anything longer should be exported as mp4 videos embedded with a play button, and it should never auto-play.

05.Impact + Progression



Scaling Animations + Animation Technology

Over my 2 years working on the experience, we went from completely static pages to low control common formats, to Lottie animations on 4/9 pages.

2017
2018

Select Work

Various work from product motion design to motion graphics

Windows 11

UI motion and animation language, system, implementation, and documentation for Microsoft's OS.



Microsoft Rewards

Animation assets, interaction guidance, and implementation journey for Microsoft's user rewards experience.



Facebook Home

UI animations and process for broadcast spots, and in-store device product demos.



Misc Animations

Broadcast spots, explainer videos, end tags, logos, music videos, and more.