Signals

Context

In 2018, I joined Alarm.com to help them build a library of components for the product design team. Alarm.com provides hardware and software products that help people manage their home or business security systems and connected devices.

Introduction

When I joined, the design team was using Sketch to build mobile interfaces for Android and iOS apps by creating shared designs, synced through Dropbox. As one designer would need to use a component, layout, or styles that were previously used, they would open another Sketch file to grab those assets and drag them into their file.

Process

The Alarm.com app functions natively on both Android and iOS operating systems. This means I had to create a different library for each platform, which in turn meant understanding the differences between both.

But why not just create one system that could be used for both, with unique styling according to the Alarm.com brand?

We could’ve very well done just that. But we didn’t for a couple reasons:

  1. Through research and conversation, I felt it was more important to build an app that felt familiar for users.

What does familiarity mean for native mobile apps?

Mobile users are very used to and comfortable using their specific operating system, either Android or iOS, and the interactions that come with it. Even down to the alignment of text in a dialog, and where the primary and secondary action buttons are located, a user typically knows where to look for what they’re trying to accomplish.

What about more unique experiences?

With most every product, there are going to be experiences like activating a button, or being alerted by a prompt that are easy to refer to the OS documentation to design. But there are also, in most cases, unique reusable components and experiences that aren’t documented in the OS guidelines. For these, it was important to make the style and interaction feel native to the rest of the components in the operating system, but also feel consistent if a user was to change the device they were using to manage their security system.

  • colors
  • typography
  • icons
  • components
OS Pages Audit
Colors, Typography, and Icons Audit
Button Audit
Buttons
Dialogs/Prompts
Title Bars
Title Bar Symbol Structure in Sketch

Deliverables

In addition to separate iOS and Android Sketch library files that all designers could now access to build consistent and efficient interfaces, I also created some GIFs that were used to demonstrate how modular the design system was. These were used on the webpage where the documentation of the styles and components lived.

Signals Mobile and Desktop Promo GIFs

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store