Back to Work.

Nest ☓ Yale Lock Experience

Project Overview

Onboarding and pairing for the Nest ☓ Yale lock

  1. User interface design
  2. Prototyping
  3. Visual design
  4. Illustration/icons design language
  5. Pairing/out-of-box UX

The Background

The Nest ☓ Yale lock is the connected home smart lock system which pairs a hardware lock with the mobile experience. The lock is part of the Works with Google Nest program, which partnered with Yale, who built the hardware.

Since the Nest ☓ Yale lock is a hardware-software experience, I was able to work across hardware UX, voice user interface design, and traditional UI.

As a UX Designer with Google Nest hardware, I primarily worked on the hardware UX flow, pairing and out-of-box experience. I supported the team with UX flows and adjustments, UI/visual design on pairing, the design language of icons and illustrations, and prototyping.

Project Goals

  1. Work with engineering, project managers and product managers on any adjustments to the UX based on user feedback
  2. Update visual design and illustrations of screens to adhere to Nest design language
  3. Collaborate with engineers on any bugs or fixes needed to ship the project
  4. Collaborate with UX writers to finalize screen content
  5. Ship the completed mobile, tablet and web experience by the project deadline
Lock hardware
Mobile experience

Multi-Sensory Experience

Since the lock required multi-sensory input from the user, the user journey had several external factors to consider for the onboarding and pairing UX flow.

  1. Wifi and timeout considerations
  2. Hardware UI
  3. Hardware VUI
  4. Hardware UX
  5. External (alarming) factors (tampering, weather, installation by users)
  6. Notifications
Multi-sensory experience

Out-of-Box User Journey

One of my main projects was working on the UX flow for the out-of-box experience and pairing. The setup has four main sections: installation of hardware, pairing, calibration, and passcode setup. The out-of-box experience is when a user opens the physical hardware and pairs their product with the mobile app.

Pairing extended flow

Locked out During Calibration

One of the issues we found during testing was that users were getting locked out during the calibration stage. One solution was to communicate in Nest app pairing that the user must be on the inside of their door before calibration.


Pairing with the Nest app ecosystem

We could unify the device pairing experience by consolidating pairing, calibration and passcode setup in the Nest app.

Setting up Nest Passcode

Simplifying the passcode setup would allow users to complete the entire pairing process with their Nest app.


Nest App Calibration

There were a few considerations when pushing the users to calibrate through the Nest app instead of through the lock hardware. The user had the option to choose to pair, calibrate and set passcode through the hardware flow, or select to pair through their Nest app.

  1. The extended wake up time is ~15 minutes before the battery drain
  2. User cannot retract commitment to pairing with the Nest app once they've selected 3 on the keypad
  3. User can restart the setup process by removing and re-installing the batteries
  4. The inside indicator continues to pulse blue when user presses the button, indicating that pairing is complete

Pairing User Flow

We could solve this by showing a calibration intro screen that alerts users that they need to be on the inside of the door to calibrate.

  1. Begin lock calibration
  2. Close the door
  3. Checking the lock
  4. The Door Check Sensor setup is done
  5. Check your installation

Pairing Product Instructions

Another key aspect of the pairing flow is selecting the product from a list of other Nest products, scanning and pairing the device. Users may choose to pair with another Nest product (~4% of users have more than one Nest product).

    Product pairing steps:

  1. Select hardware
  2. Pair with QR code
  3. Install another Nest product (router or camera)
  4. Once paired, they can calibrate
Product pairing

Hardware Passcode Constraints

One UX limitation by the device hardware was that users had to set up a passcode on the hardware during the product voice user interface onboarding steps, and then set up a different passcode in the Nest app once they completed pairing. This Nest passcode replaced the first hardware passcode.

Hardware passcode UX flow

Passcode Solution

Since the Nest ☓ Yale lock was a partnership with Yale, there were some limitations to the UX flow because of hardware constraints. I added a step which indicated to the user that they needed to set up a separate passcode for Nest to use on their lock.

Set up Nest passcode flow

Installation Prompt

We considered pairing by asking the users to download a detailed manual to follow instructions. Feedback during the trial suggested that the manual allowed users to setup the lock in about 30 minutes with limited issues.

mobile success
Installation guide option

Our team was able to finalize an instructional video for users to be able to follow along the steps in order to install the hardware.

mobile success
Installation video

Lock States Design Language

The lock had several states depending on the hardware: locked, unlocked, offline, tamper, privacy mode, and can't lock/can't unlock. Depending on the state of the lock, the user is notified through notifications, on the deck/spaces and on the main app interface.

Subtle differences in the lock design language indicated to the user the state of the lock, paired with distinct visual changes in the main interface ring, icon set and content. Since the lock hardware state is a critical issue, the user must understand that their lock has not completed a desired state change.

mobile success
Lock icon
mobile success
Tablet view
mobile success
Mobile view

Pairing Illustration Style

I adapted the illustration of the product pairing hero images to the Nest style. The previous Nest ☓ Yale lock illustration style looked very technical and static. In the calibration step, users may be confused over the button color if their device doesn't match. Also, the content suggests users must perform an action, which isn't indicated in the illustration.

mobile success
Current illustraton style
mobile success
Adjusted illustration style

Current Setup Passcode Imagery

The previous passcode imagery lacked consistency with updated Nest illustration style in the app. The goal was to communicate how users will replace their Mastercode with a Nest Passcode. The illustration and content needed to showcase to the user that they needed to create a passcode for their Nest ecosystem.

mobile success
mobile success
mobile success

Install Another Product

Users with existing Nest products can use their Nest product as a router to speed up the pairing process. Users must install the other product first (such as a border router) and then install their lock.

mobile success mobile success

Notifications and Critical Alerts

As part of a separate initiative, I have been working on updating the notification system as part of the iOS 12 update. Users will now receive notifications in the alarms group (such as lock tampered) as a Do Not Disturb (in Android) and Critical Alert (in iOS).

mobile success

Notifications will be placed in groups depending on whether they're a structure (family of devices), system (offline, for example) or device (Nest ☓ Yale Lock).

mobile success

Learnings and Outcomes

The product shipped in April 2017 and was received well by users, with 93% of customers recommending the product to a friend.

During this project, I was primarily focused on the hardware UX experience, which included inputs for voice user interface, user interaction with the hardware device, physical device UX, and the mobile experience. I also had the opportunity to create the illustration style for pairing and out-of-box experience, which allowed me to learn about the importance of showcasing technical details to users.

Physical UX

I paired and unpaired different Nest ☓ Yale locks probably about 100 times. I also have a test product installed at my home, which gave me insight into the installation process. The experience of physically installing the device and listening to the voice commands along with the commands of the interface was a unique challenge.

External Factors

Another key learning from this experience was how external factors in the physical world can impact the app experience. I had to think beyond the screen in order to think through all the different edge cases. As I mentioned, wifi, weather, or someone breaking into the house are all factors which can impact the app experience.

Get in touch.