At Google, I’ve worked on various UX animation and motion design projects that ranged from crafting intricate UX components and user journeys to creating engaging animations that captured the essence of Google's brand and its various programs and campaigns.
Due to confidentiality restrictions, I am only able to share a limited number of projects that have been publicly released thus far.
Chromebook Showoff Animated Banner
These banner carousels sit at the top of the Showoff home page on Chromebooks, and are designed to showcase engaging new content while seamlessly enhancing navigation within the product. Furthermore, these carousels provide additional entry points to discover new apps and games.
As a Motion Designer, my responsibility was to assess and test the optimal approach for incorporating motion into the banner system. In partnership with Visual Designers and Engineers, I developed an animated banner system that is responsive, fluid, and adaptable.
My role: motion designer
User Triggered & Automatically Advancing Modes
By default, slides progress automatically until the user pauses the slideshow or clicks on a slide. When the user clicks on a slide, the carousel halts and immediately transitions to the selected slide.
Automatically Advancing (duration: 2,000 milliseconds)
I resorted to longer transition durations and applied a smoother animation curve to achieve subtle motion that seamlessly integrates at the top of the page, minimizing distractions.
User Input (duration: 500 milliseconds)
Clicking on a slide results in an instant response. A snappier and more responsive approach was implemented.
Labeling of Phases
To streamline communication with engineers and generate easily comprehensible specifications for handoff, I established this labeling system. Each stage in the animation process, spanning from initiation to completion, is assigned a unique name and color.
Chrome OS Motion Design System
I was assigned the responsibility of overhauling the motion design system for Chrome OS. The objective was to upgrade the existing motion system to meet the current requirements of Chrome OS and to enhance its accessibility and ease of implementation for all stakeholders. As a Motion Designer, I played a key role in coordinating UI assets, animating elements, conducting tests on various durations and easing curves, and developing interactive prototypes for the five primary transition types employed in Chrome OS.
My role: motion designer
Main Types of UI Transitions
Process
Assets Created
Supporting Materials
To facilitate the understanding of transition concepts for team members not well-versed in motion design, I took on the responsibility of conceptualizing, designing, and animating a set of supplementary materials. These visual aids played a key role in our communication with visual designers and engineers.
Enter/Exit Content & Container Anchoring
Challenge: Communicating the distinction between content anchoring and container anchoring. Solution: Creating and animating a slowed-down wireframe versions of the transitions to visually illustrate how anchoring operates for enter/exit transitions.
Anatomy of a Container Transform Transition
Challenge: Clearly conveying the integration of outgoing and incoming content within the container, and illustrating the seamless fading in and out of content during a container transform transition. Solution: Designing and animating a slowed-down wireframe version of the transitions to illustrate how content aligns within the container. Additionally, incorporating a timeline to depict opacity changes during the transition.
Forward/Backward Transitions
Challenge: Clearly communicating to engineers the lateral movement of outgoing and incoming content, each shifting by 1/3 of the container's width. Solution: Utilizing graphics to visually demonstrate the left or right shift of both outgoing and incoming content by 1/3 of the container's size.
Non-linear Navigation
Challenge: Conveying the non-linear aspects of forward/backward navigation. Solution: Utilizing graphics to illustrate the user's ability to seamlessly jump between folders, bypassing intermediate folders during navigation.
Content Anchoring on a Container Transform
Challenge: Communicate to engineers how incoming and outgoing content remains anchored to the top of the container during expansion and contraction. Solution: Develop a slowed-down wireframe version of the transition, emphasizing how content stays anchored to the top of the container.