Customers were frequently requesting a better way to see how much money they were spending on electricity. They wanted to know how much it was costing them, and were going to need to know how much it was going to cost at various times of the day.
We decided that we needed an appliance calculator that would allow users to add and remove appliances easily, and allow them to actually see how much each appliance is costing them, in a room by room application.
One of the big requirements for this project was that it was to NOT be an native app, but a responsive application. With that in mind, I set forward in making a design that would work well in desktop and mobile scenarios, and that was accessible.
All of the appliances can be added without drag and drop. Once the user selects a room, the list refreshes with the items in that room, and any appliance click gets add to the current room. If an item is clicked more than once (or if the user clicks the quantity), they can adjust the number of items. On mobile, a dialog appears to grant the same functionality.
On the desktop, the user can click “+” or “-” to duplicate or remove a room, where on mobile, the user is granted a “rooms” button that pulls up a list of all the rooms currently created and allows the users to navigate rooms from that UI option, in addition to granting the “admin-like” powers of duplicating or removing.
Option 1 and 2 are currently available to allow the user to choose different times, or rates, so they may quickly see what charges would be like during on and off peak times.
The most difficult part of this project was designing something that would be accessible. Yes, it’s a lot to do in a small “app” (when on mobile), but solutions to these problems had already been created in multiple mobile games that center around room creation and management, as well as tower defense style games.
Creating something that would work for those that may be impaired was much more difficult (drag and drop would be extremely frustrating for a bling user), but the solution I created succeeded in accomplishing that goal (and remained something that the dev team felt was realistic to build haha :)).