NEST
UX/UI APPS DESIGN

Overview

During my internship at Nest, I was able to work on multiple teams all across our Nest UX Apps Design Team. I will introduce some of the awesome projects I have worked on that I can share at the moment.

img

Core UI Assets

Core UI Assets were built out for all designers to stay consistent when creating layouts. Layer comps were used, so that designers across the team including engineers can simply use the dropdown to create any layout. All assets have been pixel perfected and everything has been measured out for clear direction on how to use these assets. Each asset has been created as it's own linked objects for simple drag and drop onto any layouts for faster and quicker usage as well.

img

iOS Pairing Templates

These are screens for the full pairing onboarding template layouts that are consistently calculated to fit each mobile device for iOS and Android including the Tablets as well. You can see how the Core UI Assets described above has been easily utilized here for a consistent design delivery and experience.

img

iOS Mobile Pairing Templates

These pairing screens were created as templates for consistency across the design and engineering teams. The Core UI Assets were precisely measured in pixels and have been optimized to fit in various iOS screens which include:
iPhones 4, 5/5s, 6/6s, 6 Plus/6s Plus.

img

Android Pairing Templates

These pairing screens were created as templates for consistency across the design and engineering teams. The Core UI Assets were precisely measured in pixels and have been optimized to fit in various iOS screens.

img

Farsight Target Temperature Animation (Current)

Farsight's current animation is a very simple zoom in and out motion.
You can learn more about our Farsight features.

Learn More

Farsight Current Temperature Animation (New)

I created a new motion that animates from an angle fully zoomed in at the current temp instead of the targeted temperature. It will then zoom out to view the overall both current and target temperatures.


Farsight New vSpec "Basic Elements"

Detail vSpec information that is created to be passed onto engineers for exact measurements, typography, spacing, and etc. on how this should visually look and function if animation is there.

img
img

Farsight New vSpec "Typography"

img

Farsight New vSpec "Animation"

img
img

Farsight New vSpec "Color Matrix"

img

UI Elements in Commercials

We recently released new commercials with home/away assist, camera, smoke detector, and thermostat (3rd Generation). The UI elements created are used in all of these commericals and carefully inspected before airing to make sure every pixel details are on point and the UX is correctly being used in the products.

More coming soon...