G Suite
Sharing interactions for all of Google's apps
Interaction design, visual design
One file picker to rule them all
Inbox was the first app to use Material Design, so it was up to us to design many of the components that would be needed across Google products.
The system needed to be flexible enough to work in Docs, YouTube, Sites, Inbox & Gmail.
(And third-party integrations as well)
Don't slow down common interactions, but allow for anything
I spent a lot of time refining small interactions to be sure we never got in your way for quick selections, but didn't compromise on power user features.
Photos, articles, attachments, & more all available in one tray. One tap selects and inserts, dismissing the tray
Swiping up or double-tapping on an item opens a fullscreen preview
Long pressing on anything activates multi-select mode
Multi-select mode shows the selection state of each item in the drawer, along with a bottom drawer collecting the selections
Tapping the small circle on a chip toggles its selection
The bottom bar is updated to reflect that.
In cases where the user dives into the full picker for a given source, this bar provides trust that the app didn't forget their prior selections.
In multiselect mode, tapping the chip opens a fullscreen preview
The preview still allows for a selection toggle, but with more context
Each entry point can define deeper views, each of different layouts. This is an image grid view, complete with subnavigation and filtering
Search based views, like the YouTube picker, go straight to a focused search.
Drive's full file picker can be accessed
This drawer/deep picker paradigm extends to picking more than media - it works for Apps content layout tools
For common two-step actions, the drawer can handle the interaction without kicking out to a full picker. This keeps the user in context and feels more lightweight
Various layouts can exist within the picker as well - trays, tiles, and lists can be customized per app.