How can we help people save money on energy?

Timeline: 1 week

8 members, including Data Scientists and Front-End and Back-End Developers

My Role:
UI consultant

What is EnCon?

EnCon is an energy calculator to help households gauge how much energy they are consuming, and how that energy consumption affects them financially. By breaking down the energy usage of different appliances, EnCon seeks to help users understand how much they are spending on energy for each appliance.

Why is this important/ what's the problem?

All across the US, homeowners and renters receive energy bills monthly, but are often ignorant of how that bill is calculated. Knowledge is power, and understanding how each appliance affects their monthly bill can help users save money by allowing them to be cognizant of which appliance costs them the most or least amount of money.

My role – why am I here?

The team consisted of web developers and data scientists dedicated to solving this energy education problem. However, they had no aesthetic direction, and needed someone to create a design that fit the energy-saving sensibility of the app. The team wanted something clean and easy-to-understand, that would display the information and data clearly.

Design tasks

In order to achieve the needs of my team, I needed to create the following:

Creating the EnCon logo


For the logo, I wanted it to somehow show that this app was all about energy, and so I wanted some sort of image to represented that. I searched "energy" in google images, and found that there were a lot of light bulbs that popped up, which indicated that people associate the light bulb with energy.

Google image search for "energy" that showed a lot of light bulbs, which ended up being the basis for the logo design

The "eureka!" moment of realizing that the light bulb was the perfect choice

Logo color research

After deciding on the light bulb as the basis for the design, I then wanted to see what colors were normally associated with energy companies.

Duke Energy homepage
AES Corporation homepage
Energy Star homepage

As you can see, all of these energy companies, while each has their own unique brand identity, incorporate blue into their color scheme, indicating that blue is associated with energy companies and the usage of energy.

Finding the font

Next, I needed to figure out the font/ typography style. Since this is an energy app to help users save money, the font needed to look professional, as with a bank or a financial firm, but also comforting and energetic (get it?).

And, because consistency is important, the font for the logo would also be used throughout the app, so it needed to be readable.

While doing research for the logo color, I happened across this energy company:

Check out that professional yet comforting font!

The font used for this energy company is a custom font, but I managed to find a font in the free google font list that expressed a similar sensibility, and so I chose Rubik.

The logo also combined a regular weight version of the font with the bold version, which I thought conveyed the sense that the company could do it all; a sensibility I thought EnCon could use as well.

The combination of normal and bold font makes it feel like this is a company that can do it all

The final result

After researching my approach to the logo, I came up with the following:

Flattened illustration resembling a light bulb

Regular weight of the Rubik font combined with the bold weight for the second-half of the word

For the color I incorporated three different hues of blue to underscore the energy identity of the app

Building the interface

To create the rest of the product, I needed to design three different kind of screens: the sign up page, the calculator and the dashboard.

The sign up page

The sign up form didn't need to be fancy, so I focused on iterating on the text hierarchy, as well as the input boxes and button shape.

First iteration
Final iteration

Poor text hierarchy

Button and subheading text is too large; and edges are too squared;

Proper text hierarchy

Button and subheading text is the right size; and the edges of all the boxes and button are nicely rounded

The calculator

Next, I had to create the energy calculator.
My first idea was to use tags, or a multiple button selector, because I thought that a user would want the option of calculating more than one thing at once. But after showing the team that iteration, they clarified that they wanted the calculator to calculate each appliance on its own so that users can see how much that specific appliance is costing them. And so I instead used radio buttons, as that would signal to the user that they could only select one appliance at a time.

First iteration
Second iteration

My first iteration also had a "Energy Calculator" header, but the background color looked too much like a clickable button as opposed to a header, and so I expanded the edges the reach the edge of the screen.

First Iteration
Final Iteration

Header looks like a button

Header stretches out to the edges of the screen

Another addition to the final iteration was for there to be a calculation of the average yearly dollar total a person would spend on that appliance based on the average daily usage.

First Iteration
Final Iteration

Adding the average yearly dollar total to the final iteration to give the user more information

Here are the full screens of the two iterations:

First Iteration
Final Iteration

The dashboard

For the dashboard, it was important to create an aesthetically pleasing, yet also practical interface.

To start, I created two tabs, one to showcase energy usage over time, and the other to showcase a specific breakdown of energy usage with each appliance. For tracking energy usage over time, I titled that "Track Usage", and for the specific breakdown of energy usage, I titled that "Appliance List."

The highlight with the divider in the middle implies that these are tabs, and indicates that you can click the "Track Usage" to see the information in that tab

In the "Appliance List" tab, I further divided the information into "daily", "weekly", and "monthly" energy usage and its dollar amount.

I found some cute icons to further underscore what appliance is being calculated on each line

When one of these are highlighted in blue, that indicates that you are viewing the estimated cost and average energy output for that field. Here, we are viewing it by "daily"

The team and I also thought it would be useful to use graphs to track energy usage and spending. Since they only wanted to track expenses as a whole, and not necessarily for each appliance over time, a bar graph made sense for the "average expenses graph."

The blue highlight indicates that you have clicked over to that item, and the graph responds by showing the information for that item

However, for tracking the average energy output over time, the team thought it would be useful to compare and contrast how much a user uses one appliance over another appliance. Therefore, I used a line graph.

This is where I ended up incorporating tags. I wanted the graph to be as clean as possible, with minimal words and descriptions. And so I color coded each appliance so that each color line matched with a different color tag. As the user clicks each tag, the lines appear and disappear on the graph.

These tags are clickable and the graph responds by hiding or revealing the corresponding color line on the graph

The result

These elements combine to create the final dashboard, which is both very minimal and clean as well as aesthetically pleasing:

For better navigation through the app, I added a button at the bottom that would allow the user to input their daily energy output