Utility Answer

A word from the client:

Deliverables

• UtilityAnswer Website

Scope

We worked closely with Jeffery Farber to build an end-to-end experience that allowed users to shop for energy prices online and to compare an manage their utility bill. In a nutshell, it is like Mint for energy. The project involved building custom charts with complex data display requirements and itegrating them into an easy to use dashboard that tells the story of a user's energy usage and spending. The entire project consisted of a user dashboard for managing multiple meters, an auction and comparison page, and a checkout experience. Behind the scenes we worked with Jeff to synchronize energy usage data to the client and pull in data from multiple disparate sources.

Goals

Our primary focus was creating an experience that would educate users on the complex topic of energy pricing and utility bill management. As such, there were numerous iterations on the graphical and informational display components shown. The information needed to be displayed in a way that users could understand, which in turn would build trust in the UtilityAnswer brand.

Charts and Data

One of the challenging aspects of this project was creating highly interactive graphs. We wanted to control the charts with React's view abstraction layer while still having access to the power of D3.js. As a result we built a custom D3.js integration that all of the charts below are built on top of.

Above is an example of the auction landing page. The graph shows a the energy usage and monthly cost estimate of energy given a user's utility profile and their energy prices. It is compared to the energy price provided by the utility company. You can see in the demonstration above that changing plan terms automatically adjusts the graph to show the relevant time period, as well as highlights the active period.

This graph was also capable of smoothly animating to show just the monthly cost or savings. In the example below, the bars are all red, but in many cases it would be a combination of savings during some months and losses during another.

Bill Analysis Tool

The Bill Analysis component pulled actual line-items from region specific utility bills into a unified and easy to read format. It demonstrated to the user where the savings (or losses) would come from in a way they could compare to their paper utility bills.

Added Clarity

We created even more components to try to best explain how energy auction prices affected the users' bill. This component explains Supply vs Delivery, and the portions of each that make up the bill for any given month.

Account creation

The account creation flow required getting several pieces of important information from the user in order to generate an accurate price auction.

The above video demonstrates an early concept of the login flow. It evolved into the image below, which shows all of the steps to the user - making it easier to understand.

Auction Loading

Getting auction prices across energy distribution companies is a time consuming process. To convey that to the user we created an animated digital view into the auction, showing energy distributors competing to provide the user the lowest possible price. We were transparent about the number of bids collected across distributors and gave a preview of the savings (or losses).

Conclusion

The UtilityAnswer project was a great experience that pushed our development skills forward. It challenged us to simplify complexity and focus on user experience in an industry that typically ignores it. We're proud to have worked alongside Jeff and are excited for what the future holds with UtilityAnswer.