Nest eCommerce Store Design and Visual System

The Free Association team was embedded within Nest as the design team leading the e-commerce evolution and the creation of a global interactive design system. Together with the internal Nest team, we fostered a continuous collaborative environment where designers and engineers actively shared work across three offices.

User Experience
Visual Design
Visual Design Systems

Creating a modular visual design system

One of the main goals for Free Association was to create a cohesive visual language that would maintain the flagship product's seniority (thermostat, indoor camera, outdoor camera, smoke detector) but be flexible enough for partner products to be shown in a similar environment.

Establish a common language

To work with a large team in multiple offices a better way to communicate design specifications was necessary. To tackle this, we created a custom spacer library in Sketch (that was sharable). This method allowed all the designers on the project to be working with a consistent set of spacing increments. This library also allowed for easy document export where the spacers were still visible for developers to use.

Keyline diagrams were also established to optimize the image asset resizing process. The Works With Nest product catalog is large and products vary greatly in aspect hence the need to a constrained image guidelines.