WhyConnect

Explainer Video

How I Did It

The goal was to create a short animated explainer video to quickly and effectively present WhyConnect to visitors. I worked in collaboration with the graphic design team to create the storyboard and style frames. We discussed the possible styles and flows that the explainer video could have, and we chose to use flat design illustrations with a bright color palette. After getting approved for the storyboard and style frames, I started the animation.

Staging
  • Staging

The phone scanning the QR code is the main action in this scene. The key point is to make sure to catch the viewer’s eye.

Squash and Stretch
  • Squash and Stretch

The window changes shape based on some sort of impact. Also, there are overlapping actions on the rest of the UI elements.

Slow In and Slow Out
  • Slow In and Slow Out

The character's arms animation makes the movement more realistic.

Storyboard & Style Frames

Storyboard