Back to Work.
dashboard

People & Product Pairing Illustrations

Project Overview.

Defining the character & product pairing illustration style at Google Nest

2017-2018
  1. Visual design
  2. Illustration & icons

The Background

From 2017 to 2018, I worked on the Google Nest hardware team as a product designer and illustrator. I gathered feedback from the internal team to create the Google Nest character illustration style. Additionally, I created product pairing illustrations and animations for the Nest temperature sensor, the Nest indoor and outdoor cameras, the Nest x Yale Lock, and the Nest Hello doorbell. I collaborated with another illustrator at Google Nest, Kenny Chen, to define the illustration principles that would be relevant to people.

Goals

  1. Align product pairing illustration with Nest principles
  2. Define the Google Nest character style
  3. Develop inclusive illustrations to help users successfully pair their hardware products

Inclusive Design

Providing an accessible and inclusive design experience was important to the Google Nest team. We wanted the character illustrations to be representative of their users. I started by sketching inclusive illustration concepts including diversity in ethnicity, ableness, backgrounds, age, and location.

Minimalism & Naturalism

These sketches focused on inclusive illustration concepts including diversity in ethnicity, ableness, backgrounds, age, and location.

logo
Early character sketches
logo
Early character sketches
Analogous Palette

When defining the skin tone, I initially started with an analogous palette, which proved to be problematic. This palette used colors adjacent to each other on the spectrum. The issue with this approach, although it creates a harmonious palette, it's not reflective of an inclusive skintone palette.

mobile success
Analogous palette

A Non-Linear Palette

A more naturalistic approach is to use a non-linear approach to developing a palette. The skin color palette uses a mix of warm creams, softer yellows, muted olive, and darker brown tones.

  1. Added more yellow than red tones
  2. The palette is based on naturalistic colors adjusted for web and mobile interfaces
  3. Easy to differentiate between tones
  4. Pairing multiple skin tones in the same image will seem aligned and not jarring
mobile success
Exploring a non-linear palette

Colors for Illustrations

Nest had a wide variety of colors to use from product and pairing illustrations. Some of the palette options were repetitive, so I removed some of the palette. The palette included UI colors which had specific meaning, which might add confusion to the illustration.

UI Colors

"Emergency Red" and "Headsup Yellow" work well for alerting users of actions, but not necessarily for illustrations.

mobile success
Original UI palette
mobile success
Adjusted UI palette

Nest Blue Variations

As the brand evolved, Nest's palette included several blues for different UI states. I eliminated repeating colors so that the palette had more contrast.

Explorations of Skin Tones

Single Background Color

Multiple background colors may be too distracting and not aligned to the Nest brand.

Direction & Angle

Avatars should be facing one direction or should all be facing different directions

Colors

The color palette should use the Nest product color palette (in limited use) for accessories, backgrounds and additional elements.

Skin Tone

The skin color palette uses a mix of warm creams, softer yellows, muted olive, and darker brown tones.

mobile success
mobile success mobile success

Products

Nest Temperature Sensor

The Nest temperature sensor is a way to extend the reach of the Nest thermostat within the home. The illustration needed to indicate that the user must be within a specific range in order for the sensor to reach the main thermostat.

mobile success
mobile success mobile success
mobile success mobile success mobile success

Nest Hello

The Nest Hello is a doorbell camera that users install on their home. During set up, users must replace their existing doorbell chime with the Nest Hello. There are several (very important) steps in order to properly connect the chime. We indicated how the user can set up and pair with product illustrations and copy.

I created 35 illustrations and animations to show this process for the out of box and pairing experience.

mobile success
mobile success
mobile success
mobile success
mobile success
mobile success

Nest Camera

We received some user feedback that users weren't installing their outdoor cameras correctly. They needed to insert and twist the wire until the plug snaps into place, which seals the wire. We created a new illustration in the onboarding process in order to create the seal.

mobile success

Get in touch.