EKM Metering tasked us with architecting Encompass, an ‘Internet of Things’ solution which connects energy consumption measurement hardware with a data visualization web app. EKM designs electricity, gas, and water meters which can push big data wirelessly to the cloud. After rapid and iterative design and development phases, the result was Encompass, a visually elegant way to understand energy consumption. We’ve continued collaborating with EKM for over 3 years, optimizing the original product as it evolves into a powerful second version.
Design and build a solution which will enable energy consumption data to be scalably pushed to the cloud. Display this sophisticated information within the context of a web app for easy and intuitive data visualization.
Leverage big data and the internet of things to enable energy consumption data to be effortlessly visualized within an aesthetically streamlined web app. Rapidly iterate to create a solution which is flexible and customizable.
An elegant Internet of Things application called Encompass, which seamlessly integrates with electricity, gas, and water meters to display valuable information within the context of a polished web interface. Over three years of collaborative innovation yielding not only a successful first version, but also a soon-to-launch, powerful second version.
Visualizing Energy Consumption
When EKM Metering contacted us to build a tool for visualizing their customer’s energy data we were immediately excited by the possibilities. EKM designs electricty, gas, and water meters used in both commercial and residential settings, with the ability to push data wirelessly to the cloud. After rapid and iterative design and development phases, the result was Encompass, a completely new product for understanding energy consumption. With this tool, users can monitor all of their EKM meters from a single web app with customizable widgets for visualizing their data.
A dashboard of widgets designed to give the user insight into every aspect of their energy consumption.
TOOLS FOR SUCCESS
Building a Dynamic Web App
Encompass needed to be versatile. Out of the box this web app would need to work for a single utility meter in a residential home or for a landlord monitoring the energy consumption of an entire apartment complex. We created a flexible structure that allowed system administrators to put their meters into custom groups and permission those groups to different viewers. Group settings allow users to associate costs with their energy and even set goals for consumption. When new meters are purchased users can simply add or remove groups, or move meters from one group to another through the manager tab. For visualizing energy consumption we designed and built five widgets, each with their own unique functions. All of the widgets can also be embedded as an IFrame on any other HTML page. The widgets can also be dragged and reconfigured based on which data is most important to the user.
Meters can be sorted into groups and sub-groups.
Simple drag and drop interface allows users to arrange their dashboard to suit their unique needs.
Users can organize their meters and groups.
Billing settings allow users to input their billing info to calculate projected energy costs.
The experience needed to be seamless, allowing users to navigate effortlessly through layers of complex data. We integrated Angular.js to create a quick and responsive single page web application that could easily take users from their dashboard of groups down to data visualizations of a single meter. Encompass takes utility data provided by an API to visualize a user's energy consumption. Using D3 and other open source libraries built on top of D3 we created a set of widgets, each for visualizing the data in a different way. Users can customize which widgets display for a given meter or group to best meet their information needs.
THE MOST IMPORTANT PART
We created a single page parallax narrative for the front facing portion of the Encompass website. As users scroll down the page they are introduced to Encompass through a simply illustrated process about how the product works. We also created a demo account and in-depth tutorial section for users to explore and learn more about the product.
A parallax landing page demonstrates how the product works and demonstrates it's value to users.
Iteration and rapid prototyping make quality products. Over the course of a project things may change as knowledge gaps shrink and objectives become clearer. A good design and development team needs to react quickly and thoughtfully throughout the entire project, trying a variety of ideas and allowing the product to evolve into the best solution.