ADT Control

c. 2018

Context

In 2018, I worked with Alarm.com on a mobile feature for ADT in their Control app. Alarm.com works with property security companies to manage the software and hardware that operates home and business owners smart devices to help control their property.

For many clients of Alarm.com, their mobile app uses the default styling, with only a change of brand color and logo, to bring some brand familiarity to the user. In the case of a client like ADT, the entire app is white labeled and designed specifically to fit the brand of the client.

Introduction

The feature I worked on was a customized dashboard that targeted existing users who already had home automation devices installed. These devices could be anything from a thermostat to a garage door, but always includes a security system. The ability I was tasked with adding into the app, was to create a way for the user to control the status of their devices at a quick glance, and reorder their device list on their dashboard per their personal preferences.

My role in this project was to focus on the interaction design and create the layouts of these pages, using existing brand elements, and pieces from our design system adapted to fit the ADT styling.

Defining the Problem

Smart home device users live busy lives, hence their desire to manage the temperature of your home from your phone at any time, or lock your doors because you forgot on your way out. To take this one step further, users can set up these devices to take these actions automatically depending on the location of the owner (device). With the busyness of these users, comes the need for awareness at a glance, so they can make more data driven decisions to better manage the devices controlling their home.

Solving for the User Story

Working with a limited scope and quick timeline meant creating solutions at a faster speed, with planning space for future improvements. The main functionality I focused on was helping the user to make decisions quickly and easily as it pertains to their devices connected to their home. There were a a few points I wanted to highlight or surface to enable the user to accomplish this task.

Weather Forecast

Displaying the current weather and a five day forecast allows the user to change the thermostat according to their comfort levels or preferences.

Drop Zone Placeholder

As a user would press and hold a device to change its order on their dashboard, showing a placeholder for where the device would be placed if dropped at any time helps guide the user to be confident when making their decision.

Device States

On the dashboard, it’s important that a user is not only able to see what devices they have available to change or view at a glance, but there is inherent value in displaying a status for a device, when available. For example, I wanted to take into consideration how a light device icon is represented whether it’s on or off — or using color to portray whether a thermostat is set to cool or heat.

Though this project was designed in 2018, when the iPhone 8 was the phone these designs were mocked up on, and I was not using Figma yet, I decided to build a prototype in Figma to showcase the interactions of what I worked on.

Prototype:

User flow (open prototype above and follow along):

• Initially, a user would see a large summary of whether their security system was armed or not, since that is ultimately the most important information, along with the forecast for the area where their devices are.
• This would encourage them to change certain devices like thermostats according to weather that may be on its way.
• Here, they could also edit their home screen per their desired customizations.
• Users could add a variety of devices to their home screen, and reorder them.
• When pressing and dragging an item to move, I wanted to use a placeholder that would show a user where they could drop it based on the placement of their finger or tool of interaction.
• This would disable any other actions by using a lighter styling to focus the users attention on completing the first task.
• They could also add other devices they have connected to their home screen by pressing the plus icon, or dragging them to a specific spot.
• When they’re done customizing, they can save and see these shortcuts to devices quickly on their home screen.
• When returning to the home screen, the icons for the different devices would now be in color where they tell you extra information, like whether you’re running your thermostat on cool or warm.

Measuring Feedback

Being the short turnaround project that it was, unfortunately I did not have the ability to test much of the work with users to gather feedback and iterate on. This meant relying on app reviews to implement user feedback into future iterations. Thankfully, there was a great team behind moving this project forward after my departure.

Based on the feedback, and the future plans we built the original version of this for, the app dashboard has grown to meet much of the feature asks below. One of the features that was later implemented was the ability to view active cameras of your property at a glance on the dashboard. The work I implemented in the Signals design system and on the original version of the dashboard made room to make these changes.

To view more reviews of the app, visit here:

Android
https://play.google.com/store/apps/details?id=com.adt.adtcontrolalarm&hl=en_US

iOS
https://apps.apple.com/us/app/adt-control/id1423831457

Claim to Fame

While I’m proud to have worked on this feature for the ADT Control app, I really felt in the clouds when I was watching Mindy Kaling’s “Never Have I Ever” on Netflix and saw a product placement of the product I worked on. It’s in Season 1 Episode 6 almost halfway through, when Ben arms his parents’ house system before leaving. 😚👌