The Problem
The client requested a new user interface for monitoring and controlling their in-home climate. The current UI is difficult to use and requires a technical background to properly navigate. Using the current telemetry, the client asked us to design a new UI to help facilitate increased efficiency and reduce utility costs. Our objective was to provide an intuitive user interface to remotely monitor and control home climate in order to reduce costs and increase comfort.
The Solution
Our team first executed a work domain analysis to better understand the current physical system and dig deeper into the client's data and information requirements.
We then recognized three primary categories of functional requirements:
-What does the temperature in my house feel like? How does it compare to the temperature I set?
-What is the temperature in my home relative to the outside temperature?
-What is the humidity in my home relative to the outside humidity?
-What has my consumption been for the current utility period? Is it trending high?
These functional requirements and consequently the information used to address their answers are what drove the creation of our set of interfaces.
The Home Screen
The opening screen of the interface shows an at-a-glance, higher level overview of the state of the home climate. The graphs show trends in key information at specified time intervals. The top right box is consistent across all displays. It features information on utility costs with sparklines representing the usage trends and contains the controls to set the comfort level ("Feels Like" Setpoint) as well as buttons for preset options. Note how the use of color is employed to make the setpoint the most salient piece of information, as it is the only setting the user can directly control. The home screen also features navigation to the drill down pages of Temperature and Humidity. The alarm icon along with a number appears next to these navigation buttons let the user know of any unexpected changes, notifications, etc. associated with the respective metric.
The Temperature Screen
This drill-down screen contains more specific information on temperature. The same temperature graph from the home page is repeated to give an overview at the top of the screen, with the addition of the "Feels Like" temperature for comparison. Additionally, there is a field showing information on AC/heating units. The sparklines show the trends in their supply temperature relative to the setpoint, and the green circle indicates the unit is running. The windows and blinds field uses green to indicate if either a window of blind is open. These blind and window icons can be tapped to open/close their physical counterparts. Finally, the alerts field gives a text overview of all notifications. The title turns red when there are active alerts. Notice the user can navigate across lower-level screens by pressing the "Relative Humdity" button in the lower right, or return to the home page by pressing the home icon in the upper right.
The Humidity Screen
This drill-down screen contains more specific information on relative humidty. The same humidity graph from the home page is repeated to give an overview at the top of the screen, as well as a dewpoint graph to provide supporting information. The windows and blinds field from the temperature screen is repeated in this display. There are no active alerts pertaining to the relative humidity, so the "Alerts" header remains black.
Pop-Ups
The settings pop-up appears over the current active screen when the settings button in the consistent upper right box is selected. It allows the user to adjust certain control points for each preset option. The user can set the setpoint, target monthly cost, and floor-by-floor blinds' and windows' statuses.
The urgent pop-up notifies the user when a new alert is generated. This pop-up will only appear on the permanent in-home display when the system is not in use. If an urgent situation occurs, the display screen will light up and the red icon in the upper left will blink. This will allow the notification to be noticeable even in the peripheral field of vision. If the interface is actively in use, the normal appearance of an alert will be sufficient. The most salient navigation on this display is for the user to navigate to the associated drill-down screen so they can investigate the source of the error.
