Dashboard • RespoNsive web


Empower is a novel solar panel energy management system that enables solar panel users to manage and monitor their energy usage all in one place. Using a combination of environmental sensors, machine intelligence, and behavior learning algorithms, Empower optimizes indoor temperature and energy usage for each user's preferences.
Our team was tasked with producing a mobile-first web dashboard for managing and viewing data behind this complex system.
I worked end-to-end on this project, from conducting user interviews for solar panel users, to analyzing the user research, to designing and prototyping the web dashboard. I worked on an 8-person research team and a 3-person team to create the branding and the final dashboard designs.


User interviews
We conducted user interviews over the phone with 10 users across the United States. 6 users owned smart thermostats, 2 had solar panels, and 2 had both. Our interview questions focused on understanding users' usage of these different devices, and their priorities when installing and managing these systems in order to better understand how an integrated platform like Empower could best function for a variety of users.
Key Takeaways
From the user interviews, we determined that 4 areas mattered most to users when it came to energy management:
  • Convenience: Most users want to set up their system and not have to worry or think about it much afterwards.
  • Comfort: A majority of users changed their temperature settings when they or their families were uncomfortable.
  • Saving Money: Money was either the main factor or the main benefit of using a smart energy system for all users.
  • Reducing Environmental Impact: Several users wanted to reduce their personal impact on the environment.
COmpetitive analysis
Along with creating a product that caters to the needs of users, Empower wished to influence user behavior to be more environmentally-friendly. Our team collected data on how equivalent solar panel and smart thermostat companies displayed data and influenced consumer behavior. We looked at the following companies:

We found that the competitors attempted to influence behavior in 3 primary ways: by displaying tangible monetary savings, social comparison (i.e. comparing the usage to neighbors) and appealing to their eco-consciousness (this works best with users that are already eco-conscious).

We also learned from these competitors that using some historical design conventions increases comprehensibility across a diverse group of users. For example, Nest's UI resembles an old-fashioned radio dial thermostat– something most users are already familiar with and can instantly recognize how to interact with.


During a meeting earlier in the project, we asked our client to provide a list of adjectives they wished to emulate through their brand, as well as companies whose branding they would like to draw inspiration from. Grouping and affinity mapping from these, we settled on three adjectives for Empower's ideal brand:
  • Minimal
  • Environmentally-conscious
  • Powerful

Using the Crazy 8's design sprint method, our three-person branding team came up with as many logo ideas as we could in an hour. Dot voting on our preferred fonts and logo ideas, we narrowed down our ideas within our brand adjectives. We then presented our best ideas to the rest of the design team and the client, and then iterated to find our final logo and wordmark.

We kept our color palette clean and simple with neutral colors and green to give it an environmental and minimal look. Upon feedback from our client that they wanted a few colors to use as accents, we provided a variety of secondary accent colors that can be used as necessary. For our fonts, we chose clean, readable fonts for a minimal look.


Empower's sensors can collect a variety of environmental data. The data most relevant to the user's needs to display on the dashboard is:
  • Energy usage over time
  • Inside/Outside Temperature
  • Energy consumption from the Electric Grid
  • Solar energy produced/stored

In order to create a effective Minimum Viable Product for our client, we added a few constraints to reduce the scope:

  • The dashboard would be for any solar panel user in the United States.
  • Specific data about energy exporting from solar panels back to the grid would not be shown on the dashboard, as laws governing this vary from state to state.
  • We would not include information about energy storage in batteries.
  • Our main focus would be on displaying relevant and important data on the web dashboard in as visual a manner as possible.
Information Architecture
I created the information architecture for the web dashboard, mapping out the entirety of the dashboard and its components so that the whole team could get on the same page. Though screen UIs changed later, this was a turning point in helping our team understand the bigger picture as well as the role they played in our final product.
Wireframing & Usability Testing
Over the course of a few weeks, our team held several rounds of design studios, and created a low-fidelity version of our dashboard to usability test. In order to make sure we could design mobile-first, we split the dashboard into cards that could be rearranged on web and mobile. Then, we broke up the pieces to figure out the best way to stitch the dashboard together:

Usability testing at this stage revealed a few key details about our design:

  • Users were overwhelmed by the amount of data and options being presented to them, and were unable to parse out which data was most relevant to them.
  • Many were not sure which dashboard components were clickable or how each section applied to actions they needed to take.
  • Users stayed on the main dashboard looking for relevant actions to take before clicking in to components.
  • The perceived brand of the dashboard did not match the brand guide we had created.
Using the results from our usability testing, I iterated on a high-fidelity mockup, keeping the pain points users experienced, brand guidelines, and the user behaviors from the personas at the forefront.
Mobile responsive
Because we built the dashboard in cards, I was able to design a preliminary mobile version using the same components. Competitors like Nest and Ecobee had mobile apps that made temperature control and energy monitoring even easier with a smartphone, and this was a major factor in convenience for users.


Next steps
Overall, the client was pleased with our designs. Weekly check-ins made it easier for the client to see what direction we were headed in and if anything needed to change. Having stakeholders contribute and review work weekly helped us efficiently create a powerful and simple interface for users to interact with, while staying consistent with the brand guidelines.

Empower plans to begin implementation towards the end of 2018, and will aim to roll out its solar energy management system to its first few US states by 2019.
Through working on this project, I learned that I am good at identifying gaps in research and design, and am equipped to prevent things from slipping through the cracks. I also really enjoyed designing for a product that has a lot of science behind it, but the users didn't necessarily interact with it in that manner. This meant that everything had to be presented in very visual ways and kept simple.

Lastly, I learned that I should just grab the bull by the horns when it comes to problem-solving. There were several instances where I took charge in this project, which helped me to learn and grow significantly as a designer, and led to a great final product.