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
Case Type: UI, Design Systems, Typography and Color Design, Logo Design
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:
First, 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?).
While doing research for the brand's color scheme, I happened across this energy company:
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.
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.
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.
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.
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.
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."
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 elements combine to create the final dashboard, which is both very minimal and clean as well as aesthetically pleasing:
I also designed EnCon's logo, which can be seen in the wireframes presented above, so if you'd like to see my design process for creating the logo, that can be viewed here.