Appliance Demand Calculator

app-demand-calc-header

Appliance Demand Calculator

We wanted to make the Appliance Calculator more than easy to use. It also needed to feel fun and warm.

I started by giving the icons a little thicker stroke to make the icons feel more “cartoon-like” than industrial and cold. All of the icons were then recolored and edited to adhere to a limited, on-brand, color pallet.

The icons were then also stripped down to work as black and white versions. The reason behind that was to make the full-color versions appear 1) when the user hovered on the icon, and give them a visual cue that mirrored creating life and energy and 2) draw a parallel to the full-color rooms that these items were to be identified with and placed within.

Lastly, all of the icons we designed with mobile first in mind. For that reason, they were all created to be visually identifiable and adhere to finger sizes design principles.

The rooms went through multiple iterations. The biggest reason was to have a workflow that wouldn’t overly tax the development phase. For example, originally, I thought it would be great to be able to drag and drop items onto the rooms. Unfortunately, that would be problematic for accessibility reasons (there are WAI-ARIA tags that can be used, but to be honest, that would be a new technique for all of us, and there’s the chance it could end up consuming many more hours than intended), and the complexity of the application would have jumped considerably to allow drag and drop functionality ANYWHERE. I would have had to limit icon dropping to particular “hot spots”, which would have increased the learning curve for the user.

In the end, I created 6 room types, and simplified the process for the user. A default set of appliances were created for each room, and users were given the ability to duplicate or delete rooms to aid in the creation process. This way, when a user created a room, such as a kitchen, they would not lose time to adding appliances such as refrigerators.

app-rooms

.

In this mockup, the room that’s in full color designates which room is currently active. This design also enabled the user to see 6 rooms at a time with a quick glance, but it also greatly reduced the size of the room.

Another downside to this design was the placement of the total kW. It was so low on the page that users could easily miss it.

The last negative aspect to this design was the additional icons next to the Appliance Name. They proved to be a little redundant as the appliance name was right next to the icon.


Following that criticism, I reached the final design. The appliance icons were grouped by category, and the color was eliminated from all icons  unless they were being hovered over, or if there were active in a room.

The “Rooms” area was given a carousel instead, as many users are familiar with the concept from image galleries and banner rotators. This also increased the size of the active room considerably, and still have the user the ability to sneak a peak at the other rooms.

Rooms actions such as “duplicate” and “delete” were incorporated into a hamburger menu, that will tie into the future mobild version.

The transition from wireframes to high fidelity mockups was quite a journey with this project, that ended with a very well thought out and friendly design, that will hopefully help users gain a better understanding of what the usage is like in their home.

app-calc-comparison

, ,