How can we help people save money on energy?
Timeline: 1 week
Team: 8 members, including Data Scientists and Front-End and Back-End Developers
My Role: UI consultant
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.
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.
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.
In order to achieve the needs of my team, I needed to create the following:
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.
The "eureka!" moment of realizing that the light bulb was the perfect choice
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.
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.
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
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
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 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.
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
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.
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.
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.
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:
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."
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
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