Designed Motion Patterns for G Suite’s Design System
The published navigation drawer work was adopted by 100+ designers across 12 product teams
Overview
Role:
UX Design Intern (Summer 2019)
Responsability:
Redesigned the navigation drawer motion pattern and created detailed motion specs
Timeline (4 months):
May 2019 - Aug 2019
About The Project
I redesigned the navigation drawer, FAB, and highlight interactions to create a cohesive motion system. I also created motion specs to communicate design intent to the team. The video is shown 25% slower to better highlight timing details.
Outcome
Published to the G Suite design system used by over 100 designers across 12 product teams.
Solution
Highlight
I learned After Effects and created motion design specs for handoff. I had the opportunity to work closely with and receive mentorship from:
One of my projects was to redesign how the navigation drawer behaves when a user interacts with it. I worked on the design systems team, whose mission is to unify and create consistency across all G Suite products. The goal of my work was to use motion to create a design pattern that would be published in the design system to guide designers across G Suite.
Design Audit
My first task was to identify problems with how the navigation drawer behaves in Gmail. By analyzing the interaction at 25% of its original speed, I was able to spot several visual inconsistencies. The main issue was that the opening animation of the navigation drawer was not consistent with its closing animation.
The navigation drawer opens through a progressive increase in size and opacity. This causes unrelated visual elements to overlap, resulting in an unstructured and cluttered appearance.
During the closing animation, the text disappears and the drawer returns to its original size.
Paper Prototyping
“In Material Design, the physical properties of paper are translated to the screen.”
Google’s Material Design is known to have been built upon the properties of paper.
I asked myself: How would it be like if the navigation drawer was like paper?
Sketching
From sketching, I was visualize which UI elements would have to be designed and how they would change during the motion.
.png)