Dropbox

Motion Guidelines

Motion Design & Strategy

Overview

In 2020, I joined Dropbox as their first ever Motion Design Lead, where I collaborated with a talented team of interactive, product, and brand designers, illustrators, strategists, and agencies to spearhead Dropbox's rebrand. My primary focus was on defining the motion design for the entire brand, encompassing all stages—from marketing exposure (See), to initial product sign-up (Buy), to user experience within Dropbox accounts (Use).

Throughout this process, I hired, managed, and directed contractors and agencies in creating hundreds of motion tests. A special thanks to Joyce N. Ho for her invaluable assistance with early motion tests, ADVNTR's Willie and Jill for their extensive work on the majority of motion tests and the final motion guidelines, and Gunner for their contributions to the logo animation guidelines. Collaborating with the amazing designers and partners at Dropbox Design and Collins, we established a cohesive, purposeful, and thoughtful motion design system. Here are a few select examples of our accomplishments. In the end, we developed comprehensive motion guidelines covering product pages, marketing out-of-home (OOH) content, video titles and end cards, the logged-out marketing website, logos, typography, icons, illustrations, buttons, layouts, banners, and abstract product illustrations.

Logo Animations

As part of the Dropbox Rebrand, I directed and partnered with an agency, Gunner, to reimagine the logo animations for all of Dropbox's products including the main dropbox logo animation. After hundreds of explorations, we landed on a 2-beat animation system.

Web - Product Offering

Web - Home Page Scroll

Web - Home Page Menu

Web - Plans Pricing

Web - Product Suite

Product - Task Completion

Product - Open File and Comments

Product - Account Panel

Product - Account Panel Transition Mobile