ClimateResponse Energy Graphs
Project Overview
The Power Saver Rewards program is a residential energy program run by all three major energy utilities across California: PG&E, SCE, and SDG&E. The program encourages participants to save energy during Power Saver Rewards events, which happen when there is an electrical grid emergency. When participants save energy, they get paid in the form of a utility bill credit.
Olivine, Inc. currently implements the Power Saver Rewards program on behalf of PG&E and SCE. Olivine utilizes the ClimateResponse app as a way to increase customer enrollment and engagement in the program by giving insights into past energy usage data, ways to save energy, and sending notifications for upcoming events.
The goal of this project was to redesign the energy usage data graphs within the ClimateResponse app.
Role: UX & UI Designer
Team: Product Manager, CTO, and Software Developer
Target User: Participant in the PG&E or SCE Power Saver Rewards program. Typically, the energy bill account holder and head of the household.
Business Goal: Improve participant engagement and aggregate energy savings in the Power Saver Rewards program.
Design Goal: Improve upon known usability issues in the existing app, make it easier for participants to gain insights from energy usage data, and improve the overall visual design of the energy usage graphs.
Constraints: Unable to speak directly with users. Design decisions must be based on competitive analysis, heuristic evaluation, and UX design best practices.
.png)
Design Process
Usability Evaluation of Current App
I started my design process by conducting a heuristic evaluation of the existing design to discover general usability issues. The primary issues I noticed were efficiency of use and data visualization flexibility.
Current App
New Design
One aspect that stood out in the existing app was the date picker was inefficient at selecting dates, requiring the user to scroll through a long list of dates to view past energy usage. It was also relatively small on the screen and presented potential issues for a user to accurately select a date.
Current App
New Design
Shows a maximum of 8 items at a time, no method to compare.
Limited and inflexible date picker, difficult to go into past data.
Overview of energy data, zoom in to see specific data points
More flexible date picker
The existing app constrained the view of energy usage to exactly 8 fully visible data points at a time, with no flexibility of how many or few data points to view. This didn't provide enough data for a user to understand their energy usage over any given time period and provided little insight into patterns and statistics.
With a better understanding of the general usability issues of the app, I moved on to consider best practices for information visualization and how similar companies in our field approached displaying energy data to their customers.
Research
Competitive Analysis
I conducted research on common patterns for information visualization as well as how energy data is typically presented by utilities and third parties.
These visualizations contrasted with the current design of the ClimateResponse app in the following ways:
• Flexibility of data visualization
• Inclusion of weather data
While consulting with the project team in the early stages, it seemed that including weather data may be difficult to implement. Therefore, I focused on improving the energy usage graphs themselves.
Information Visualization Best Practices
During my research into information visualization best practices, I learned that good data visualization should communicate a data set clearly and effectively by using graphics. The best visualizations make it easy to comprehend data immediately. Visualizations should take complex information and break it down in a way that makes it simple for the target audience to understand and easy to gain insights from.
Before drafting my designs, I decided that my goals were to make the energy data easy to comprehend and simple for the user to base decisions from. A user who is participating in the Power Saver Rewards program needs to understand opportunities for reducing their energy usage and visualize their energy savings over time. If they can get a better grasp of where and when to reduce their energy, they can maximize the amount they are paid for participating. Therefore, I focused my design decisions on making it easier for a user to get feedback on their energy use over time so they can improve their performance in the program. I also investigated best practices in well-established design systems, like in Material Design, to understand what some well-known improvements could be for elements like the date picker.
Research Analysis
Understanding the existing usability issues, design patterns of similar companies, and best practices for information visualization, I decided to focus on giving users a better overall sense of their energy usage over time, with the ability to drill down into the specifics easily if they so choose. My goal was to give a broad overview and more context for their energy usage, but also give control to the user if they wanted to see more specific information.
UI Design Process
Low-Fidelity Sketches
With these goals in mind, I then started to brainstorm different ways one could visualize the energy usage data, experimenting with things like line graphs and step graphs.
I also sketched out how the energy usage graphs might look displaying all data for a given time period and how it would work with the existing UI.
Initial Iterations
I decided to continue with a couple of the low-fidelity sketch concepts into high fidelity mockups to get a better sense of how they could look in the UI.
I created a higher fidelity version of the line graph, which I thought gave a smoother overall representation of the energy usage trend. However, the bar graph allowed for a more discrete representation of the given time interval (for example, an hour within a day) but still allowed the energy usage trends to be displayed over time when all data was displayed on the screen. Therefore, I decided to move forward with the bar graph.
High-Fidelity Mockups
Moving forward with the bar graph representation, I created high-fidelity mockups of the energy graphs. My high-fidelity designs display all energy data for a given day, week, etc. and allow the user to pinch to zoom in and see more detailed data. This allows the user to see an overall trend of their energy usage data, with the flexibility to explore the data further.
I also had to consider less common use cases, like if a user had solar panels on their home. At some points in the day, they may be exporting more energy than they are using onto the grid and their energy use would be negative. I had to think through and come up with a design for how this type of data would be displayed.
Finally, I proposed a new design for the date picker based on best practices that I researched and reviewing well-established design systems. I focused on making the date picker easier to navigate when switching between time ranges.
When I consulted with the development team as I was preparing to write documentation for this update, we determined that this would take more resources than we could dedicate to implement the pinch to zoom feature. Therefore, I adjusted my design to include a control to zoom in and out on the graph instead of pinch to zoom.
Additionally, the development team raised concerns about developing a new date picker for the app from scratch. We agreed upon utilizing the native date pickers for iOS and Android instead of the date picker that already existed in the app.
Final Design
Future Iterations & Lessons Learned
I am excited to start usability testing and further understand how users interact with these energy graphs, so we can continue to make improvements to the user experience.
​
The main lesson that I learned from this project was thinking more thoroughly about design and how it might behave in certain edge cases. This really encouraged me to think and make design decisions for when the data was not ideal, for example the case of a customer with solar panels.
It is important to think through and document the different cases outside of an ideal scenario, which your design may not account for. This is critical to think through and make design decisions for the entire user experience of a feature or product.