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.
User research suggested that users install the camera primarily as a soft security device, but may also use the camera for additional reasons.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
The feature is designed to be flexible to any screen size and has feature parity across mobile and tablet for both iOS and Android.
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.
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.