.png)
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.
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.
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.
Simple drag and drop interface allows users to arrange their dashboard to suit their unique needs.
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.
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.
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.
Don't worry, we'll never share your email with anyone.
©2024 Yeti Technologies LLC
