Google Drive Material | Mike Leotta · Product Designer & Leader in NYC

Google Drive

Material Design · 2013–2015

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.

Organizing files on the web was challenging for users.

Drive initially launched with a single-click to open model, which followed the standard interaction paradigms of the web. As a result, multi-selection of files required several clicks on small click targets (checkboxes). Users were unhappy with how long it took to make complex selections compared to a traditional desktop file system.

Proposed Solution

Allow web users to interact with Drive like a desktop filesystem.

Essentially, ignore the current web paradigms and introduce a single-click to select / double-click to open model. This proposal introduced several questions and challenges. Would users understand the model change? Would it actually help them organize more quickly and effectively? Could we technically design and build the proposed experience?

The idea also was initially met with skepticism from product leadership and intense criticism from some Google employees. It was crucial that we spend a lot of time testing and verifying the concept in order to have data to prove its effectiveness.

Collaboration 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. I designed in New York while a colleague designed in Sydney. We typically had an hour of overlap each day to touch base over video conference but had to rely on other means to collaborate the rest of the time.

Map

While this effectively gave us a 24-hour cycle to design, it also made collaboration 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, approvals, and to suggest modifications to the Material Design system.

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.