Google Drive

Material Design  ·  2013–2015

Google Drive Material Design iOS

Background

In 2014 Google announced Material Design, a unified design system for digital experiences. Top-tier Google products were required to adapt to the new system shortly after the announcement, which required a complete rethinking of layout, interactions, and implementation.

My Role

  • Senior Product Designer
  • Prototyper

Platforms & Screen Sizes

  • Web
  • iPhone and iPad
  • Android mobile and tablets

Goals

  • Redesign Google Drive UX to adhere to Material Design principles and visual language
  • Make file/folder organization faster and easier.
  • Remove design and experience inconsistencies between iOS and Android platforms
  • Work with all other Google products to ensure patterns and design decisions are consistent

Starting point

Prior to Material Design, Google Drive was inconsistent across all platforms, both functionally and visually.

Drive before Material Design

Drive before Material Design

User Testing

Several rounds of testing was conducted with interactive prototypes. Users were given organizational tasks to complete with the prototypes. Success was measured empirically by observing how much time it took users to complete tasks, and anecdotally by asking users to compare the experience to the current Drive UI.

A later-stage prototype.

The overall experience proved to be a significant improvement over the current UI. Through testing we learned the importance of visual feedback in the organizational experience and subsequently spent a significant amount of time on optimizing animations.

First Launch

We were initially required to use a grey heading color a bright red action button. I later pushed for a cleaner white and blue design (see below).

Drive Material Design iOS Mobile

Drive Material Design iOS Mobile

Drive Material Design Android

Visual Update

A subsequent release with a brighter, cleaner visual style.

Drive Material Design Mobile

Drive Material Design Android Mobile

Drive Material Design iOS Mobile

Drive Material Design Web File Selection

Drive Material Design Web File Organization

Drive Material Design Web File Upload

Drive Material Design Android Tablet