While at Google, I took part in the Material Design refresh of the Google Now predictive cards. I designed a modular framework to handle a variety of content types in a flexible and expandable way to work across devices and platforms.

google-now-cards

The Approach

To implement the new design language, I devised a five-step strategy

1

Index and research the content

2

Create visual design rules

3

Design the modular components

4

Establish interaction rules

5

Establish rules on modular parts connections

1

Index and research the content

Discover all the possible content types and research their properties/limitations and how they scale across platforms and devices.

2

Create visual design rules

Establish the rules around typography, colors, images, grid systems, etc.

Font Family

type

Color System

color

Baseline Grid

baseline-grid

Image Crop Rules

image-crop-rules

Contextual color

contextual-color

Accent color

visual-color-1

3

Design modular components

Design the semantic components as the building blocks for the card layouts. This architecture answers engineering needs to have a system that can handle rapid development and aggressive release cycles.

Screen-Shot-2020-05-28-at-11.47.05-PM

4

Establish interaction rules

The previous model depended heavily on blue links in addition to ambiguous touch surfaces.

The goal with the new design was to create a model that makes direct interaction with the card surface be the prime method and to bring content forward.

old-new

Icons used to indicate actions within modules

icons

5

Establish rules on how modular parts should connect

Even though modular parts are supposed to be fully flexible, you still need some ground rules around how they connect. Otherwise you will end up with a disarray of clashing visual elements and inconsistent interactions.

visual-rules

Guiding Intelligence

The challenge was to let users improve the system, and nudge it toward the right path without explicitly telling it what to do since that would defeat the purpose of an intelligent predictive system.

Asking users questions was a method used to enhance the signals which the ML system could use to improve its suggestions over time. The learning layer was part of the scrim layer.

Guiding-Intelligence

Selected Works

Instagram ReviewsProject type

GoogleUX • Visual Design • Mobile

CorningProduct design • Visual Design • Web App

© Ali Ali 2024