Back to Work.
dashboard

Activity Zones on Mobile

Project Overview

Teaching cameras areas of user interest for Google Nest

2018
  1. User interface design
  2. Prototyping
  3. Feature planning
  4. Visual design
  5. Illustration & icons

The Background

As a UX designer on the Nest cameras team, I led design for the Activity Zones on the mobile and tablet experience. Activity Zones are user-defined areas of interest in the camera's view which enable specific and meaningful notifications.

Nest cameras are learning cameras which use AI to recognize events within the home and notify the user so they can take action. Pets, people, sounds and security issues are all events which the camera recognizes and surfaces up to the user in meaningful ways. The more information Nest's cameras can intake about the user's profile, the more targeted and meaningful the experience can be.

Primary Uses

User research suggested that users install the camera primarily as a soft security device, but may also use the camera for additional reasons.

  1. Traditional security
  2. Monitor properties
  3. Take actions to protect their home
  4. Care (pet, baby, elderly parent)
  5. Entertainment

Goals

  1. Achieve parity across all platforms
  2. Encourage users to create meaningful Activity Zones and label them, so that we can better understand how and where users are placing their cameras
  3. The more Nest can train the cameras to recognize anomaly within the home (such as an unfamiliar person, car, or animal) the better it can act as a soft security camera
logo
Activity Zones in the web app

Managing Notifications

One of the primary reasons for users to implement notifications is to manage which notifications they receive. Users may filter out notifications for people seen and motion in case they don't want to be alerted of events within their home.

logo

Early Explorations

  1. Exploring ideas: While there was an existing experience for the web app, the mobile experience had unique constraints that I explored early in the feature planning process.
  2. Drawing a shape: How can I make drawing on a shape an accessible experience across devices?
  3. User control: How many controls should users be able to use in order to manipulate their shape? Do they need to undo last actions? Should they be able to clear an action?
  4. Showcasing the image: Should the image be zoom to fill (visually appealing but cuts off most of the camera view) or zoom to fit (shows the entire view but less aesthetic)?
  5. Upleveling color and label customizations: How can we make changing colors and customizing labels easy to access, but not intrusive?
logo
Early explorations

User Journey

Activity Zones initiated from the camera settings section. Users with a Nest Aware subscription (premium users) could access the setting and immediately start creating or editing Zones. We had to account for existing users and users completely new to Activity Zones.

logo
User journey

Drawing on Shape

Since the feature is extremely tactile, we wanted the user to be able to zoom, pan, rotate, and move shapes without compromising on either performance or accessibility.

logo
Drawing shapes

Zooming and Performance

The Nest camera uses a 4K sensor with HDR and intelligent imaging, which uses significant bandwith when zooming and panning. Zooming and panning the shape needed to be as seamless as possible since the user might be in a zoomed view or with a shape that is larger than the viewport. I collaborated with the engineering team in order to ensure that the users' movement around the screen was as highly performant as possible.

logo
Layout sketches

Overlapping Shapes

In the web experience, if shapes overlapped, the intersecting areas masked the edge with the historical shape taking precedent. There were a few issues with this system since users can't see the shape edge. Also, some shapes might be entirely hidden by historical Zones.

logo
Overlapping Zones
logo
Zone hidden

Compound Shapes

I adjusted the behavior rules for drawing shapes in order to be more accessible for users. Users were able to overlap shape vertices, which created a compound shape. I decided to eliminate this behavior for future Activity Zones shapes and to notify existing users that compound shapes are now deprecated. Users will have the option to save, delete or dismiss resetting the shape to default.

logo
Contained shape
logo
Compound shape
logo logo logo

Creating a Zone

Users can access Activity Zones through the structure settings and see a screen with their camera feed and a prompt to create (if a new user without Zones) or edit a Zone.

mobile success
Creating a new Zone

Editing a Zone

When editing a Zone, the user selects the Zone they would like to edit which opens the Zone Editor. From here, the user can move, change the label or delete the Zone. The adjusted Zone is shown in the hero image in Activity Zones settings.

I decided to show one Zone in the Zone editor to limit the cognitive load for the user. With a smaller screen size and multiple Zones and vertices, user error could be an issue when adjusting Zones with overlapping vertices.

mobile success
Editing a Zone

Label Explorations

When editing the label, the user needed to be able to easily create an input that was reflective of the Zone use. I explored different ways to limit the type of label name by adding suggested (common) labels such as "door", "side door" and other relevant labels.

mobile success

Editing a Label

A recent study found that ~37% of zones are not custom labelled, meaning users keep the default label "Zone" in the title. Since Zone labeling wasn't discoverable in the web app, we wanted to make labeling a Zone an enjoyable and simple way for users to remember their Zone name.

mobile success

Further research on feature interaction suggested that when using the web app experience, about 60% of users were opening the Zone label setting, but only 17% were editing or creating the label.

Palette Selection

For consistency with the web app experience, the palette needed to use the same color language. I initially explored various ways to showcase the palette without being intrusive.

mobile success

Since the editor supported orientation in both portrait and landscape, and would be accessible across various device sizes, a simplified palette overlayed on the editor allowed for the most screen real estate.

Accessibility Across Devices

The feature is designed to be flexible to any screen size and has feature parity across mobile and tablet for both iOS and Android.

mobile success
mobile success

UX Specs

Activity Zones required detailed visual, UX and motion and behavior specs. The spec included variations for mobile, tablet and web for both Android and iOS devices.

mobile success

Learnings & Outcomes

When the feature launched, it gained a lot of traction within the first week and has maintained steady use of about 20k daily users. This experience allowed me to explore various ways for users to draw on an interface and use camera vision to surface relevant information.

mobile success
  1. Camera vision: Since the camera intakes the users' home feed and stores it in the cloud, there is inherent latency between what the user sees within their home and how the interface outputs a relevant image. With the awareness of these constraints, I worked to mitigate the risk of app latency.
  2. Accessibility of drawing on an interface: One of the central interactions for the user is drawing on an interface. With accessibility as a concern, I was able to develop a solution for the majority of users while aligning to the web application.
  3. (Simplified) control is best: Early explorations of the Zone editor gave the user more controls than the web experience. Ultimately, I narrowed down the number of controls to limit user error and cognitive load.

Get in touch.