FACEBOOK HOME

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

Facebook Home was Meta's attempt at creating a feed centric mobile device and operating system.

Jump to:

01. Broadcast Spots

02. Production Process

03. Product Accuracy

04. In-Store Demos

01.BROADCAST SPOTS

Commercials celebrating the phone and UI

Agency Wieden+Kennedy was tasked with creating commercials celebrating the product launch.

As the motion designer on the production team, I was reposnsible for creating product accurate UI animations for a variety of use cases and in parallel of the development of the product.

02.PRODUCTION PROCESS

Screen gestures mimicing real interactions

Facebook Home was an unannounced product during production of the broadcast spots.

Shoots were recorded with real devices but no UI, and actors relied on videos showing moving white circles to gesture the right interactions.

The UI was added in post-production and corrections were done in animation to ensure gesture timing matched actor movements.

03.PRODUCT ACCURACY

Ensuring production and product accuracy

Since Meta built their product motion using Origami, there were no source files usable for production.

It was important to prove the UI motion could be recreated in After Effects and respect the timing, easing, and offsets that Facebook had prototyped.

Animating the UI also meant copy and image changes could be done any time to better complement the story, it also made updating the in-development UI easier whenever designs changed.

04.IN-STORE PRODUCT DEMOS

Key feature showcase in AT&T Stores

The success of the product accurate broadcast spots also led to the creation short flows capturing key interactions for videos looping on display devices in retail stores.

Cover Feed

Cover feed is a carousel with different posts. Double tapping on a page likes a post.

Notifications

Notifications appear and stack over a feed. Holding and swiping bulk dismisses them.

Chat Heads

Messages appear as a layer on top of apps and tapping on the profile icon opens a chat dialog.

Launch Apps

The profile photo core phone interactions. Dragging it up launches the Android app launcher.

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.

Microsoft Accounts

Animation assets and interaction guidance for Microsoft's user account, privacy, and family experiences.

Misc Animations

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