Android 12
Android 12 is one of Google's biggest efforts to host a wide range of new features along with a massive design refresh for the launch of Pixel 6. The new OS was built under the brand attribute of adaptive with a hyper focus on customization and personalization. Using machine learning techniques, the entire system's UI color palette adapts to the choice of wallpaper. Typography and shapes were re-designed from the ground up to feel more accessible and allow itself to adapt in any given container (phones, watches, TV, etc).
↓
Shade & Quick Settings
In the past, Android's notification and quick settings system has developed a bit of a bad reputation; a clunky invocation gesture, messy spatial hierachy, crowded notifications, and too many buttons. The introduction of Material You, allowed us to revist these spaces in order to alleviate friction through fluid and more focused interactions.
My role as the motion lead was to identity and build a motion system for notifications, polish or introduce new gestures, and align these patterns across different product teams.
One of the first tasks was to polish the swipe down gesture for Shade. The goal wasn't to redefine the interaction. We wanted the gesture to to feel familiar, so we focused on making it feel faster, easier, and playful.
This was done by extending the area in which the user can swipe down. Extending this area allowed us to create an animation that follows the same gesture path but does not necessarily have to start from the top of the device. As the user swipes down, components enter and exit by emphasizing their shape through a method we called "unfurling."
As long as the gesture is invoked within the green space, the animation will start.
A backplate was added behind the notifications to create a clear visual affordance for Quick Setting's swipe down gesture. Along with this, the backplate provided a visual separation between the Shade and Quick Settings.
Quick Settings Gesture
In the past, Android's notification and quick settings system has developed a bit of a bad reputation; a clunky invocation gesture, messy spatial hierachy, crowded notifications, and too many buttons. The introduction of Material You, allowed us to revist these spaces in order to alleviate friction through fluid and more focused interactions.
My role as the motion lead was to identity and build a motion system for notifications, polish or introduce new gestures, and align these patterns across different product teams.
Animated Icons and Tiles
In an effort to improve the overall spatial model, I explored the idea of reducing the use of transitions that relied on z-space movement. Instead of overlapping sheets, shadows, and depth, I explored the possibility of components living co-planar that bump or squeeze content out of the way.
Notifications
The main redesign in notifications was mostly polish and aesthetic. Buttons and notifications became big and bubbly along with small fun moments such as a down arrow rotating upon a notification expanding.
There is an added flourish when you begin separating a notification from it’s stack. As you begin swiping to dismiss a notification, it forms it’s own roundrect, indicating that it has become a descrete object.
Notifications emphasize shape during enter and exits as it stretches open and squashes on close. The purpose was to reinforce the way notifications enter through the shade gestural pulldown.
Process
Most motion comps were carefully written and detailed before passing over to an engineer. I worked closely with engineers to test gestures and other motion explorations through prototypes on the Pixel device.
Credits
Sebastian Bauer, Matias Duarte, Glen Murphy, Andy Stewart, Hannah Cho, JT DiMartile, Christian Robertson, Philip Batton, Ryan Kiley, Javier Lopez, Kevin Gaunt, Tyler Gough, Matt Asato-Adams, Michelle Gong, Grant Rowles, Soobin Cha, Mike Guss, Jane Park, Kurt Rauffer, Stephen Lowe, Andrew Chee, Eunie Park, Rick Jones, Andrew Ng, Adrian Zumbrunnen, Mikkel Koser, Dan Beltramo, Brenton Simpson, Wooksang Kwon, Gustavo Gonzalez, Gustavo Sonoda, Gus Winkelman, Seth Benson, James Gunderson, Dimitri Luedemann, Patrick Hosmer, Selim Cinek, Jonas Naimark, Aaron Schurman.