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.
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.
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.