Copy of firewerx


Firewerx is a network home automation system that provides simplified control over users' home environments. This was an interface design completed for a human factors - engineering psychology course.



about the project

Our goal was to create a web-based controller by employing design principlesI will mostly be discussing design elements and rationale for this project. Although Firewerx is meant to be a home automation system where users control their home environments, we will only be focusing on a few key pages - specifically, the main displays and thermostat functions.


Figuring out the main ideas

Since one of the project's focus was on thermostat functions, I had to take some time to understand how thermostats work by exploring the functions of the more popular traditional thermostats. The smart thermostats have advanced features that would not have matched with the criteria I needed for this project so my focus was heavily on what design changes can improve the traditional thermostat.


Traditional thermostats have many flaws because of the lack of user-centered research. Desired temperature control is something that is not analytical. If the user desires certain room temperatures at certain times, he or she should not have to process too many bits of information to achieve it. I reframed the mission in the form of questions:


How might we...

  • Make the displays easier to read, without a learning curve?
  • Make temperature schedules more simplified to program?

main display

I realized that the traditional thermostat in itself contributes to clutter of the whole room; instead, I reasoned that displaying the time as a default served a better purpose than a simple display that only showed room temperature.


A black background with white or bright font was intended for the main displays, including the thermostat display, so that it doesn’t direct attention away from the room. With that in mind, a 180-pt font was used for the clock (1) to provide easier-viewing and to guide the users’ attention to it first. For the inside (3) and outside (4) temperatures, a smaller-sized font was utilized, but they are both saliently-different from the characteristics of the clock.


Colors provide more information through orthogonal dimensions for the temperature readings. In the example display above, the green color depicts a temperature within proximity to the automatic temperature set. If it is above or below the range, it will show red or blue, respectively. The clock and temperature are in the form of digits rather than analog because the space is too small for an analog display and users may have to extremely closely to determine the approximate time; digits also benefit more for point-estimation tasks.


Using the proximity compatibility principle, the indicator is set directly above the inside room temperature so that the user can quickly determine if the temperature is within range, and if he or she needs to turn on a specific thermostat function. Instead of displaying configurable buttons and introducing clutter to the main display, all the functions where the user has to interact with the automation system can be done by pressing the menu button (5).


Menu Display

There are only a few categories of our ambient home environment that we are truly in control of: touch, visual, and auditory.   From left: temperature controls, lighting controls, media controls, settings.

There are only a few categories of our ambient home environment that we are truly in control of: touch, visual, and auditory. From left: temperature controls, lighting controls, media controls, settings.

The menu display is designed to aggregate the various features of the home automation system into categories. As more and more products become integrated into our everyday technology, I noticed that there are only a few categories of our ambient home environment that we are truly in control of: temperature controls (touch), lighting controls (visual), media controls (visual/auditory).


Circles surround the generic icons to depict buttons users can press. Salience cues such as the blue, yellow, and green, are available for each button that directly affects the environment. Since the settings button refer to internal configurations, it remains white to guide attention away.


Temperature controls display

A spectrum in the shape of a half-circle is shown, with blue on the left, transitioning in a gradient from blue to red. Following the SEEV model for predicting focus of attention, the red and blue colors are meant to be cues for hot and cold; and the oval is designed as a hybrid analog display so users can look at it and easily understand if the temperature indicated (1) is within a comfortable range. Otherwise, they can refer to (7) for a point-specific current temperature.

The (1) indicator provides two functions: to show the current room temperature or, if the user drags the indicator forwards or backwards, he or she is actually setting the desired temperature for automatic mode. By sliding (1), the black indicator marked with an “A” follows the user’s finger and locates to the point where the user sets the desired temperature. After release, (1) reverts back to the current room temperature and “A” remains at the new set temperature. (7) also changes to reveal the temperature the user is exploring and also reverts back after user sets the new temperature. These functions provide a easy way for users to set automatic temperatures - simply drag the indicator to what temperature you want.


The heat/cool set points (2) only reveal themselves when the system is on heat mode or cool mode only. Users can also set the desired temperature one degree at a time by tapping (6). The use of triangles and red/blue colors are correlated dimensions that remind the user to press up for hotter, and down for cooler. These arrows follow the principle of pictorial realism, where up means a higher temperature and lower is colder.


Because turning on and then setting a specific mode is redundant and more stress for the user, we set Firewerx to turn on automatic mode if the user presses the power button. The other buttons to the left of the power button (4) are perpetually available and the appropriate modes will be activated and will override the current mode if the user presses them, with the exception of the program button. This avoids the information access cost by providing less categories of information and allow users to avoid mode error.


The program button will reveal a pop-up card-based display where users can view and edit programmed temperature settings. The pop-up separates the function of the program mode because more information and details are needed in this mode.


Program Mode: the list

I realized there were a lot of confusion surrounding the current thermostat offerings; and the confusion usually lies in program mode. It’s easy enough to just toggle on and off for heat, cool, fan, or even turn on automatic mode; but when it comes to setting programs, many people rely on user manuals.


This is very much a design problem. Traditional thermostats are limited in this way because of hardware constraints. There is also a bit of a learning curve with understanding how programs work; I sought to eliminate these issues by providing lists and instruction within the display.


I divided the program menu into two separate areas: the list of programs (seen above) and creating the programs. This program list will be displayed when the user presses the program button in the Temperature Controls page. 2D buttons (1) are placed on the left that toggle the programs on or off. Colors are used to add dimension and depict the operations; the whole row is faded if that schedule is determined to be off to avoid confusion.


Program Mode: scheduling


Again, there is much we can do to simplify the operations of creating a new program compared with the operations of traditional thermostats. If we break down what users truly need, they are: to choose day(s) of the week (1), choose the time you want to turn on temperature controls (3), and the desired temperature for the selected day(s) and time (4).


We can add more functions such as time ranges or both heat/cool points; but this would add more categories and delay user decision-making. For times and temperature, a gradient is added to the top and bottom to imply that you can scroll through the numbers with your fingers, per pictorial realism. The word “Select” is included into each step to guide and direct the users on what to do for each of the three categories. Saving the program creates a new row and automatically turns it on in the Program List page.



Beside being able to apply the human factor design principles into an actual interface, my biggest lesson from this project was understanding that user-centered design is applicable, and should be applied, everywhere.


I started off thinking the design principles we learned in class was simply user-centered enough to just directly apply to an interface - as long as we came up with sensible explanations for doing the things we did. I was even starting to separate the visual design from experience. But even the the design fundamentals is deeply rooted with user experience.


Design isn't about finding something that is new, different, or even sensible and reasonable; but it is more about understanding what improves people's lives in the ways that are best for them.