The fruit of the redesign process (see redesign strategy)!

As before, the screen is framed by a series of indicator lights (top left), buttons to switch between money and energy units (top right) and physical buttons for each page within the energy monitor: Overview, Appliances, Compare, and Goals. The screensaver, containing the potted spider plant image, was one of the only aspects of our design that remained completely unchanged. Below are our newly modified versions of the four main pages within the monitor.

Overview Page

Previously, our Overview page had a graphic of a partially-filled light bulb representing total energy use so far for the day. Since the lightbulb container had varying width, users could not easily view the ratios within appliance breakdown.  We temporarily switched to using a battery-shaped container (for uniform width). However, when we were thinking of a way to visualize usage rate as well, we finally came up with a visual that incorporates both measurements (rate and total use).  Now rate is represented by the flow of water into a cup, with different streams of the waterfall representing the different appliances currently using energy. The cup is filled with all the energy used so far that day, and it is also broken down by measured appliances. 

We also moved the tips and quiz features to the Overview page. They are located on a side bar that can be minimized.

Appliance Page

The revised Appliance page allows for more comprehensive sorting, and also allows the user to track previously measured data in addition to monitoring appliances that are currently being measured.  As before, clicking on an appliance will bring the user to a page with a graph of more data:

The new Appliance detail page makes it easier to determine the total energy use or cost of an appliance during a specified time interval.  Previously, there was too much focus on integrals which may have confused the user.  Now that instructions are given to mark start and end times, the user may position the bars for the desired time interval, click “Calculate,” and the answer will appear on the side.

This is an example of the calculation on the Appliance detail page.

*Note: On the Appliance page, we decided not to flesh out the Assign/ Re-assign plug feature since we feel it is straightforward Instruction-following and using a QWERTY keyboard.

Compare Page

This is another example of the Compare page, comparing this year with last year. The new design for the compare page has a less confusing way to switch between simple total view, and graphical rate view (where applicable).  

One thing that was lacking in our previous Compare pages was a way to view year by year results.  (Before, users were limited to comparing this year with last year).  We now have two new options on the left, All Weeks and All Years.  This shows the trend over successive weeks or years. We decided not to put All Months, since months vary too much in number of days, number of weekends, and of course, season temperatures.  Years are very consistent, and consecutive weeks will only show small deviations in season temperatures.

Goal Page

Our biggest redesign was the Goal page (formerly called the Plant page).  On this page the user can see how he or she is doing compared to his/her energy use goal.  The goal is an upper limit for the total daily energy use.  Depending where this goal is set (represented by the green line on the energy bar), there is an expected current total usage for each time of day (represented by the pink dashed line) that the user should strive not to exceed if he/she desires to meet the goal. 

If the user’s current total use is above the pink line, as it is in the above example, this means he/she is not on track to meet the goal. Therefore, the plant, which corresponds to the user's progress towards achieving the goal, will not look so healthy. 

But by looking at the energy bar diagram, the user will be able to see that if he/she cuts back, it is still possible to meet the goal (by staying under the green line).  As the day goes by, the pink line rises closer to the green line and if it ever gets above the user’s current usage line again, then the plant will look happier.

Alternatively, the user may decide the goal is too challenging and will make an easier goal for themselves (corresponding to a higher allowed energy use for the day).  This is accomplished by moving the green goal line higher up on the energy bar. Notice how the user still has the same total energy use so far in the day (2000 kWh). However, now that the goal is set higher, the pink dashed line representing current expected use is also raised and is now above the user’s current usage line.  Because the user is has not surpassed the expected max usage for that time of day, he/she is well on the way to meeting his/her goal. Correspondingly, the plant looks very healthy.

Raising the goal even more makes the gap between the usage expectation and the actual current usage even wider, so the plant looks very healthy. 

This redesign was very important because it allowed us to get rid of the confusing plant metric and the awkward options for improving plant appearance but not health. It also makes it much easier for the user to see understand what their plant appearance corresponds to, so that it will ultimately provide more meaningful feedback. If the plant is looking droopy, the user may try to cut back on energy use in order to meet their daily goal. If the plant looks exceedingly healthy, the user may realize that they are capable of using less energy than their current goal maximum, and can update their energy use goal.