The new ScreenLogic home screen. A green highlight color identifies elements with current activity, such as the pool heater or lights. A selection from the ScreenLogic UI. Commonly-used functionality is revealed in context without menu diving. The original UI side by side with the new one. Among other changes in visual hierarchy, the restriction of iconography to shapes allows color to serve more purpose. The iOS home screen compared with the Android adaptation. Though the changes are subtle, they include respecting platform conventions such as not using carats for listview navigation in Material Design.

Pentair

ScreenLogic Home Pool Control: Updating a comprehensive home automation system

Pentair’s ScreenLogic system gives users of in-home pool systems fine-grained control over a variety of features, ranging from thermostats to lighting and pumps. The original app was comprehensive, but had a confusing information architecture, and its readability and affordance suffered from non-standard UI controls.

I worked with our team’s UX architect to identify information and functionality to lift out of deep menus and present either on the home screen or in contextual, progressive-disclosure elements. I divided the visual hierarchy on the top level of navigation to further separate what we identified as primary use cases, such as checking or setting temperature, from secondary ones such as scheduling.

As a cross-platform app, ScreenLogic had to look native in both contexts. To this end, I formulated an updated UI style that could flex between conforming to the iOS HIG or Material Design on Android.