Google Drive

Material Design  ·  2014

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

  • UX Designer
  • UI Designer

Platforms & Screen Sizes

  • iPhone and iPad
  • Android mobile and tablets

Goals

  • Redesign Google Drive UX to adhere to Material Design principles and visual language
  • 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 iOS and Android platforms, both functionally and visually.

Drive before Material Design

Process

At the time, the Drive team was split between New York and Sydney, Australia, with iOS development happening in New York and Android development in Sydney (Note: this is not an ideal way to develop a product on multiple platforms). I designed in New York while a colleague designed in Sydney. We typically had an hour of overlap each day to touch base.

Map

While this effectively gave us a 24-hour cycle to design, it also made collaboration extremely difficult. We developed a digital pinboard system using Google Drawings to post all of our work for feedback and to ensure all aspects of the product were consistent.

Drive Material Design - Pinboard 1 Pinboard example 1

Drive Material Design -  Pinboard 2 Pinboard example 2

Throughout the design process, we met often with Google's Material Design leads for feedback and approvals.

Finals

The first release. 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 Tablet

Visual Update

In a later release I successfully lobbied for a brighter, cleaner visual style.

Drive Material Design Android Mobile

Drive Material Design iOS Mobile