01 Overview

A picture is worth a thousand words.

A big challenge we face in UX is to make technically complex ideas easy for users of varied skill levels to understand and adopt. When a user is evaluating a feature we have a limited amount of time to explain those complex ideas and convince them that we are the solution they should choose over another. By adding motion graphics to the empty states of our main pages and carrying that story through to those specific features we’re designing a product that users can trust to help make those complex ideas less complicated to understand.

02 The Process

It started as a simple concept. I would sketch out very basic flows and review this with PMs and a designer specific to that feature. Often times white-boarding improvements in real-time.

Once we all agreed on the flow I would use Figma’s smart animate feature to make a very basic gif. This helped us see the interactions and the gif in its potential home. We would then all go through another round, this time included SME’s and other designers/PMs for more feedback before spending time on the final animation.

As soon as the final sketch was feeling final I would go through one last of final votes before passing the animation to the final stage. The animations are created in after effects so we wanted to make sure there were as few changes as possible after this point. For the first few animations I worked with our design system team and a designer from there would then take these off of my hands while I moved on to the next “sketch.”

Here are just a few of our finished animations. These have had a massive impact on the organization internally and I am now talking with our marketing, GTM, and tech writing teams to work these animations into our release and marketing materials.

03 Go Live

Our first animation is making it’s way into product soon!