Google : Pixel Tips
While working with Masonry, I collaborated with Google’s VizLab team to create a series of over 30 product tip animations for Pixel 9 and 9 Pro in 2024. These short-form explainer videos were designed to guide users through new AI-powered features using clear, intuitive motion that reflects the Pixel’s smart and assistive interface.
I was responsible for the motion design of five of the Pixel Tips:
These animations were created by adapting existing Pixel products’ UI animation and using Photoshop and Figma designs to animate the elements. As the motion designer, I refined these references to align with the Pixel’s design system. The animations were localized and translated into 11 languages, helping the campaign reach a global audience. The five videos collectively received over 105,000 views in the US.
I was responsible for the motion design of five of the Pixel Tips:
- Satellite Emergency SOS – Showcasing how to initiate satellite communication in off-grid situations
-
Edit Your Photos – Demonstrating the Magic Editor, Best Take, and other AI-powered photo tools
- Use Best Take – Walking through facial selection and compositing for group shots
- Edit Your Videos – Highlighting in-app video trimming, enhancement, stabilization, and AI audio tools
- Audio Record – Introducing Pixel’s new sound recording features and smart audio erasure
These animations were created by adapting existing Pixel products’ UI animation and using Photoshop and Figma designs to animate the elements. As the motion designer, I refined these references to align with the Pixel’s design system. The animations were localized and translated into 11 languages, helping the campaign reach a global audience. The five videos collectively received over 105,000 views in the US.
Animation Process
Satellite Emergency SOS – Connectivity Screen
Used CC Particle World and expressions to create a parallax feel between the satellite icon and the space background as the animation moves.
Starting from the left : Connectivity Screen, Wireframe Screen, and Parallax Motion Test.
Satellite Emergency SOS – Connectivity Messages Screen
Animated the message bubbles and the satellite icon using smooth, instructional motion to clearly demonstrate the feature.
On the left, the wireframe motion process, and on the right, the Connectivity Message Screen.
On the left, the wireframe motion process, and on the right, the Connectivity Message Screen.
Edit Video – Resize Your Video
Animated the resizing grid UI to clearly demonstrate how users can adjust video dimensions. On the left, the resizing interface screen, and on the right, the wireframe motion process.
Edit Video & Edit Photo – Feature Highlights
Highlighted key features with clear, instructional motion to reflect the product’s smart, assistive interface. Starting from left, ‘Draw on your video’, ‘Erase unwanted objects’, and ‘Adjust portrait light’.
Final Animations
Edit Your Videos – Final Animation
Featured on the official Google Help youtube channel.
Use Best Take – Final Animation
Featured on the official Google Help youtube channel.
Audio Record – Final Animation
Featured on the official Google Help youtube channel.
Satellite Emergency SOS – Final Animation
Featured on the official Google Help youtube channel.
Credits
Produced by Masonry NYC
Client : Google
Creative Director : Daniel Clark
Art Direction : Adam Sacks
Producer : Sharan Kukreja
Designer : Google VizLab Team
Motion Designer : Dong Jun—Shon
Editor : John Bartley