2022
4 Months
UX Design
UX/UI Designer
In tandem with the upcoming release of an updated energy management hardware solution, our team was tasked with creating a dashboard widget that would add better user insights into energy consumption and production patterns.
While Leviton's hardware solutions for smart energy management have made significant strides, the app interface for understanding energy usage and extracting insights lagged behind previous versions and fell short compared to competitor offerings.
Create a dashboard that showcases energy usage insights categorized by multiple time intervals, predicts upcoming power bill, and shows current whole home energy usage.
UI Design, UX Strategy
While smart load centers and breakers were already on the market at the Leviton, the smart hub of the load center required significant updates to the back end infrastructure in order to make it a viable energy management solution. When the updated product was developed, an opportunity arose to add current transformers, allowing for a much more efficient and accurate calculation of total energy usage. With this innovation in the product, a competitive analysis was conducted to understand how other companies utilized similar data to communicate energy usage insights to customers.
What are the company's goals for the dashboard?
How will the dashboard improve the smart home ecosystem?
What metrics will be used to measure the success of the feature?
What insights are customers looking for to understand their energy usage?
In order to understand what insights our users were interested in gaining from this feature, I collected survey results from the dashboard usability study of 25 users who utilized the existing features.
In addition, I collected user-submitted feedback in the publicly released version of the app to better understand what users were looking for in the app on a daily basis and how this widget might solve those problems.
Users felt that the data being displayed about their energy usage was insufficient to understand larger patterns and what they would need to do to conserve energy and save money.
The previous cost gauge was confusing to users, as it was unclear what the change in color in the interface meant for their upcoming bill.
Users had a hard time finding where to edit their cost per kilowatt hour and target monthly spending.
Because the consumption graphing only covered one year of data, users were unable to compare their consumption year to year.
After interviewing stakeholders about the product requirements and how we would position the energy management widget within our existing product ecosystem, the key differentiator became clear: while other companies provide thorough insights into energy usage, this widget would be the only one existing within a dashboard that also controls other smart home device such as lights and plugs within the home. With this insight in mind I began the visual design process.
Using the feedback and insights gained from analysis and sketching, I created sketches to help lay out the various elements that were needed in the widget. The most crucial part of this step was overcoming the small amount of screen real-estate that would be allotted to a complex, multi-faceted component.
Utilizing stakeholder feedback and drawing on the internal design system, I iterated on multiple rounds of designs for the widget. While the initial donut chart was seen as too simplistic and differing too much from competitors, stakeholders also felt that the electrical grid design had been utilized by too many competitors already, and were ultimately interested in a design that would bring the functionality of the chart with the sleek visuals and animation that other companies were utilizing for the energy component.
.png)
Once the above designs were tested with users, it was clear that an important aspect was missing. While users appreciated the visual of the donut graph representing the percentage of their energy consumption, this type of graph was not sufficient in scenarios where solar production exceeded home consumption and energy was being sent back to the grid. Users requested a way to view the direction of energy to and from the grid, and it was back to the drawing board to design a graphic that was closer to the initial electric grid animations while differentiating itself from competitors. In addition, users pointed out that totals were missing from the History summaries.
The whole home widget design allows users with smart load centers to gain insight into their current energy usage, understand their upcoming bill, and compare current usage to historical energy consumption.
The energy tab showcases the direction of energy flowing to and from each energy source to and from the home. Users have the ability to set up grid, solar, battery, generator, or wind power.
Users can set their target cost and see whether this month's usage is on track to meet their spending goals.
Users are able to see historical energy data for various time periods, and compare the months of this year to the same month in the previous year.
.png)
Graphic is distinctive from competitor products while remaining visually appealing
Significantly more insights provided into usage patterns than original cost gauge.
Line graph removes confusing color signals that were present in previous cost gauge design
While I believe that the current iteration solves many of the user problems presented in the research phase, the next iterations could improve upon this design in the following ways:
Throughout the process of this design, I uncovered the type of clear and easy-to-understand information about energy consumption that users are interested in learning, and gained a better understanding of the how they might utilize simple and intuitive controls to manage their usage. Additionally, I learned how to create a clean and modern design for a new feature while remaining true to the design system of a digital product in order to make patterns familiar and consistent, easing the process of learning about a new feature for the user. In future iterations post launch, we will continue to add additional insights into energy consumption, such as breaker-by-breaker consumption information.
.png)