Smart Power Home | Mobile+Desktop App for domestic energy management
Credits - UX Design (Information Architecture, Wireframes), Art Direction (Supervising UI Designers)
Goal - SPH needed an application designed to work with their external device that connects a home to the electric grid, and helps see details of energy consumption for each plugged device.
Challenges - The app needed to provide a smart way to quickly label each device and see easy to understand analytics. Breaking down a complex set of information visually and providing easy to follow solutions.
Solution - We created an icon library for popular devices at home such as TV, phones, tablets, microwaves etc categorized by space (living room, bedroom, garage etc). This allowed the user to quickly borrow an icon and name all the devices. The analytics would then show up for each icon - and provide quick-fix solutions notifications.
I also provided art direction notes and feedback to UI designers.
For UI Design, I try to look at all screens in thumbnail view to check if the overall visual flow is true to the art direction.
For the Desktop version, the main challenge was to design a clean and organized dashboard where all basic elements of energy, security, safety, temperature and pool settings could be seen at a glance, along with the option to see the information in further detail.
These are wireframes for our two main screens (Dashboard and Item Management)
We picked on the most important information like monthly energy cost, heating temperature, appliances that are consuming energy over normal etc. and displayed that upfront. Then we added buttons like 'Manage Items' which would take the user to a new page with details of per-appliance energy consumption.
After I had the wireframes in place, I created a design language for the app and supervised UI designers to build all the screens. The keywords for this app were 'organized, calm, responsibility' etc - purple being the color of royalty and green being a calm color inspired me to create this purple/mint blue-ish palette. I used modern gradients and fractals for background design. We created 3d icons with 3 different gradients representing shadows, midtones and highlights.
For UI Design, I try to look at all screens in thumbnail view to check if the overall visual flow is true to the art direction.
For the Desktop version, the main challenge was to design a clean and organized dashboard where all basic elements of energy, security, safety, temperature and pool settings could be seen at a glance, along with the option to see the information in further detail.
These are wireframes for our two main screens (Dashboard and Item Management)
We picked on the most important information like monthly energy cost, heating temperature, appliances that are consuming energy over normal etc. and displayed that upfront. Then we added buttons like 'Manage Items' which would take the user to a new page with details of per-appliance energy consumption.