Clare One Panel

‍Overview

The ClareOne Wireless Security and Smart Home Panel is the first professionally installed controller that includes full-featured home automation, control, and professional security monitoring in a single, unified touchscreen display. The UI/UX of this product was designed from the ground up to pair both visually and functionally with the ClareHome iOS/Android application. 

‍Pairing the Panel and Mobile Experience

With a defined design system for the mobile app experience, the goal was to have both products share the same look and feel. To achieve this considerations and updates had to be made to key parts of the panel design system. A microscope was put on the user's journey inside their home. Major considerations included; the arm length of the user to the product as they control their home, and location of the device in the home. The size of the touchscreen, resolution/color contrast, and font sizes were also major contributors when defining the ClareOne design system. Font sizes were addressed to deliver the best experience possible when interacting with a device from an arm-length away. Some other features like adding new devices, settings, and emergency screens were designed to align with the design system.

‍A Look Into The Competition

Together with stakeholders, product owners, and input from the entire team we explored what homeowners were using to control their security and smart home devices. Identifying what was working well and what could use improving we found ways to design a cohesive interface that focused on an all-in-one experience.

‍A Design System for Smart Home

A collection icons and were designed to deliver a cohesive experience underlining security and status. Devices that controlled your security and privacy shared status colors indicating from a glance if your home is secure with doors locked, security armed, and even if your blinds are closed. All device tiles also listed out status to address users with color blindness and featured design variations to visually show a change in state.

For more information on the ClareOne visit https://www.clarecontrols.com/clareone